子どもから大人までスラスラ読める JavaScriptふりがなKidsプログラミング ゲームを作りながら楽しく学ぼう!
自分に対する投資として、週１の読書に取り組んでいます。
今週の読書は、子供向けのJavaScript入門書の「JavaScriptふりがなKidsプログラミング」という本を読んでみました。
2020年4月から小学校でプログラミング教育が必修化されます。
小学生にプログラミングを教えるにはどうすれば良いでしょうか？
小学5年生以上が読者対象になっている本書は、教育方法の参考になるかと思います。
目次
はじめに
監修者・著者・イラストレーター紹介
プログラムの読み方
チャプター（１）
JavaScript最初の一歩
01 それはネットの世界からやってくる
02 Webブラウザの中の世界
チャプター（２）
迷路アドべンチャーを作ろう～HTML編～
01 チャプター2で作るゲーム
02 迷路のマップを考えよう
03 スタート地点を作る
04 画像と箇条書きを追加する
05 CSSで見た目を整える
06 隣の地点のWebページを作る
07 Webページを追加していこう
チャプター（３）
九九の表でJavaScriptを覚えよう
01 チャプター3で作るプログラム
02 JavaScriptのプログラムを書く
03 繰り返し文と変数で計算する
04 HTMLで2×2の表を作る
05 JavaScriptで九九の表を作る
06 表の見出しセルも追加する
07 オブジェクト、メソッド、プ口パティ
チャプター（4）
チャット風クイズゲームを作ろう
01 チャプター4で作るゲーム
02 HTMLでゲーム画面を作る
03 配列にクイズデータを入れる
04 JavaScriptで吹き出しを追加する
05 ボタンにイべントを設定する
06 アタリかハズレか判定する
07 次の問題が表示されるようにする
チャプター（5）
迷路アドべンチャーを作ろう～JavaScript編～
01 チャプター5で作るプログラム
02 配列を使ってマップデータを作る
03 道の画像を表示する
04 カーソルキーで移動する
05 ゴールと行き止まりを表示する
06 鍵と門を追加する
【付録】
付録1 Visual Studio Codeをインストールする
付録2 拡張子を表示する
出版社情報
2020年3月10日から3月31日まで無料で公開されています。
インプレスの太っ腹企画は、新型コロナ対策で長期の春休みになってしまった学生さんにとって役に立ちます！
著者紹介
監修者プロフィール
LITALICOワンダー
LITALICOワンダーは、子どもの創造力を解き放つ、IT×ものづくり教室。
5歳から高校生を対象として、プ口グラミングや口ボット、3Dプリンタといったテクノ口ジーを活用したものづくりの機会を提供している。
2014年4月に東京都渋谷区に開校。
2019年10月現在、16教室合わせて約3000名の子どもたちが通っている。
著者プロフィール
リブロワークス
書籍の企画、編集、デザインを手がけるプ口ダクション。
手がける書籍はスマートフォン、Webサービス、プログラミング、WebデザインなどIT系を中心に幅広い。
最近の著書は『スラスラ読めるPHPふりがなプログラミング』（インプレス）、『小さなお店＆会社のWordPress超入門～初めてでも安心！思いどおりのホームページを作ろう！改訂2版』（技術評論社、共著）など。
イラストレータープロフィール
ア・メリカ
フリーのイラストレーター。
「ドラゴンクエストビルダーズ2 破壊神シドーとからっぽの島」のゲーム内イラストを担当。
著書に『“主線なし”イラストの描き方』（翔泳社）。
キャラクターのデフォルメイラストのお仕事・コンセプトアート・装画・広告などの分野で活動中。
書評
子供向けの絵本になっているので、視覚的に理解を促すように作られていると思いました。
説明方法は、細かいところはあまり気にしないで、とりあえず動くWebアプリを作ってみて、プログラムの動作を「体感」するようになってます。
しかし、大人の目から見ると、もう少し説明を加えた方が良いかも？と思える箇所もありました。
ちょっと気になった部分をメモ。
p.79 「=（イコール）」
同じ記号でも、数学の等号とプログラミングの代入演算子は違うことを明示すべき。
p.81 Numberオブジェクト
オブジェクトの説明がいまいち分かりづらい？
→p.112で改めて説明しているので、「p.112を参照」という注意書きもあった方が良い。
p.83 「+=」（加算代入）
加算と代入を同時に行なう意義が分かりづらいかも？
x += y は x = x + y と同じで、文字数を節約できるという意味も説明すべき。
p.85 「Webページのリロードでメモリを空にする」
メモリの説明は分かるのかな？
p.102 「querySelector」メソッド
これだけ単体で説明した方が、働きが分かりやすいかも？
複数の事例を提示して、納得を積み重ねていく説明方式が良いかも。
p.113、p.114 メソッドとプロパティ、引数、戻り値
これらも単体の事例で説明した方が分かりやすいかも。
ドット演算子（ドット表記法）「.」の説明も欠けている。
p.115 文字列のリテラル（書式）
「JSはシングルクォートを使う」という理由の説明が分かりやすかった！
（本書の良い点）
p.135 配列
Arrayオブジェクト → お化けのイラストで「胴体が棚～」という説明。
無理して擬人化しなくても、普通にタンスみたいな図で良いかも？
p.140 関数
関数の用語の説明方法がいまいちかも？
(1) インプット＝「引数」
(2) 処理＝関数本体
(3) アウトプット＝「戻り値」
という順番（流れ）も図示したイラストがあった方が良いかも？
その他
その他の説明部分は、プログラムを実際に動かしてみれば「なるほど、そういうものか！」と納得できるのではないかと思います。
題材の選定
JavaScriptでWebアプリを作る教材だと、HTMLとCSSの知識も必要になるので、HTMLやCSSの理解でコケるとその後のJavaScriptの説明もいまいち分かりづらくなる可能性がありそうですね。
限られたページ数で、HTML、CSS、JavaScriptの説明をするのは結構大変かも？と思いました。
本書を参考にして、JavaScriptの教育方法を検討してみたいと思います。
