プログラミング教育実践事例研究会 2022 春～EdTech導入補助金によるMonaca Educationの活用事例～セミナーレポートVol.2

Monacaとp5.jsを利用したプログラミング学習
千葉県立沼南高等学校　沼崎拓也教諭

全国各地でプログラミング教育に挑む、熱心な先生方。その成果やノウハウを共有し、明日の情報教育発展を目指すのが「プログラミング教育実践事例研究会」です。2020年のスタートから地道に開催を重ね、すっかり恒例となりました。今回は、経産省のEdTech導入補助金を活用して弊社のMonaca Educationを導入した各校から4名の先生方をお招きし、2021年度の実践事例をご発表いただきました。

教員2名体制、机間巡視でスムーズにフォローしていくはずが……

千葉県立沼南高校情報科の沼崎拓也教諭は、それまでの失敗と反省を活かした授業を展開。短いコードでプログラミングが学べる、“ビジュアル系”な授業にチャレンジしました。

同校では3年次の「情報の科学」を、1年次に「社会と情報」を設定。1年次にある程度の経験を積んでいるため、タイピングなどの基本操作はできます。また3年1学期で、プログラミング入門としてScratchを経験。それをステップにMonaca Educationを用いた授業に取り組みました。

大まかな流れは、プロジェクトの準備などを指示してから完成後の動きを例示、実際にコードを入力してみるというもの。その間、沼崎教諭を含む教員2名体制で机間巡視し、うまく動作しない生徒をフォローしていく……はずでした。

「結果としてこのやり方は、あまりうまく機能しなくて」と反省の弁を述べる沼崎教諭。正常に動作しない生徒が続出し、ミス探しのために生徒の画面とにらめっこの連続になってしまったのです。ミスの内容は、いわゆるタイピングミスや転記ミス。日本語の混入、半角・全角や英字の大文字・小文字の間違いなどのほか、行の入力途中で他の行と混同してしまったケースもありました。

千葉県立沼南高校　沼崎拓也教諭

短いコードでの動作を求めて「p5.js」を採用

沼崎教諭は「全・半角や大・小文字のミスは、全角記号などを枠囲み表示できるもなかこみフォントで対応可能だとは思います。ただ生徒たちの多くに、タイピングスキルとは異なる部分でのつまずきが見られることが分かったんです」と明かします。

それが、長いテキストコードを入力する中で、「どの時点まで書けば未完成でも動くか」が分かりにくく、デバッグ手法をうまく確立できないことでした。「いわゆる“写経”型の授業は、学習に困難を抱える生徒にはなかなか辛いものがあります。そこで、コード量を減らす題材にできないかと考え、採用したのが『p5.js』だったんですよ」。

「p5.js」とは、「Processing」という言語をJavaScript上で動くようにしたライブラリ。電子アートやビジュアルデザイン向けの言語として開発されたルーツを持っており、アニメーションなどの動かしやすさに強みを持ちます。Scratchのような2次元座標での指示が基本となること、そして何より、1行の（短い）コードで動作できるような命令が多いことが特徴です。

p5.js（Processing）

コードを書く→動作確認までのサイクルが非常に短い

「p5.js」を用いた授業の流れ自体は、あらかじめ用意された関数内にコードを書き、プレビューで動作確認をするというオーソドックスなもの。しかし、沼崎教諭は言います。「とにかく大きかったのは、コードを書いて動作確認するまでのサイクルを短くできること。コード自体が短いため、ミスに気付きやすいんです。スペルが違うのか、インクリメントされていないのかなどもすぐ分かります。プロトタイピングの開発に近いかもしれません」。

例えば四角形の描写をする命令であれば、指示はわずかこれだけ（画像参照）。円を描いたり、色を塗ったりする指示も非常に短くコンパクトです。授業では、これらの文法を手短かに解説したのち、課題に取り組みます。「課題と言っても簡単なもので、色と図形を組み合わせてシンプルな絵を描くだけです。そのほうが生徒も楽しめると思いました」。

具体的には、「円と四角形だけで何か描いてみよう」というもの。例示として、教諭がクマやアニメキャラを描いてみせたところ、それだけで生徒から「おお～！」と歓声が上がったと言います。よほど取っつきやすかったのか、生徒たちも独自の感性でクリエイティビティを発揮。マインクラフト風の絵を描く生徒もおり、沼崎教諭も感心したそう。

わずかこれだけの指示で四角形が描ける

円形や色を足しても、コードはかなり短い

沼崎教諭がサンプルで作ったイラスト例

Monacaのアプリ開発環境とも親和性が高い

発展形として、draw関数の中に変数を入れれば、動的な絵を描くこともできます。これを利用して挑んだのが、図形で簡単なアニメーションを作ったり、ボタンやイベントの概念を理解したりしつつ、最終的には自動販売機を完成させようという課題でした。

「絵を描くという指示は、『アプリ開発』というMonaca Educationの特性とは合わないのでは？と思われる方もいらっしゃるかもしれません。しかしp5.jsには、ボタンのラベルを作ったり、位置を決めたり、押したときに何を実行させるかなどを設定できる機能があります。このあたりはアプリ開発と近いものがありますね」と語るように、Monaca Educationとの親和性も高かったようです。

アニメーションやイベント概念を組み合わせて作った自動販売機

「アプリ開発」「動的プログラミング」「短いコード」でギャップを埋めたい

結果として、学年末の振り返りで「面白かった単元」としてプログラミングを選んだ生徒は102名中61名（約59％）。改善の余地は残しつつも、おおむね良い反応だったようです。

いよいよ始まった「情報Ⅰ」をにらんでは「今後、中学校までにScratchを経験済みの生徒はさらに増えるでしょう。かといってテキスト型言語でやろうとすると、ソースコードが読めないとかタイピングが苦手といったギャップも生まれると思います。Monaca Educationのスマホアプリという枠組みや、アニメーションのような『動く』プログラミングで、かつp5.jsの短いコードも活かしながら、そのギャップを埋めていきたいです」と語る沼崎教諭。さらに発展した次回の実践報告に期待が高まります。

「情報Ⅰ」に向け、沼崎教諭がMonacaに寄せる期待

Monacaとp5.jsを利用したプログラミング学習 千葉県立沼南高等学校 沼崎拓也 教諭