初等・中等教育におけるプログラミングの指導
帝塚山学院大学
喜家村 奨

本日の内容• 初等教育から中等教育へのプログラミング指導について（指導に利用するプログラミング言語を中心に）• スクラッチとMakeCodeブロックのイベント処理について（作成した拡張ブロックについて）• スクラッチとMakeCodeブロック（および他のプログラミング言語）との相違点• JavaScript（およびPython）利用における留意点※本日の内容は2022/05に調べた内容です。

中学技術・家庭科の教科書のプ
ログラミング言語の傾向• 多くの教科書で、プログラミング言語を複数紹介している。
• 紹介されているプログラミング言語は、日本語入力型言語（なでしこ、ドリトル）、スクラッチ、JavaScript• どの言語を使って、授業を実施するかは、教員よってまちまちであり、生徒がどのプログラミング言語を経験するかもまちまちであることが予想される。
このような状況の中、高校のプログラミング教育における言語選択を、どう考えればよいか？

高等学校情報科「情報Ⅰ」教員研修用
教材• 本編には、Pythonというプログラミング言語が使われている。制御のところではmicro:bitが紹介されている。
• 以下の４種類の言語も例示されている。

ドリトル以外は実際のアプリケーション開発に使われているテキスト型のプログラミング言語

プログラミング言語の学習ステップ
小学生
初心者

いきなりテキスト型のプログラミング言語に移行するのは、ハードルが高い

スクラッチなどのブロック型
プログラミング言語
中学校
スクラッチ、日本語表記型プロ
グラミング言語
ドリトル、なでしこ

MakeCode
ブロッグ型＋（JavaScript orPython）

人工知能、データ分析

Python
C++
C#PHP
Ruby
Java
JavaScript

組み込み系
ゲーム、モバイルWeb系
基幹系

テキスト型に移行してしまえば他のテキスト型言語は比較的容易に習得できる。

ブロック型、日本語入力型からいかにスムーズにテキスト型に移行できるかが課題

MakeCodeエディター• ブロック型、テキスト型（JavaScript、Python）を切り替えて、プログラミングが可能

https://makecode.microbit.org/#editorスクラッチとmicro:bitのイベント処理について

イベント処理の方法• イベントを処理する方法としては、大きく分けて以下の２つの方法がある– イベント駆動型：システムがイベントを検知して知らせてくれる。ユーザは発生したイベントに対応した処理をイベントハンドラに書く– イベント検知型：自分のプログラム内でイベントの発生を検知する処理を書く※イベント検知型とは、あまり言いませんが、ここでは、区別のために、そう呼んでいます。

イベント処理の例• 以下のURLをクリックしてプログラムを実行してみてください。どちらのロケットも矢印キーで操作できますが、処理の仕方が異なります。
• https://scratch.mit.edu/projects/520990142• 左のロケット：イベント駆動型プログラム– Scratchのシステムがイベント検知して知らせてくれる• 右のロケット：イベント検知型プログラム– 自分のプログラム内でイベントの発生を検知する処理を書く

イベント駆動型のプログラム• 右のプログラムは、イベントブロック「〇〇が押されたとき」を使い、キーが押されたらロケットの座標を動かすイベント駆動型のプログラム• イベント駆動型のプログラムのメリットは– イベントの検知処理を自分で書く必要がない。
– そのイベントに関する処理だけをひと固まりにかける– コードが比較的短くなる• イベント駆動型のプログラムのデメリットは– 複数のイベントを処理する場合、それぞれの処理が並列で動くので、並列処理を意識したプログラミングをする必要がある– イベントの発生を無視できない

イベント検知型のプログラム• 「キーが押された」を使い、自分のプログラム内で、キーが押されたかを繰り返し確認し、もし、キーが押されたら、ロケットの座標を動かす。
• イベント検知型のプログラムのメリットは– 複数のイベント処理を逐次的に記述できるので、プログラム全体の見通しがいい。
• イベント検知型のプログラムのデメリットは– 自分の処理の中でずっとイベントの発生を検知しないといけないので、CPU時間を浪費する。
– コードが長くなりがちどちらのイベント処理方法を使うか• 一概にどちらがいいとは言いにくのですが、並列処理を意識したイベント処理をちゃんと書くのは難しい（排他制御のためにセマフォを使うとか、イベントキューを使うとか）。
• 次に示す例のように、ある状態から、発生するイベントによって処理をかえるようなとき（自動販売機などの順序機械のプログラミング）は、イベント検知型のほうが理解しやすいように思う。例で説明します。

スクラッチのイベント処理プログ
ラムの例• 以下のような、キー入力を待ち、入力されたキーの応じて、処理をするプログラムを考える。

花が咲く処理のフローチャート
画像1を表示画像2を表示キーが押されるまで待つ

1のキー
画像3を表示

入力された
キーは？

2のキー
画像4を表示1,2以外
画像2を表示スクラッチのプログラム

フローチャートで表現された順序機械の実装• フローチャートは設計図であり、その手順通り、プログラムが書けることが望ましい。
• 例で示したようなプログラムで、イベント駆動型にすると（イベントハンドラを使うと）、同期処理のために共有変数を使ったり、イベントの発生後の処理を条件で制限したりする必要がある。

micro:bitでの実装• 先ほどのプログラムをmicro:bitで実装することを考える。１または２のキーを押す代わりにmicro:bitのAボ
タンとBボタンを使ったとしても、MakeCodeのブロック
では、イベントの入力を待つブロックはイベントハンドラのみであり、処理が並列になる。
• ボタンを押されたかを検知するプログラムを書くこともできるが、スクラッチのプログラムより煩雑になる⇒
ボタンの入力待ちのための拡張ブロックを作成

MakeCodeのボタンの入力を待つブロック作成したボタン入力待ち拡張ブロック• micro:bit A、Bボタンが任意のパターンで押されるまで待つブロック。
ボタンが押されるまで、このブロックでウエイトする

A,B,A+Bボタンを任意の組み合わせで待つボタン入力待ち拡張ブロックの利用• 拡張ブロックを利用すると、先ほどのスクラッチのプログラムと同様に、逐次処理プログラムとしてmicro:bitでも実装できる拡張ブロックを用いた逐次処理プログラム

その他の作成した拡張ブロック• スクラッチの〇〇と聞いて待つブロックの置き換え用にmicro:bitのLEDにメッセージを表示して、その後、数字を選択するブロックも作成した
仕様• メッセージを表示し、その後、０～９までの数値が入力（選択）されるまで、このブロックで処理を継続• 数値の入力はAボタンを押すと０、１、２・・・９と順番に選択でき、Bボタンで確定
スクラッチの〇〇と聞いて待つブロック

作成した〇〇と聞いて数字入力を待つブロック

初等・中等教育でのプログラミング指導の留意点

初等教育でのプログラミング指導の留意点• 自動販売機などの順序機械のプログラミン
グでは、設計図であるフローチャートや状態遷移図にそって、プログラミングできるようにイベント駆動型のプログラミングを避けたほうがよい。
• 並列処理プログラムは、処理が複雑になり、デバッグなども含め、指導が難しい。

中等教育でのプログラミング指導の留意点• ビジュアル言語を利用した場合– テキスト型プログラミングへのステップアップをスムーズにできるように工夫する。

• テキスト型プログラミング言語を利用した場合– 学生のテキスト型言語に対する理解度は、学生によって異なる⇒
Makecodeのようなブロック型⇔テキスト型タイプの開発環境で、それぞれの学生の習得度に合わせてプログラミング言語を切り合えられることは有効• 日本語入力型のプログラミング言語を利用する場合、高校への接続性を配慮することが望ましい。
• 通信プログラムについて– 通信プログラムでは、処理が並列になるため、同期や排他制御、イベントキューなどの概念を少し一緒に教えてもいいのではないかと思う？？

スクラッチのプログラミング指導における留意点（MakeCodeおよび、その他のプログ
ラミング言語と比較して）

配列の添え字について• スクラッチの配列（リスト）の添え字は１から始まる。MakeCodeも、その他のテキスト型言語も配列の添え字は０から始まる。

ループの繰り返し条件について• スクラッチでは、ループブロックの繰り返し条件の真偽が通常と逆で、条件が成り立つまで繰り返すことになっている。

スクラッチの繰り返しブロック

MakeCodeの繰り返しブロック比較演算子について• スクラッチでは、比較演算子が＞、＜、＝しか準備されていない。
• 以上（≧）、以下（≦）がないと、条件を読み替えないといけないときがある。
（例えば：80点以上などと書けない）

スクラッチの比較演算子ブロック

MakeCodeの比較演算子ブロック

条件分岐について• スクラッチのIF文には、else if節が用意されていない。

スクラッチの条件分岐ブロック

MakeCodeの条件分岐ブロック＋を押すとelse if節を増やしていけるelse-ifの使用例• else-if節は以下のようなときに使える。
• 試験の点数が８０点以上の人は“優”、６０点以上の人は“可”、それ以外の人は“不可”となるとき、点数を評価するプログラムは点数≧８０

NO

YES
点数≧６０
成績は優NO

YES
成績は可

成績は不可

スクラッチで書くと

MakeCodeのブロックでは関数の引数と戻り値について• スクラッチでは、関数の引数は使えるが戻り値は使えない。
• 引数が使えるので、関数を一般化することは可能だ
が、戻り値がないと、関数の結果をグローバル変数に代入するか、直接、出力（ステージに表示等）するしかない。
関数の一般化の例

関数の結果をグローバル変数に代入

関数の結果を画面に出力

補足：MakeCodeブロックでの引数の操作の注意点• MakeCodeでプログラミングしていると引数と同じ名前の変数が知らない内に作られてしまうときがあります。下のプログラムは正常に動作しません。

MakeCodeのブロックでの引数の操作の注意点• 必ず関数の定義のところからドラッグする

応用：
ブロック型からJavaScript、Python
言語への移行における留意点

MakeCodeでは関数内のローカル変数を使用できない• 下のプログラムはブロック化すると、グローバル変数に書き換えられる

一度ブロック化
するとグローバル変数に勝手に置き換えられる

関数の引数について• JavaScriptでは、引数の渡し方に「値渡し」と「参照渡し」があり、「参照渡し」の場合、関数内で引数の値を変更するとそれが、呼び出し側の実引数に影響する

仮引数と実引数• 仮引数：関数を定義するときに宣言する引数• 実引数：関数を呼び出すときに渡す引数
仮引数

実引数

JavaScriptのデータ型と引数の渡し方の関係• JavaScriptのデータ型には、基本（プリミティブ）型と参照型がある• 基本型：数値、文字列、真理値など• 参照型：配列など• データタイプの基本型は、「値渡し」され、参照型は「参照渡し」される

引数が基本型の場合の例• 引数が基本型の場合は、「値渡し」なので、関数内で仮引数に代入しても実引数に影響はない※このプログラムをMakeCodeで打ち込んでも一度、ブロックボタン押すと、代入している引数はグローバル変数に無理やり置き換えられます。

a1は1ままa2はhelloのまま

引数が参照型の場合の例• 配列は「参照渡し」なので、以下のように引数で渡した配列の内容を関数内で操作できる※このプログラムをMakeCodeで打ち込んで、ブロックボタンを押しても、ブロックに変換されません。
a3[0]は9になる

配列の要素の入れ替え• 配列が引数で渡せると以下のような、任意の配列の要素を入れ替える関数が実装できる。

ブロック型でも関数内での配列操作は可能？
• ブロック型でも、引数の配列への代入は可能だが、ブロック型に変換できない場合もあるので（前述）、基本、ブロック型では、引数に対する代入は禁止されているようであるいきなり高階関数は難解では？
• MakeCodeでは、入力ブロックなどで、無名関数、および高階関数が利用されている。高階関数の概念は少し高度すぎるように思う。

micro:bitのPythonの環境• Python Editorを利用する• Muなどのエディタを使ってmicroPythonでプログラミングする• 変換機能を利用してJavaScript同様にMakeCode内でプログラミングする

MakeCodeのPythonについて• タプルなどのPython固有のデータ型や記述は使えない。あくまで、Makecodeのブロックおよび、JavaScriptとの互換性を考慮した実装になっている。
• Pythonでは、｛｝ではなく、インデントで、プログラムの構造を表現するので、その点は配慮が必要ご清聴ありがとうございました。
本研究はJSPS科研費JP20K02528の助成を受けています．