10歳の息子が『SCRATCH』で学んだプログラムの基礎とエンジニアとしても大切なこと。

こんにちは。

今回が2回目の投稿になります。お手柔らかにお願いします。

10歳の息子が『[SCRATCH](https://scratch.mit.edu/)』と言うプログラム学習サイトにハマり、1ヵ月ほどで10数本のゲームを作成して公開するまでになったので、『[SCRATCH](https://scratch.mit.edu/)』の簡単な紹介とプログラムを学んでいく過程を見てきて感じた驚きや気付きを綴っていきます。

#自己紹介
3児とネコ2匹の父ちゃんやってます。

Sier、フリーランスを経て今の自社サービス系の会社にンジニアとして中途入社して、開発責任者、事業責任者を経て、今は新規事業の立ち上げに日々苦悩しております。
30人規模の小さなIT企業なので、プロダクトマネージャーやエンジニアとして事業企画から実装・運用まで良くも悪くも幅広くやらせてもらってます。

#はじめに
###なぜプログラミングを始めたのか？
僕の息子は、勉強嫌いで運動も嫌いです。
とにかくゲーム好きで、TVゲームやスマホゲーム、人生ゲームなどボードゲーム、さらにアミューズメントパークのメダルゲームとなども好きです。

そんな息子がプログラムを始めるようになったのは、たまたま個人開発で子供教育に役立つサービスでも作ろうかなと息子に相談していたところ、「**自分もプログラムしてみたい！**」と言ってきたので、とりあえず『[SCRATCH](https://scratch.mit.edu/)』に触れさせてみたことが始まりでした。

臨時休校で時間を持て余していることもあり、今では自作のゲーム開発にどっぷりとハマっています。

###そもそもプログラムとは？
簡単に言うと『**コンピュータに何らかの処理をさせる命令を記述したモノ**』です。
コンピュータ向けの指示書です。

指示書の送り先は人間ではなくコンピュータですので、人間では指示通りに実行しなかったり、逆に人間とは異なり空気を読んでよしなに実行しますが、コンピュータは良くも悪くも指示通り正確に実行します。

身近なところではスマホアプリやゲーム、電化製品などもプログラムで動いています。

###小学生のプログラミング教育とは？
2020年から小学校でプログラミングは必修科目になります。

以下は文部科学省のサイトで記載されている内容の抜粋になりますが、プログラミング教育には社会で必要となる資質･能力を育んでいける側面があるとされています。

> 読解力、論理的思考力、創造性、問題解決能力などは、時代を超えて常にその重要性が指摘されてきており、これからの時代においてもその重要性が変わることはない。これらに加えて、情報や情報技術を問題の発見･解決に活用していく力（情報活用能力）の重要性も高まっている。

> 学校内外での実施が進められているプログラミング教育には、論理的思考力や創造性、問題解決能力といった資質･能力を育むという側面と、コンピューターを動かすために必要なコーディング（プログラミング言語を用いた記述方法）を学ぶという両側面がある。

参考文献）
文部科学省『[小学校段階におけるプログラミング教育の在り方について](https://www.mext.go.jp/b_menu/shingi/chousa/shotou/122/attach/1372525.htm)』

僕の息子が通う小学校ではパソコンクラブにあり、息子は入りたいと話しています。

#『SCRATCH』のプログラミングで何を学べたのか？
##そもそも『SCRATCH』とは？
簡単に『[SCRATCH](https://scratch.mit.edu/)』について紹介します。

『[SCRATCH](https://scratch.mit.edu/)』は、「ビジュアルプログラミング」と言われる視覚的にプログラムが学べるプログラム学習サイトです。

視覚的に学べるというのも、C#やPython、JavaScriptなどのようにコードを記述するのではなく、背景とスプライト（操作するオブジェクト）に画像と音を設定したり、コードブロックをパズルのように組み合わせてプログラミングしていきます。

![Scratch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/1ef41d5b-9d93-6d44-2846-1b30f51c622e.png)

背景とスプライトを処理するコードブロックは、7つの命令と変数、複数の命令をまとめてられるメソッドが定義されています。

####命令
- 動き
- 見た目
- 音
- イベント
- 制御
- 調べる
- 演算

####変数
- 変数
    - 変数
    - リスト

####メソッド、関数
- ブロック定義
キャッチャー（スプライト）を動かす簡単なコードを紹介します。
![コード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/95e5396a-f7f0-3436-dede-ed5de59fde8f.png)

1. :flag_black:が押されたら（イベント）
2. 位置を縦-200、横-100に移動（動き）
3. スプライトを表示する（見た目）
4. 「とうっ！」と2秒後に言う（見た目）
5. コスチューム（画像）をpitcher-b にする（見た目）
6. 2秒待つ（制御）
7. スプライトを消す（見た目）

このようにパズルのように処理を組み合わせてプログラミングしていくことができます。

##『SCRATCH』で学べたこと
###「プログラムで何がしたいのか？」が見つかる！
「えっ？」と思うかも知れませんが、プログラムは何かを実現する手段でしかないので、「**プログラムで何がしたいのか？**」を見つけることはとても大切なことです。

ここ数年で未経験からエンジニアを目指す人が多いなってきました。
僕の周りでもプログラミング学習を始めた友人・知人が数人います。

彼らは参考書などの教材でプログラミングの基礎から学んでいくのですが、ある時期になると「結局、何をしたら良いのか分からない！」と言う疑問が生まれるらしく相談されることがあります。

「**プログラムで何ができるのか？**」「**プログラムをどう活かせば良いのか？**」が分からないままプログラミングを学んでいる状態だったようです。

僕はプログラミングを始めたきっかけが仕事でしたので、「設計書通りに実装する！」とか「顧客の要望通りに実装する！」など何をすべきかが決められていたので、そのような疑問を持つことはなかったのですが、仕事ではないところでプログラミングの学習を始めた人は、そのような疑問を持つことがあるようです。

小学生の時に四則演算を習っても、四則演算を使って何かをやろうと発想する子は少なかったと思いますが、それと同じです。

そんな相談に僕は「**プログラムで何がしたいのか？（何をつくってみたいか？）**」を小さいことで良いから設定した方が良いと答えています。

『[SCRATCH](https://scratch.mit.edu/)』が良いのは、他の人の作品が公開されているので「**プログラムで何をつくってみたいか？**」が見つけやすいことです。

![見る.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/4fa59bbe-60fb-4f38-843d-f474dfa6f545.png)

他の人の作品を見たり、プレイすることで「**プログラムで何ができるのか？**」を理解でき「**こんなゲームをつくってみたい！**」と想像することができます。
教育的な観点からも、他の人の作品から『**創造性**』を育む上で必要な『**想像性**』を育むことができます。

###プログラムにハマる瞬間を感じられる！

『[SCRATCH](https://scratch.mit.edu/)』では、他の人の作品でも中身のコードを見ることができます。

![ゲーム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/23674e0a-8794-5e23-1347-6de7da8734fa.png)
![コードを見る.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/9d609aee-000d-f66e-3108-9f7d61e32054.png)

さらにリミックスと言う機能で、他の人の作品を流用して改造版を作ることもできます。

他人の作品をリミックスして、少し変えただけでも「**自分がつくった！**」と感じることができます。それが所謂『成功体験』になります。
成長を加速させる上で『成功体験』の重要性はご存知の通りです。

プログラミングにハマる瞬間は人それぞれ異なりますが、
息子にとって、この「**自分がつくった！**」と感じることが、プログラムにハマる大きなきっかけになりました。
![月島１.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/ba6e67c5-1fac-97b8-ea50-bb252a369ee6.jpeg)

「**自分がつくった！**」と言う『**成功体験**』を経験することで、「**次はどんなゲームをつくろうか？**」と考えるようになり、継続して自分の作品をつくっていくことで『**創造性**』を育んでいけます。

さらに他の人の作品とコードが見れることで、「**これはどうなってるのだろう？**」「**こうしたいけど、どうやれば良いのだろう？**」を参考になる作品を探して読み取っていくようになります。

他の人の作品を参考にすることは、『**解読力**』や『**問題解決能力**』にも繋がると思います。

###プログラムの基礎が身に付いた！
プログラミング学習サイトですので、プログラミングの基礎は学べます。
####Main関数
Main関数はプログラムを実行して最初に呼ばれる処理です。
所謂プログラムのエントリーポイントです。

『[SCRATCH](https://scratch.mit.edu/)』では:flag_black:を押すとプログラムが実行されます。
命令ブロックに:flag_black:が押されたイベントが用意されており、この【イベント】を使うことでプログラムにスタート位置が存在することが理解できるようになります。
![main.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/2361b80e-ce7d-4bc4-2b13-5ec66a692cd1.png)

####変数
変数とは、値を保持（出し入れ）できる入れ物です。
『[SCRATCH](https://scratch.mit.edu/)』では、プライベートやパブリックの区別はありませんが、プロジェクトで使用する変数を定義できます。
上記の「[戦車バトルシューティング](https://scratch.mit.edu/projects/373285870/)」と言うゲームでは、左下の【HP】と右上の【敵】で変数を使用しています。

変数を使えるようになることで、プログラムにおける値を保持の考え方を学ぶことができます。

####制御文
プログラムの主に使用される制御文は、ほぼ命令ブロックで用意されているので【制御】の命令ブロックを使うことで、If文などの制御文の役割が学べています。

If文（もし〇〇だったら処理する）
![IF文.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/b8e80117-b40a-c11e-c3ed-937da67d6719.png)

For文、While文（〇〇の条件が成り立つ場合は繰り返す）
![FOR文.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/7c7504c3-7aae-4b77-ef42-d89f5846abd6.png)

無限ループ（ずっと繰り返す）
![無限LOOP文.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/3a7a42d8-232f-67b3-82e6-88cb4c2c6a5d.png)

Sleep処理（〇〇まで待つ）
![SLEEP文.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/b24ec176-0ae5-25d7-ec60-5bbc5460805e.png)

####イベント
イベントとは、何らかの操作をされたり、何らかの事象が発生した時にONになるスイッチのようなモノです。
『[SCRATCH](https://scratch.mit.edu/)』では、onClickイベントなども定義されています。
![イベント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/795c60b8-6162-b3ff-8d2b-b5f8e381d9bc.png)

またイベントを発生（着火）させたり、発生させたイベントを受けとることができます。
![デリゲート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/760189ca-001a-bdc5-70f9-b0637e315dbd.png)

####関数
関数とは、複数の処理を１つにまてめたモノです。
『[SCRATCH](https://scratch.mit.edu/)』では、【ブロック定義】で複数の処理を１つにまてめることができますが、今時点ではまだ使いこなせてはいないようです。

####アニメーション
スプライトを動かしたり、画像を切り替えたりできます。
『[SCRATCH](https://scratch.mit.edu/)』では、前述の【動き】や【見た目】の命令ブロックで処理します。

息子は、この背景やスプライトを動かすところからプログラミングしていました。
「**絵が動く！**」「**背景が変わる！**」のは視覚的に分かりやすいので、プログラミングしている実感は得やすいですよね。

「ビジュアルプログラミング」は、普通にプログラムに比べてアニメーションを実装する難易度が低いように感じます。

####非同期処理
非同期処理とは、複数の命令を並列して実行する処理を言います。
『[SCRATCH](https://scratch.mit.edu/)』では、背景やスプライトのコードに同じ【イベント】の命令ブロックを複数配置することができます。
例えば、背景とスプライトに以下の【イベント】を配置することで、背景では音を流して、スプライトで別の処理を並列して処理させることができます。
![main.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/2361b80e-ce7d-4bc4-2b13-5ec66a692cd1.png)

ただ息子本人は、シリアル（直列）かパラレル（並列）かどうかは意識してはいないですね…

###さらにプログラムのこんな知識が付いた！
####再利用と部品化
『[SCRATCH](https://scratch.mit.edu/)』では、前述したように公開されている作品のコードを見れたりリミックスすることができますが、それだけではなく作品にスプライトや背景を書き出して自分の作品に取り込むことができます。
画像や音声も吐き出すことが可能です。

さらにバックパックと言う機能で書き出さずに保存することも可能で、バックパック機能では背景やスプライト以外にもコードを部分的に保存することもできます。

バックパック機能を使うことで、プロジェクトを越えた範囲でスプライトやコードを部品化して再利用することができます。

息子は同じようなゲームを何個かつくっていますが、同じような動きをするスプライトを使い回していたりいます。
ただ、まだ関数やコードを部品化して使い回すまでには至っていませんね。

#息子を見て驚かされたこと？
###継続的してアウトプットできている！
『[SCRATCH](https://scratch.mit.edu/)』を初めて1ヵ月ほどで30本ほどゲームを作成して、既に10数本のゲームを公開しています。
ゲームのレベル感はマチマチですが、大人でも楽しめるゲームは数本あります。

他の人が公開したゲームもインプットになってますが、自分で作成したゲームをインプットに、さらに次のゲームを創造してアウトプットすることを繰り返しています。
また自分の公開したゲームのプレイ数が増えたり、数は少ないもののコメント、イイネをもらえることもモチベーションに繋がっているようです。

僕自身がまったくアウトプットできていないので「グサッ！」と突き刺さります…

###少ない選択肢が故にスピード感がある！
知識が増えると、それに伴い選択肢が多くなり、選択肢が多い故に「あーでもない、こーでもない」「あっちが良い、こっちが良い」と考える時間だけが長くなってしまうことがあると思います。

選択肢が多いこと自体は悪くないですが、息子は選択肢を持っていないので、少ない選択肢の中で考え、すぐに試すことを繰り返して何とか実現しようとします。

スピード感を持ってトライ＆エラーに取り組む姿勢には本当に驚かされます。

#息子にもう少し意識して欲しいこと？
###あきらめたら、そこで試合終了ですよ・・・？
![あきらめたら、そこで試合終了ですよ・・・？.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/1924f685-46d8-d411-b7a3-49c571e528b9.jpeg)
つくりたいゲームの難易度が高くなれば高くなるほど壁にブチ当たることが多くなり、そこで諦めてしまうことがあります。

息子のつくったゲームのバグを指摘して直してもらうのですが、ロジックに問題があったり修正が困難な場合だと、そのバグを放置したままにすることがあります。

前述の選択肢の話とは矛盾してしまいますが、ゲームの内容を少し変更したり、他の手段を探してみたりと代替案を考えられるようになると良いなと感じています。

###プレイする人は誰ですか？
『[SCRATCH](https://scratch.mit.edu/)』では「使い方」と「メモ」を設定できるのですが、未設定のままゲームを公開している場合があります。

前述のバグ放置も同じですが、まだプレイする人のことを考えられていないです。

「もっとコメントやイイネが欲しい！」➡「もっとプレイを楽しんくれる人を増やす！」➡「プレイしてもらう為には何をしたら良いか？」をゲームの説明だけでなく、タイトルの付け方やゲームの難易度などなど考えられるよう話したりもしますが、まだ今の段階では強く求めてはいません。

とは言え、もう少しプレイヤーとしての立場を意識して考えられるようになれると良いなと思っています。

#おわりに

##息子がつくった作品の紹介
「結局、どんなモノが作れたの？」って話ですが、
せっかくなので10歳の息子が『[SCRATCH](https://scratch.mit.edu/)』で作成したゲームの軌跡を紹介していきます。

![逃走中第一話.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/a6b561d9-8db0-b047-7baf-4275a78c8eb6.png)
【タイトル】[逃走中第一話](https://scratch.mit.edu/projects/370410878/)（[https://scratch.mit.edu/projects/370410878/](https://scratch.mit.edu/projects/370410878/)）

処女作です。
プログラムを学びはじめた時に誰しもが通る「とりあえずやってみた」感が強く表現されている作品となっています。

![ハイパー鬼ごっこ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/5a25d50a-56b7-6a5f-23a9-2528dc5be12a.png)
【タイトル】[ハイパー鬼ごっこ](https://scratch.mit.edu/projects/370510088/)（[https://scratch.mit.edu/projects/370510088/](https://scratch.mit.edu/projects/370510088/)）

緑の丸（スプライト）を操作して、別の丸（スプライト）から逃げるだけのゲームです。

![アンダーテールAU不信サンズ戦.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322517/a1aad738-1674-e7b6-af56-200876d14a4a.png)
【タイトル】[アンダーテールシューティング！](https://scratch.mit.edu/projects/375131577/)（[https://scratch.mit.edu/projects/375131577/](https://scratch.mit.edu/projects/375131577/)）

自分が大好きなゲーム「アンダーテール」をインスパイアして作ったゲームです。
インベーダーゲームのように敵の攻撃を避けながら敵を攻撃します。

最初の作品と比較して成長しているのが分かります。

上記の３つ以外にも「PKゲーム」や「ジャンケンゲーム」などを含め、1ヵ月ほどで10個以上のゲームを作成しています。

興味がありましたら、[こちら](https://scratch.mit.edu/users/sunseight/projects/)からプレイしてみてください。イイネしてもらえると息子も喜びます。

##親として良かったこと
勉強嫌い、運動嫌いでゲームにしか興味のなかった息子が、ゲームから離れたはいないもののプログラム（ゲーム開発）に興味を持って、毎日プログラミングするほど没頭していることは嬉しいことです。

またこのまま息子がプログラムを続けていくかは本人が決めることですが、息子と一緒に何らかのゲームやサービスを開発したいと言う1つの目標ができました。

#お礼
長々ととりとめもなく書いてしまいましたが、最後まで読んでいただきありがとうございました。
また別のテーマでも投稿していきたいと思いますので、次回も読んでいただければ嬉しいです。