【夏休みの自由研究に】小学５年生が出来た！Javascriptでタイピングゲーム制作

我が家の息子は現在小学５年生。とあるプログラミング教室に小学４年生の夏から通い始め、Scratch（スクラッチ）を使用したビジュアルプログラミングを１年間学んでいます。

順次処理／条件分岐／繰り返し処理／並列処理や、不等号／乱数／演算子／変数など、いわゆるプログラミング概念を学び、プログラミング能力検定レベル２に合格したところです。

ビジュアルプログラミングもあと残りわずか、関数まで学びを深めたらビジュアルプログラミングは卒業！いよいよJavascriptでプログラミングを学ぶ予定で進めています。

学習はこのように順調なのですが、息子はタイピングが大の苦手…いまだホームポジションに指を置くことができません。シフトキー、エンターキーを押すときは人差し指でタッチしています(笑)

そこで、今年の夏休みは、自由研究と題して、苦手なタイピングを自分の好きなキャラクターで楽しく実践できるゲームを、Javascriptで制作することを勧めてみたところ、「やりたい！やりたい！」と前のめりに賛同してくれたので、親子で取り組むことにしました。

このブログの読者のみなさんは、Web制作スキルを身につけている方、学習中の方が多いと思います。私と同じように、お子さんがいらっしゃる方は、自由研究にプログラミング、お勧めですよ！

自由研究でプログラミングを扱う工程を、大きく４つに分けてご紹介します。

Javascriptを勉強しよう

まずは、Scratch（スクラッチ）を使用したビジュアルプログラミングで学んだ「プログラミングの基本的な考え方」をJavascriptでも同じように学ぶことからスタートしました。

新たに書籍を購入したり、大人向けの解説や動画教材では、小学５年生には難しく感じて、すぐに嫌になってしまうのでは…と思い、Google検索で「小学生向け」や「イラストで解説」などで学習教材を探しました。

私が今回の学習教材として使用したのは、「遊んで学んでジャンケンポン」ノコノコさんのWebサイトです。

参考）遊んで学んでジャンケンポン（https://janken.asotetu.work/js/）

キャラクターのおしゃべりや豊富な画像、ふりがなをふってわかりやすい説明で、小学生でもスムーズに進めることができました。

また、Javascriptでタイピングゲームを作る教材もあり、参考にしながら（正解がある状態で）制作を進めることができるので挫折がないことも子供向けにぴったりでした。

息子は他の教材にも着目しドラクエ風のRPGも作れる！と先々の目標になったのも良かったようです。

Javascriptの基礎で学んだ内容は以下の通りです。

タイピングゲームで遊んでみよう

タイピングゲーム制作に入る前に、人気のタイピングゲームで遊んでみました。

競合調査と言ったらおこがましいですが、どんなタイピングゲームが楽しいか、癖になったり何度も遊びたくなる工夫がどこにあるかなど、タイピングゲームごとに良い点をメモしたり、もっとこうしたらいいのにな？というポイントを洗い出して、これから制作するゲームに反映できたらと考えたからです。

ただ教材を見ながらコードを書くだけでなく、こういった「Web制作の現場で日頃行われていること」にも、ほんの少し触れて欲しいなと思いましたし、教材ベースとはいえ、自分なりのこだわりや、オリジナリティを持って臨んでくれたら嬉しいですよね。

POPタイピング

表示される文字をタイピングすると、ポップコーンがはじける楽しいゲームです。

制限時間内にはじけたポップコーンの数を競います。

参考）POPタイピング （http://typingx0.net/pop/）

ココアのももたろうタイピング

桃太郎が仲間を増やしながら、物語を進めていくRPG形式のタイピングゲームです。

タイピングで敵を倒し、コースをクリアしていきます。

敵からの攻撃を防御したり、自分や仲間の体力を回復させたり、レベルアップ感じがまさにRPGです。

参考）ココアのももたろうタイピング （https://pokedebi.com/game/momotype/）

寿司打

お寿司ごとに単語が書かれていて、お寿司が流れていく前に単語を入力していくゲームです。

お寿司屋さんのコースを選んでそのコースの料金設定があるのが面白いです。

参考）寿司打 （https://sushida.net/）

３種のタイピングゲームで実際に遊んでみて、ただお題の文字をタイプしてクリアするだけでなく、子供たちが普段遊んでいるゲームのように、音や絵と一緒になることで楽しさがアップするなと感じました。

クリアしたい、ポイントをためたい、〇〇と交換したい、などの「もっと遊びたい」という行動に繋がる要素も必要ですね。

また、タイピングで出てくるお題がもっと身近なものだったら、小学生が喜びそうだな！人気が出そうだな！とも思いました。

著作権などあるので難しいですが、ポケモンやディズニーなどのキャラクター名と、画像、音声などを組み合わせてお題が出てきたら、きっと楽しいだろうなと思います。

タイピングゲームを作ろう

タイピングゲーム制作のお手本には、引き続き「遊んで学んでジャンケンポン」ノコノコさんのWebサイトから「応用ゲーム作り　タイピングゲームを作ろう」という教材を使用しました。

参考）遊んで学んでジャンケンポン（https://janken.asotetu.work/js_tip/）

お手本がとてもわかりやすく、解説も丁寧なので、ハンズオン形式でゲーム制作ができます。

まずはお手本通りに作成し、出来上がったところで、下記カスタマイズを行いました。

作品紹介

今回息子が作成したタイピングゲームを紹介します。

遊んで学んでジャンケンポンで紹介されているタイピングゲームの完成形と、カスタマイズを入れた本作品の違いも、ぜひ実際に遊んで楽しんでいただけたらと思います。

小学５年生が楽しく学べる「Undertale」タイピングゲーム ｜OKOME Channel

スタートボタンをクリックすると、６０秒のカウントダウンタイマーが作動します。

お題に出されるのは人気ゲーム「Undertale アンダーテール」のキャラクターたち。

全部で１２種類のキャラクターが登場します。

デザイン

ゲーム全体のデザインはCSSの知識が必要なため、すべて私がHTMLに反映しました。今回はキャラクターたちがカラフルなので、シンプルに白・黒をベースに、差し色にゴールド・黄色・緑を使用しましたが、いずれ子供がHTML/CSSも学んだときに、ぜひ自分の好みにリニューアルして欲しいなと思っています。

開発環境

開発環境には Visual Studio Code を使用しました。お手本のとおりにWindowsのメモ帳でもよかったのですが、早い段階でソースコードをきれいに保つことや、エラーがあった場合にエディタがエラーを知らせてくれること、インデントやコメントの使い方などのお作法にも触れてほしかったからです。

参考）Visual Studio Code （https://code.visualstudio.com/）

サーバデプロイ

レンタルサーバには無料のレンタルサーバを選択しました。学校のタブレットにコードとファイルをそのまま置いて、ローカル環境で作品公開するのも考えましたが、自分の作った作品をお友達や先生に遊んでもらい、評価を得る機会を増やしてあげたいと考えました。

ローカル環境で制作し、サーバに公開されることでURLが与えられることも学びでしたし、QRコードをツールで作成して資料に貼り付けることで、お友達のタブレットカメラで気軽にアクセスできる！というゲームの提供方法（広告や周知の方法）も学びになったと思います。

参考）無料で使える！Star Server Free の魅力と使い方（登録編）

「https://blog.frankul.net/2022/03/30/star-server-free-use/」

参考）Star Server Free 公式サイト（https://www.star.ne.jp/free/）

その他作品作りで参考にしたサイト

参考：UNDERTALE 「https://undertale.jp/」

参考：効果音ラボ「https://soundeffect-lab.info/」

参考：フリー効果音 On-Jin～音人～「https://on-jin.com/」

参考：イラストAC「https://www.ac-illust.com/」

ゲーム制作の資料を作ろう

夏休みの自由研究ですので、９月に学校に行ったら、研究発表などもあると思います。

ただゲームを作成し、URLを公開して、「できたー！みんな遊んでー！」だけでなく、ゲームの仕組みの説明、難しかったところ・工夫したところの説明、今後のバージョンアップ予定なども発表できたらいいですよね。

我が家では、スケッチブックに下記ポイントでまとめて資料に仕上げました。

図や写真などを利用する

プログラミングのスクリーンショットや、動作している画面のスクリーンショットを貼り付けて、図解を使いながら説明するとわかりやすくなります。

いつも遊んでいるゲームの取り扱い説明書や、攻略本、紹介動画などは、とてもわかりやすいですよね。

作ったゲームの遊び方や仕組みを説明する

子供たちはあまりルール説明を見なくても、なんとなく感覚でゲームをする傾向がありますが、プログラムを作る側になった以上、どこを押したら動作がはじまるのか、どこを押すとどのように動くのか、ゲームのルール説明が出来なければならないですね。

これも制作者にとって重要なスキルです！

プログラムの仕組みは、同じ小学５年生がわかりやすいに説明できたらいいですね。

ITリテラシーはそれぞれ違うので、どのようなプログラムで作品が動いているかを説明するのが一番難しいかもしれません。

プログラムの仕組みを図で表すには、「フローチャート図」を使用すると、わかりやすくまとめることができますが、形式にとらわれず、四角の枠や矢印、色などを使ってもよいと思います。

難しかったところや工夫したところをまとめる

プログラムを作るうえで、自分１人では分からなかったこと、難しかったこと、時間が掛かってしまったところ、などをまとめます。

特に、エラーが出て困ったこと、解決に向けて行った対応・対策などは一番の語りどころです！

お手本通りに制作したあとに、カスタマイズを行ったところや、ユーザの使いやすさ、わかりやすさにこだわったポイントなども入れると良いですね。

もう少し時間があったらやってみたかったこと

アプリやサービス開発でも、必要最小限のニーズに答えたリリースを行い、動向を見て次期開発で機能追加を行うことがありますが、子供たちの自由研究も同様に考えてみると良いと思います。

例えば我が家のケースですと、見た目の部分（CSSデザイン調整）は私が代行しました。事前に学習ができていれば、息子が自分のオリジナルデザインで制作できたかもしれません。

また、バックエンドの技術があれば、タイピングゲームを遊んでくれる人に会員登録してもらい、ログインした会員は前回のタイピングランキングが履歴で確認できたり、ランキングトップテンを自動表示したりも出来ますね。

今回は作ることができなかったけれども、本当は作りたかった機能や、難しくてできなかったことなどを、次のプログラミング学習に繋げるためにも書き出しておくと良いでしょう！

まとめ

いかがでしたでしょうか？

フリーランスのための羅針盤ブログのネタとしては、ちょっと方向性にズレがあるかしらと思いつつ…今回は、子供たちの夏休みに寄り添い、ちょっとお仕事はセーブ中のママエンジニア目線で、子供たちの自由研究にもプログラミングはお勧めだよ！というご紹介でした。

最初の勉強工程は、毎日時間を決めて、息子が１人で進めました。エラーが出てどうしても解決できないときは母がヘルプ、そんな親子二人三脚で進める感じも楽しかったです。

ゲーム制作工程では、ゲームに必要なキャラクター画像の準備、効果音の準備等を行いましたが、ゲームのフリー素材を作っている制作者さんのポリシーを確認したり、公式のマニュアルを読んで著作権に抵触しないか確認したりしながら、「制作物の権利」について考える時間を持てました。

最後の資料制作は、自由研究の集大成。実のところ、これが一番大変でした…

WordやGoogleドキュメントで制作すれば、もっとスムーズにできたと思いますが、あえて今回はスケッチブックに手書きでまとめました。デジタル×アナログの融合ですね。

何度も書いては消し、スクショ画像をプリントしたり、切り貼りしながらの作業は、時間がかかりますし、ボリューム（ページ数）も多く、とても大変だったと思いますが、小学生ならではの直筆で味があり思い入れのある自由研究に仕上がったのではないかと感じています。

自由研究というと、工作や読書感想文をイメージする方が多いと思いますが、プログラミングも学習の進め方やポイントを押さえれば、自由研究にもピッタリ！

夏休み明け、クラスのお友達にタイピングゲームで遊んでもらえるのが楽しみでなりません。