どれ使う？プログラミング教育ツール
自分で「ぷよぷよ」を作れる!?プログラミング学習教材 ～手打ちコードの世界を体験！
2020年7月15日 14:20
2020年度からついに小学校でプログラミング教育が実施されます。これに伴い家庭でも手軽にプログラミングを学習できるツールが多数登場していますが、どんなツールを使えばいいのか迷ってしまう方も多いのではないでしょうか？ そこで本連載では家庭でのプログラミング教育にピッタリなお勧めツールを紹介していきたいと思います。
プログラミングというとやっぱりゲームを作りたい！という気持ちを持っている子ども達も多いはず。パズル型ゲームで有名な「ぷよぷよ」を作ることができるプログラミング学習教材が公開されました。Webブラウザーで動くアプリ開発環境の「Monaca」を運営するアシアル株式会社と「ぷよぷよ」の株式会社セガの共同事業で実現。必死にコードを写していけばあの「ぷよぷよ」が完成するいわゆる“写経”型の学習教材です。
Monacaって？
「Monaca」はHTML5とJavaScriptでクロスプラットフォームのアプリを開発できる環境です。Webブラウザーから手軽に利用できるので、高校や大学など教育機関での採用実績も多く、教育版の「Monaca Education」が用意されています。この「ぷよぷよプログラミング」は「Monaca Education」の無料アカウントを取得すればすぐに利用できます。
セガの紹介ページと「Monaca」のサポートページがありますが、「Monaca」のサポートページの手順が具体的なので、この手順に沿ってアカウントを登録しましょう。なお、今回PCのブラウザー上で試すので、同ページの説明に出てくるスマホへのデバッガーのインストールは不要です。
2種類のPDFをダウンロードして［初級コース］に入る
アカウントが登録できたら、まずは、2種類のPDF教材をダウンロードします。サポートページ中ほどに“ガイド小冊子（PDF）”と“ソースコード一式（PDF）”へのリンクがあります（同じPDF教材が、セガの「ぷよぷよプログラミング」＞用意するものからもダウンロードできます）。
“ガイド小冊子”のPDFはすぐに参照できるように開いておきます。その後、「Monaca Education」にログインをして、同じページの［初級コースを始める］ボタンをクリックしてください。
［初級コースを始める］ボタンをクリックすると次の画面が表示されます。初級の教材プロジェクトがロードされていることを確認して、［クラウドIDEで開く］ボタンで開発画面を開きます。
開発画面でコードを追記
開発画面を開くと、アプリを構成するファイルが左サイドに一式ずらりとそろって用意されていますが、いくつかのファイルの記述が不完全な状態になっています。“ガイド小冊子”のPDFのSESSION1～SESSION5のステップに応じて、足りないコードを追記して、ゲーム「ぷよぷよ」を完成させるという学習内容です。初級と中級は欠けているコード量が異なります。
“ガイド小冊子”のPDFを見ながら、指定のファイルの指定の行にコードを書き写していきます。HTML5とJavaScriptで作るアプリですから、触るファイルはほとんどがJavaScriptです。大半のコードが既に出来上がっていますので、手打ちコード体験と割り切って取り組むといいでしょう。未経験からJavaScriptを理解するには、サンプルとして複雑すぎるので、興味を持ったら別途入門書などに取り組むのがおすすめです。
ひとつのゲームアプリがたくさんのファイルで構成されているので、最初に編集する“player.js”をファイル一覧の中から探すだけでも、ちょっと苦労するかもしれません。
手打ちならではの苦労を楽しもう
コードを手打ちする作業は、ケアレスミスの宝庫なので、慣れないとびっくりするほどよく間違います。“puyo”が“puryo”になっていたり、“;”を忘れたり、小文字が大文字になっていたり、カッコの閉じ忘れをしたり……とさまざまな間違いをすると思います。1文字違えば動かないし、自分のコードミスは見付けづらいし、ちょっとイライラっとしてしまうかもしれませんが、それも含めて良い体験になりそうです。半角での記述やスペースの使い方などコードの基本的な記述ルールは“ガイド小冊子”での解説を参考にしてください。
各SESSIONで示されたコードを追記したら、プレビュー画面でゲームの機能が変化したかどうかを確認してから、次のSESSIONに進みます。ただ見本通り書くだけでも、動いてくれるとうれしいものです。
もし、正しく動いているのか判断できないときは、“ソースコード一式”のPDFから追記部分をコピー＆ペーストして動きを確認し、自分のコードで動かした時と比べるといいでしょう。
SESSION5では、ゲームの背景など見た目を変える方法も紹介されています。こういうデザインに関する部分は、小さな修正で結果がすぐにわかるのでシンプルに楽しめます。
完成したら、全画面表示にして普通にゲームとして遊べます。
お子さんがひとりでいきなり取り組むのはハードルが高いので、テキストで書くコードに興味を持ち始めたお子さんと親子で挑戦してみると良いかもしれませんね。もしくは、お父さん、お母さんが挑戦して、“ぷよぷよ作ったよー”とお子さんに自慢するのはいかがでしょうか？