自分のスマホで動作するアプリ開発の授業／同志社中学校・高等学校　鈴木潤先生

弊社の「Monaca Edcucation」を用いて、プログラミング学習を実践してきた鈴木潤先生（同志社中学校・高等学校）。生徒が自分のスマホで動かすことができるアプリ開発がその中心です。高3選択科目群の一つ「情報特論」の中で実践してきました。その挑戦の軌跡は過去の記事でも紹介されていますので、ぜひご覧ください。当レポートでは最新情報と現状の課題を中心に、鈴木先生からのアドバイスをお届けします。

セオリー通りに教えるのではなく、初心者が興味を抱けるものから

「情報特論」のカリキュラムは、1学期にプログラミングの基礎的なことはすべてやり、2学期にアプリの実制作という流れ。3学期は別のアクティビティが組まれているため、実質、2学期までがプログラミング実習の中心です。

生徒たちはほとんどがプログラミング未経験。また、必ずしも意欲的な理由で情報特論の受講を決めた生徒ばかりではありません。そんな状況でのスタートだからこそ意識しているのが、最初に「見えるもの、動くものを扱うこと」だと鈴木先生。「プログラミングを知っている人間は、つい『変数をやって、演算子をやって……』というセオリーどおりの順序を組みがちですが、生徒たちはそういう実体のないデータを扱うのは面白くないんですよね。簡単な画面やおみくじゲームを作るなど、興味を持ちやすく成果物が目に見えて分かるものから始めるのがいいと思います」。

また、生徒には「今日の目的は何か」「具体的に何を入力しないといけないのか」を示した解説プリントを配布。授業後はMicrosoft Formsを使って「今日できたこと、できなかったこと」を必ず入力させ、次回の授業でフィードバックを行ってから次のステップへ進むこともマストにしていたと言います。

「自分で作った」と実感できる成果物を

1学期の集大成は、時計を作るプログラミング。ソースコード自体はMonacaで提供されているひな型を使いますが、数字は生徒が自分で手書きしたものを画像化して使うのが鈴木先生のアレンジポイント。「ただプログラミングしたものが動くだけでなく、自分が作ったものが反映されるのはやはり嬉しいのでしょう。生徒たちの食いつきがいいですね」。

評価はペーパーテストで行います。ソースから実行結果を書く、あるいはその逆といった出題内容です。生徒からは「（試験対策として）暗記しておいたほうがいいですか？」と聞かれることもありますが、ただ覚えるのではなく、そのソースコードが持つ意味を理解することが本質です。そのため、普段からそれを意識して授業に臨むように指導してきました。

「できる」「できない」の見極めと、諦めが肝心

2学期からはいよいよアプリ制作です。まずは構想を練って、プロトタイプを作ってみるところから始まりますが、「最も指導が難しいのがここ」だと鈴木先生。プロトタイプのイメージすら持てない生徒もいるため、丁寧な指導が必要だからです。

もう一つ、時間的・技術的にある程度「できること」「できないこと」が分かるようになってきたら、「できないこと」はスパッと諦めるのも大事。例えばゲームを作るとして、初級・中級・上級の難易度設定を作ることを想定していたけれど、中級は構想から外すといった対応です。

生徒たちは、何らかのデータベース系、ノベル（読み物）系、クイズ系、タイマー機能をアレンジしたゲーム系のアプリを企画することが多いそう。ただ、中にはテトリスのようなパズルや、マリオのようなアクションゲームを作ろうとする生徒もいます。技術的には可能ですが時間的に難しいため、このあたりも実体験を介して「できる」「できない」の判断をしていきました。

時間が足りない中で、工夫した制作スケジュールを

基本的な知識は1学期で教えているため、実習を進めながら、適宜質問に答えていくのが日々の授業構成です。とは言え、全員の質問対応をしていたら一人あたり1分くらいしか時間が取れません。そこで、質疑応答は授業時間外も含めてフォームでも受け付け、回答は全員に返す形でシェアしました。

また、授業は週2回ありますが、それでも授業時間内だけで完成させるのは難しいため、集中作成期間を設定しました。「期末試験終了後から終業式までの間に4日ほど時間ができるので、この期間は情報教室を終日開放しています。半ば“合宿”ですね（笑）」。

中には「もう時間もないし電卓でも作ろうかな」と言い出す生徒もいるそうですが、意外と電卓のプログラムは複雑で「できると思うならやってみたら？」と冗談交じりでけしかけることも。「簡単そうに見えても非常に手が込んでいたり、ゲームの『ガチャ』など自分が夢中になっているものが意外とシンプルな仕組みだったり、そういうことにも気付いて欲しいなと。全員がプログラマーを目指す必要はないですが『仕組みを知っている』ことはとても大事。例えば、製品の製造指示や受発注の仕事に就いても、きっと活かせるはずです」。

全角・半角やスペルのミスと、自力デバッグできる環境づくりに注意

こうして取り組んできたプログラミングですが、情報Ⅰでも基本的にはこれを踏襲しつつ、高1で学んできたHTMLやCSSも続ける計画です。その際「HTMLやCSS、（Monacaで使用する）JavaScriptには共通の注意点がある」と鈴木先生。

まずは、全角・半角の混在やスペルミスが起こりやすいこと。「例えば『<>』。そのまま半角入力してくれればいいのですが、『かっこ』と入力して変換し、全角の『＜＞』を選んでしまう生徒もいます。数字の1（いち）と小文字のｌ（エル）を間違える生徒も多いですね」。

そして、それに伴うデバッグの難しさも意識する必要があります。生徒一人ひとりのミスを見つけていくのはキリがなく、できるだけ自力で対応してほしいところです。そのために工夫しているのが「開発環境を整える」こと。「シンタックスハイライト」というテキストエディタ機能を用いて、半角入力すべきところを色付きフォントで表示するだけでも、かなり自分でエラーを見つけられるようになるそう。「アシアルさんのもなかこみフォントもおすすめです。その文字が全角・半角なのかが一目瞭然で分かるように表示されます。1（いち）、I（アイ）、ｌ（エル）、０（ゼロ）、O（オー）などの区別のしやすさでは、Windows標準フォントの一つ『Consolas』を使うのもいいと思いますよ」。

加えて、JavaScriptならではの注意点として挙がるのが「書き方」が一つではないこと。「例えば同じJavaScriptでも、言語を簡略化したライブラリの一つである『 jQuery』と、ライブラリ化されていないプレーンな状態の『Vanilla』では書き方が異なります。ある指示をネット検索するとjQueryバージョンが出てくることもありますが、その違いを知らないまま引用して書こうとするとエラーが出ます。生徒が自力でデバッグしようとしたときに、非常につまずきやすい要素です」。JavaScriptは変数の扱い方も若干独特であるため、そのあたりも含めた対応が今後の課題だと言います。

情報Ⅰに向け、欲張らずにまずはプログラミングを丁寧に教えたい

情報Ⅰでアプリ制作に取り組むには「これだけ（画像参照）知っておかないといけないと思いますが、1年で全部やるのは難しい」と鈴木先生。「共通テストも見越して、プログラミングの基本がちゃんと備わるよう、きちんとピックアップすることが大事です。私もいま、その取捨選択作業をしている段階です」。

また、プログラミングを情報デザインや問題解決にどう繋げていくかも悩ましいところだそう。生徒たちは「（プログラミングで）何が解決できるか分からない」状態が予想されるためです。しかしそのためにも、まずは欲張らずに、プログラミングを丁寧にやっていくことから始め、「情報Ⅱ」で課題解決プロジェクトなどに取り組む構想だと語ります。「プログラミング学習で何かうまくいかないことがあったとき、今はまだ私（教員）が助けないと難しい部分もあります。しかし、ゆくゆくは生徒自身、あるいは生徒同士で解決できるようにしていきたいですね」。

関連記事

情報科オンラインセミナー『新学習指導要領スタート直前！ ―情報Ⅰ指導のポイントを考える―』セミナーレポート Vol.1

情報科オンラインセミナー『新学習指導要領スタート直前！ ―情報Ⅰ指導のポイントを考える―』 セミナーレポートVol.2