プログラマが小学生にScratch教えた話

僕は普段は主にPHPerをしたりしてます。

うちの奥さんの同僚の息子さん（小6）がプログラミングに興味があるということで、 [CoderDojo](https://coderdojo.jp/) のイベントに連れて行って、Scratchと出会ったのが7月の話。

それから4ヶ月、結構頻繁に自分でやっているという話を聞いたり、修学旅行のお土産にカステラ買ってきてくれたりしたので、 [ヘイシャでやってるデブキャン](https://qiita.com/michida/items/bf2c150e94e231795685) にお呼びして、一緒になんかやろうかな、となったのが事の発端です。

# Scratchとは

詳しい説明は[Wikipedia](https://ja.wikipedia.org/wiki/Scratch_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E)) に託します。

大きいお友達向けにざっくりいうと、GUIベースでブロックを組み合わせてプログラミングしていく言語・環境です。

![640px-Scratch_screenshoot_ja.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474385/b9aacde5-1e69-d278-b49c-6d5bc8683e88.jpeg)

若年層向けながらも、各種トリガーやイベント、ループに演算までカバーしていて、結構本格的なものを作ることができます。
CoderDojoではスマブラ的なものを作っている人もいました。中学生だったかな。

さらに、英語圏以外の人にとってハードルの高い「英語」ではなく、日本語で進められるプログラミング言語となってます。

小学生の頃にコンピューター部でやっていた [LOGO](https://www.wikiwand.com/ja/LOGO) を思い出すなぁ。。。
って思ってたんだけど、Scratchには、モーションセンサーやら音声合成やらが拡張機能として組み込み可能で、かなーり色々できちゃう。

# はじめの一歩

登録は無料ですので、登録します。
~~未成年は保護者の同意が必要だったはず。~~
---追記---
Twitterでこの辺り、補足をいただきました！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">また、Scracthにサインアップするということは、コミュニティーに参加するということなので、本人と保護者の両方がガイドラインをよく読んで、これを守る義務があります。 <a href="https://t.co/3FLtzbnVhN">https://t.co/3FLtzbnVhN</a> もし、この内容が理解できない、もしくは守れないようなら、利用規約により参加できません。</p>&mdash; アベ先生 (CV: 阿部和広) (@abee2) <a href="https://twitter.com/abee2/status/1330802138964869122?ref_src=twsrc%5Etfw">November 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

7月に参加したCoderDojoの際に保護者の方に色々対応していただいたので、その辺り詳しく理解していなかったので、助かりました！
ありがとうございますm(_ _)m

---追記ここまで--|

登録しなくても使えますが、オンライン上に保存ができず、公開もできません。

とりあえず開くと、「なにしたらいいか分からん」ってなると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474385/54779ddf-11a6-f8f2-be61-b0faa39d6a86.png)

**どことなくムカつく顔のネコ** がぽつん。
まずはこの子に色々してもらうのがはじめの一歩。

スクラッチの画面は、大きく3つに分かれています。
`ブロックパレット` : コードブロックが置いてある左端のエリア
`スクリプトエリア` : コードブロックを組み合わせていく中央のエリア
`ステージ` : 実際のコードが動いた結果が表示される右端のエリア

Scratchでは、 `スプライト` と呼ばれるオブジェクトにロジック（スクリプト）を加えていくことで、プログラムを作り上げます。
そういう意味では、「オブジェクト指向プログラミング」の教材としてもいいかも。。。

スプライトは以下の要素で構成されています。
- 見た目（コスチューム）
- 位置、角度
- スクリプト

このスプライトに以下のスクリプトを追加してあげます。

- 旗が押されたら
- ずっと
- 0.01秒待つ
- 次のコスチュームにする

そうすると、スプライト1（ネコ）が走り始めます。
これは、ネコのスプライトに予めコスチュームが2つ用意されていて、コスチュームが0.01秒毎に入れ替わるためです。

![Nov-23-2020 11-29-28.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474385/86d0189d-1154-6595-2156-a5ed7e458458.gif)

さらに「15度回す」という動きを追加してあげます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474385/bb7af58a-11ad-e5a4-36e7-6a6b4a3fb0e6.png)

そうするとネコが回り始めます。

![Nov-23-2020 11-36-15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474385/cba06908-ced8-a0e7-2f5c-5fe207320c2c.gif)

さらにさらに「0.01秒でどこかの場所へ行く」というコードを追加してあげます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474385/4b791bfe-b643-ba56-9bcb-be48e4192625.png)

すると、ネコが回転しながらハチャメチャに動き始めます。

![Nov-23-2020 11-40-18.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474385/a41a5a51-b25c-5089-fef2-d48d520bb5eb.gif)

**小学生男子、これで爆笑です。**
ここから数字を変えたり、コードを追加したりして、「なにをどうすると、どんな影響がでるのか」を触っていってもらったりします。

# カンタンなゲームを作ってみる

Scratchには豊富なチュートリアルが用意されているので、それをやっていくのも面白いです。
チュートリアルで初めて知る機能もありますし。

とはいえ、一応コードを書くことを生業としている人間として、ちょっとカンタンなゲームを作ってみようと思います。
実際に、今回一緒にやった小学生の彼にも作ってもらいました。

背景の変え方、スプライトの追加の仕方などは、直感的にわかると思うので割愛。

## 仕様

- フラッグを押すとボールが飛んでくる
- スペースを押すとネコがジャンプする
- ネコがボールにぶつかると「痛い」という
- ネコがボールを飛び越えて、ボールが画面の左端まで行くと「やったー」という

## コード

以下みたいな感じになりました。
`初期設定` ブロック（関数）は別に使わなくても良いのですが、せっかくなので使ってみた感じです。（小学生と一緒に作ったときは使いませんでした。）

### ボール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474385/757e520c-bae3-79ce-8381-4653de74fdf6.png)


### スプライト1（ネコ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474385/6e461c20-4bbe-c5ee-5f4f-9d9d5622830a.png)

## プレイ画面
![Nov-23-2020 14-24-33.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474385/f8107eb5-d6ed-3b65-0bbe-45768dc285db.gif)

## 感想

「コードブロックで何ができるか」を把握しておくと、自分で作る分にはカンタンです。

ただ、これを小学生と作るとなると、ちょっと大変。
「ジャンプしている（ように見せる）」というだけでも、ステップバイステップで教えなければいけません。

例えば、「Y軸を-30にしてから、また-112にする」という部分がわかっても、「待つ」というステップが抜けているので、一瞬で動いてしまい、結果的に動いていないように見えてしまいます。

そういった、つまづきそうな点は予想できるので、
- やってみてもらう
- ヒントを出す
- 答えを教える
というサイクルで頑張ってもらいました。

「変数」の存在も伝えなければいけないのですが、流石に難しいので、そこはとりあえずやって見せて、存在を知ってもらう、くらいに今回は留めておきました。

# 最後に

小中学生にとっては、はじめの一歩を踏み出すのが特に大変だと思います。

実際、今回教えた彼も、7月の時点では「動かす」という部分だけしか伝えられず、「インタラクトする」部分を理解できていなかったため、一人で触るときも動かす部分に終止してしまっていたみたいでした。

今回は「プログラミング」として、「キーで操作する」「スプライト同士がぶつかる」という部分を伝えられたかなと思います。
ですので、そこをサポートしてあげられる大人や友達がいると、ここからさらに「クリエイティブになる」というステップに進んでいけるのかなと思います。

子供に教えると、「すげぇ！」とか「へぇー！」とか素直な感想が返ってきて楽しいですｗ

今回教えた彼は、お母さんの話から、環境や自分の特性により、「生きにくさ」を感じているようでした。
そんな子が「プログラミング」と出会うことで、自分ができることを見つけていってくれるといいなぁと、業界の端っこにいる人間として思ったりしました。