子ども向け教育プログラミング言語Scratchの始め方

[Supership](https://supership.jp/)でVPoEをしている名畑です。[GEORGIA × 『うる星やつら』 オリジナルアイテム](https://www.georgia.jp/georgia_uy/)がまったく当たりません。排出率が辛すぎませんか。

## はじめに

私が働いているSupershipでは**ICT教育**支援に取り組んでおり、昨年も小学校での授業や[TEPRO(公益財団法人東京学校支援機構)](https://www.tepro.or.jp/)様主催の団体連携協議会での事例発表などをさせていただきました。

弊社オープン社内報でその際の様子は一部公開されておりますので、興味のある方はご覧いただけますと幸いです。

- [夏休み前に、インターネットとの付き合い方をあらためて考える。〜小学校での「ICT教育支援プロジェクト」を今年度も推進中！～](https://super-stories.com/n/n39262ed84e94)
- [「Scratch（スクラッチ）」を使って、イラストを動かそう！～小学校でのプログラミング特別講座を開催！～](https://super-stories.com/n/n433ffbde9f98)
- [SupershipグループのICT教育支援活動について発表しました！～TEPRO団体連携協議会に参加してきました～](https://super-stories.com/n/n62a4c8328d58)

:::note info
ICTはInformation and Communication Technologyの略です。
つまりは情報通信技術です。
:::

私はICT教育支援の過程で[Scratch](https://scratch.mit.edu/)という教育用プログラミング言語に触れるようになりました。Scratchは開発ツールの名前でもあり、サイトの名称でもあります。

すでにとても有名で普及しているScratchではありますが、より活用者が増えてICT教育の取り組みが進むことを願い、使い方など紹介していければと思い今回の記事を公開した次第です。

## Scratchとは?

Scratch財団とマサチューセッツ工科大学(MIT)メディアラボのライフロングキンダーガーデングループとの共同開発によるものであり、公式サイトには下記の通り書かれています。

> Scratchは、世界最大の子ども向けコーディングコミュニティーで、若者がデジタルな物語、ゲーム、アニメーションを作るために使っている、シンプルなビジュアルインターフェースを持ったコーディング言語です。Scratchは非営利団体Scratch財団によって設計、開発、維持されています。
> Scratchは、計算論的思考と問題解決のスキル、創造的な教育と学習、自己表現と協調、そしてコンピュータ利用における公平性を促進します。
> Scratchは完全に無料で、70以上の言語で利用可能です。

いわゆる[ビジュアルプログラミング](https://ja.wikipedia.org/wiki/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%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)の一種であるブロックタイプによる実装が可能であり、かなり直感的なUIになっています。本当によくできています。

Scratchはオフライン開発に対応した[PCやAndroidタブレット向けのアプリケーション](https://scratch.mit.edu/download)もありますが、インターネット接続さえあればWebブラウザで開発を完結させることが可能です。

本記事の内容はWebブラウザでの進行を前提としています

## 利用規約 / プライバシーポリシー / ガイドライン

当然ながら必ず遵守するようにお願いいたします。

- [Scratch Terms of Use](https://scratch.mit.edu/terms_of_use)
- [Privacy Policy](https://scratch.mit.edu/privacy_policy)
- [Scratchコミュニティーのガイドライン](https://scratch.mit.edu/community_guidelines)

## アカウント作成

Scratchはアカウントを作らなくても開発が可能です。
そのため学校の授業などで使用する際、生徒のアカウントを作らないで進めることができます。

ただ、アカウントを作ることでデータ(プロジェクト)の保存や共有などが可能になるという利点もあります。

今回はアカウント作成方法についても説明します。不要な場合は読み飛ばしてください。

PCの場合、アカウント作成の画面については言語設定をしても一部英語のままなのでご注意ください(手元で確認した限り、iOS端末では言語設定が有効でした)。

:::note warn
[Privacy Policy](https://scratch.mit.edu/privacy_policy)の**Account Information**にあるように**16歳未満の場合は親あるいは保護者のemailアドレスが求められます**。Scratchでのアカウント作成はSNSとしてのScratchでのアカウント登録でもありますのでご注意ください。管理監督が難しい場合はアカウントを作成せずに利用することをお勧めいたします。
:::

### アカウント作成ページへの移動まで

![image01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/0e555243-fb97-ce2f-1378-309db25464c9.png)

まずは[サイト(Scratch - Imagine, Program, Share)](https://scratch.mit.edu/)を開きます。

![image02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/91632aa0-4a7d-8d52-de71-cf56e142d6f8.png)

ページ最下部で言語設定ができます。
**にほんご**で平仮名表記にすることも可能ですので今回はそうしてみます。
この記事を読むような年齢の方は漢字があった方が頭に入りやすいでしょうから、ご自身が行う場合は**日本語**にした方がいいでしょう。

言語設定はコーディングを行うページ(プロジェクト編集画面)からも変更できます。これについては後述します。

![image03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/97182c8e-a5a5-8d54-125c-c6644e1509b1.png)

アカウント登録画面へ遷移します。
ページ最上部メニューバーの**Scratchにさんかしよう**をクリックします。

### 登録に必要な項目の入力

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/0d6c3d2d-1ca1-7bc5-5919-499e0cbcb3cc.png" alt="image04.png" width="50%">

ユーザー名とパスワードを入力します。

フォーム選択時には**Dont't use your real name**(本名を使わないでください)**Write it down so you remember.Don't share it with others!**(パスワードを忘れないように書き留めましょう。他の人に共有しないでください)といった注意文言が表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/150c3d9d-ce15-0df5-d149-6b7ef9a22c60.png" alt="image05.png" width="50%">

国を選択します。
日本在住なら**Japan**を選びます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/0a56be11-b84d-a727-b6e8-b9ad83ecae94.png" alt="image06.png" width="50%">

生まれた月と年を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/8e4983d5-1bdc-230b-f7fc-fd3828ccc1eb.png" alt="image07.png" width="50%">

性別を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/1373e733-5199-c08d-a8cf-dbe6593e8955.png" alt="image08.png" width="50%">

メールアドレスを入力して**Create Your Account**をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/836d5709-1a5d-0a42-95c4-e4a0876ea04f.png" alt="image09.png" width="50%">

これでアカウント作成が完了です。
**はじめよう**をクリックします。

## プロジェクトの作成と画面構成などの基本

### プロジェクトの作成

![image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/ba4c96b9-6b19-55b4-097d-af54d5340c27.png)

メニューバーの**つくる**を押すとプロジェクトファイルの生成が行われます。

### プロジェクト編集画面

![image11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/6445cdf1-2104-e9ac-871c-d36b0ab7b5e5.png)

このようなプロジェクト編集画面に遷移します。
左側が**ブロックパレット**、中央が**コードエリア(スクリプトエリア)**、右上が**ステージ**、右下が**スプライトエリア**です。

**スプライト(画面に表示されるキャラクターなど)** に対してブロックパレットの**ブロック**を適用することでプログラミングを行うという流れです。

コードは下記の**カテゴリ**があります。カテゴリ内で選択できる一つ一つを**ブロック**と呼びます。ブロックはカテゴリで色が異なるだけではなく、形状(菱形、楕円など)毎にどこで使えるかも決まっているため、使い所がわかりやすくなっています。

| カテゴリ | 内容 |
| --- | ---|
| うごき | 動かします。座標指定や回転などです。 |
| みため | 見た目を変えます。大きさの変更などです。 |
| おと | 音を鳴らします。音量操作などもあります。 |
| イベント | キー操作やクリック操作といったイベントを拾います。 |
| せいぎょ | 待ちや分岐や繰り返しなどを指定します。wait、if、for的なものです。 |
| しらべる | マウス座標の取得やマウスポインターまでの距離取得などができます。 |
| えんざん | 四則演算や「かつ」「または」といった論理演算などを行えます。乱数もここです。 |
| へんすう | 変数を作ってその変更ができます。変数を束ねたリストの作成も可能です。 |
| ブロックていぎ | コードをまとめた自分なりのブロックが作れます。メソッド的なものです。 |

ブロックに対して **コメント(注釈)** を記載することもできます。

プログラミングに慣れていればどんなブロックがあるかを覚えなくても活用できると思いますが、そうでない場合は一つずつ覚えていくことになるでしょう。

これらをすべて最初から把握するのは難しいので、チュートリアルに沿って覚えていくのが流れかと思います。

### プロジェクト編集画面での言語設定

![image11b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/5db7620f-8819-9691-526f-84ab0662e426.png)

先述しました通り、この画面でも言語設定を変更することが可能です。
メニューバーの**地球アイコン**になります。

### プロジェクト名の変更

![image11d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/cbeffbe5-5417-da52-27e3-c87b802cad9f.png)

メニューバーでプロジェクト名を変更できます。
後でわかりやすい名前にしておくと良いでしょう。

今回は**チュートリアル1**としています。

### プロジェクトの保存

![image11c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/b61691bd-8bb9-f9fc-e605-b918d3d24ac9.png)

プロジェクトは自動保存されますが、メニューバーの**ファイル**から保存することもできます。
クラウド上での保存とローカルでの保存が選択可能です。

**コピーをほぞん**はプロジェクトがそのままコピーされて新たに保存されます。

## チュートリアル さあ、はじめましょう

### チュートリアル一覧の表示

![image12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/6d2827e1-14e8-f4d9-edef-9cd5da96a7cc.png)

上部メニューバーの**チュートリアル**をクリックすると、チュートリアルの一覧が表示されます。

チュートリアルは現時点では下記が用意されていま。

- さあ、はじめましょう
- Scratchをはじめよう（アメリカしゅわ）
- なまえをうごかしてみよう
- せかいをそうぞうしよう
- おんがくをつくろう
- ものがたりをつくろう
- ついせきゲームをつくろう
- キャラクターをうごかそう
- クリッカーゲームをつくろう
- キャラクターをとばそう
- ピンポンゲーム
- アニメえいがをコーディングしよう
- アドベンチャーゲーム
- ビデオモーションセンサー
- おしゃべりするアニメをつくろう
- おしゃべり
- スプライトのついかほうほう
- はいけいのついかほうほう
- おおきさのへんこうほうほう
- なめらかにうごかすほうほう
- おとのろくおんほうほう
- もじをかいてんさせるほうほう
- かくしたりひょうじするほうほう
- スプライトにうごきをつけるほうほう
- やじるしキーをつかうほうほう
- こうかのついかほうほう

今回は**さあ、はじめましょう**を選びます。

![image13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/0a9245c1-3ef6-c4c1-7454-157aad6c1851.png)

画面下部に**さあ、はじめましょう**の説明ウィンドウが表示されます。

左右矢印で**進む**と**戻る**です。
先頭が動画で、それ以外はアニメーションgifです。
動画が全体説明、アニメーションgifが個々の説明なのですが、それぞれ内容がやや違います。

今回はアニメーションgifの方を元にして説明します。

### うごきブロックを追加

![image14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/6cda7c6f-4ed7-7513-5fd7-54868e42ee65.png)

**ブロックパレット**の**うごき**の**10ほうごかす**を**コードエリア**にドラッグ&ドロップします。

**コードエリア**の右上にぼんやり映っているのは**実装対象のスプライト**です。これによって今どのスプライトを操作しているかわかりやすくなっています。今回はスプライトが一つしかないのでありがたみが薄いですが。

![image15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/7b792c2a-a24f-f70c-7698-051f32d21232.png)

**コードエリア**の**10ほうごかす**を押すと**ステージ**のスプライトが右に少し動きます。
それに合わせて右下の**スプライトエリア**の**x**が**0**から**10**になっています。

### みためブロックを追加

![image16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/0c1d1954-e592-56b0-a911-ca1bc2bd8e13.png)

**コードエリア**の**10ほうごかす**の下(くっつけてください)に**みため**の**こんにちは!と2びょういう**をドラッグ&ドロップします。

そしてこの置いたブロックを置くとスプライトが右に少し動いて「こんにちは!」が表示され、**x**が**20**になっています。

### イベントブロックを追加

![image17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/c88446e4-dd1d-2426-9530-da3fbd9a1722.png)

今度は**イベント**の**旗がおされたとき**を同じくコードエリアの**10ほうごかす**の上に置きます。
そして上部の**旗のアイコン**を押すと、 **スプライト**が右に少し動いて「こんにちは!」が表示され、さらに**x**が**30**になっていることが確認できます。

### プロジェクトページ

![image18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/5605a5a5-05d5-8e86-75c2-26117d2aa945.png)

ページ上部メニューバーの**プロジェクトページをみる**を押してみます。

![image19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/7e569e31-032b-b143-4de6-2b9d44aa6233.png)

するとプロジェクトの設定ページに移ります。**なかをみる**を押すと編集画面に戻れます。

ここから共有などもできますが、今回はチュートリアル外なので説明は割愛します。

## 最後に

ここまでの説明だけでも、プログラミング経験がある人ならば、後は応用でかなり凝ったものも作っていけるのではないでしょうか。
あるいはプログラミング未経験の子どもでも、柔軟性があるので、これだけで自由にものすごいものを作れるかもしれませんね。

ただ、そうではない方が多いと思うので、他のチュートリアルについても今後記事にしていければと考えています。

## 宣伝

[SupershipのQiita Organization](https://qiita.com/organizations/supership-inc)を合わせてご覧いただけますと嬉しいです。他のメンバーの記事も多数あります。

Supershipではプロダクト開発やサービス開発に関わる方を絶賛募集しております。
興味がある方は[Supership株式会社 採用サイト](https://supership.jp/recruit/)よりご確認ください。