子ども向け教育プログラミング言語Scratch チュートリアル「なまえをうごかしてみよう」

[Supership](https://supership.jp/)でVPoEをしている名畑です。[波よ聞いてくれ](https://afternoon.kodansha.co.jp/c/namiyokiitekure/)が[テレビドラマ化](https://www.tv-asahi.co.jp/namiyo/)ですか。あの独特なノリを、そして、鼓田ミナレさんのトークをいかにして表現するか、気になります。

## はじめに

Scratch学習記事の第2段です。

[前回の記事](https://qiita.com/nabata/items/394fcfe2d81428d42b80)ではScratchの始め方とチュートリアル「**さあ、はじめましょう**」について説明しましたが、今回は「**なまえをうごかしてみよう**」について説明します。

**繰り返し処理**が登場するので、実現できる幅がかなり広がりますね。

## チュートリアル なまえをうごかしてみよう

![image01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/f58fecc4-71c8-0f5c-81c2-54b1f222ebee.png)

今回はチュートリアルにある「**なまえをうごかしてみよう**」の内容に従って進めます。

## はいけいを変えてみる

まず、ステージの背景を変えてみます。

![image02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/3c57dc08-c472-3828-3899-7157cd3e61e0.png)

右下にある**山の風景**のアイコンにマウスカーソルを乗せ、**虫メガネ**のアイコンをクリックすると背景一覧に遷移します。

![image03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/71b6f1d8-9f66-36dc-749d-0519d1fe02a5.png)

背景一覧が表示されますです。
今回は**Circles**を選びます。


## スプライトを自分で用意してみる

今回はスプライトを自分で用意してみましょう。

![image04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/1542f0e5-cb3e-aad3-febd-c6dfd36825e1.png)

右下の**猫**(Scratchキャット)のアイコンにマウスカーソルを乗せ、**筆**のアイコンをクリックすると自分で描く画面に移動します。

![image05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/58d89019-fc13-ae77-7943-aaf8158462ea.png)

今回は文字を配置します。
**T**をクリックします。

![image06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/d7f305c2-1d0d-a710-5ba5-a6902c8bfee0.png)

真ん中の正方形の適当な場所をクリックして好きな文字を入力しましょう。

![image07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/102afe19-60af-b1c8-9428-2aa7277f06ee.png)

書いた文字の周囲の丸を引っ張ることでサイズの変更ができます。
ここでは大きくしてみました。

![image08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/170162fb-ea5a-c939-d26d-1ab47e7cc76a.png)

元々あったスプライトは**ゴミ箱**のアイコンで削除します。
複数のスプライトがあっても問題ないのですが、ここでは**スプライトを削除することもできる**ということの学習のために消します。

## スプライトにイベントと音を設定する

次に自分で用意したスプライトにコードを適用していきます。

![image09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/90384174-00e7-a476-505a-46faa91c0fa4.png)

まず左上で**コード**を選んでブロックパレットを表示します。

![image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/da31e4c6-65a5-5e33-6c90-9b482aa91f65.png)

**このスプライトがおされたとき**をコードエリアに置きます。

![image11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/b4be3fb8-3746-86f1-ae89-464d2be66abd.png)

その下に**ポップのおとをならす**を置きます。

![image12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/4eadfa69-b47b-ac63-9e92-9bf4c395b8f1.png)

これで自分が用意したスプライトをクリックする度に音が鳴ります。

## 用意されたスプライトを使う

今回は自分でスプライトを作成しましたが、元々用意されたスプライトを使うこともできます。

![image13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/a99e834c-9482-3e5c-75d5-e8eff567892e.png)

**猫(Scratchキャット)**のアイコンにマウスカーソルを乗せ、**虫メガネ**のアイコンをクリックすとスプライトを選ぶ画面に移動します。

![image14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/2655d536-caae-1a0d-4a59-6a53e985596f.png)

今回は**Q**の文字を選んでみました。

## 色々なコードで遊んでみる

**Q**のスプライトに対して色々なコードを適用してみます。

### 色を変える

![image15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/f766677b-4bf5-4bae-cdb8-3d92804abe11.png)

**このスプライトがおされたとき**と**いろのこうかを25ずつかえる**を組み合わせてみました。

これでスプライトを押す度に色が変わります。

### 繰り返す + 動かす

コードエリアに置いたブロックはdeleteキーなどで削除可能です。

**いろのこうかを25ずつかえる**を削除して、他のブロックを置いてみることにします。

![image16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/f9c2b812-0197-01d7-8177-fa44e4e5f165.png)

**せいぎょ**の**10かいくりかえす**を置いてみます。
プログラマの方にとってはお馴染みのfor文的なものです。

![image17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/f8145f2e-e0cb-832a-7c86-18533e263f87.png)

**10かいくりかえす**の中に**15どまわす**と**1びょうまつ**を置きます。

これでスプライトをクリックすると**15度回して1秒待つ**を10回繰り返します。

### 繰り返す + 大きさを変える

![image18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/5dd03466-3516-9249-44c2-558b28827370.png)

さきほどの**10かいくりかえす**の**10**を**15**に書き換え、二つ置いてそれぞれに**おおきさを10ずつかえる**と**おおきさを-10ずつかえる**を配置します。
**-10**は**10**を自分で書き換えました。

このように数字は基本的に変更が可能です。

これでスプライトをクリックすると**大きくなるを15回、小さくなるを15回**実行します。つまり**大きくなって小さくなる**というアニメーションの完成です。

## 宣伝

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

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