最終更新日 2025年4月28日 by toytune
スクラッチはアメリカの大学、MIT（マサチューセッツ工科大学）メディアラボで開発されたビジュアルプログラミング言語です。
もくじ
はじめに
プログラミングには「DRY原則（Don’t Repeat Yourself）」という考え方があります。簡単に言うと、「同じ処理を何度も繰り返して書かないようにしよう」というルールです。
小さなプログラムでは同じコードが少しくらいあっても問題ありませんが、大きなプログラムになると修正がとても大変になります。たとえば、同じコードが100か所にあった場合、すべてを修正するのは手間がかかるうえ、修正漏れによってバグが発生することもあります。
スクラッチでは「ブロック定義」を使うことで、このDRY原則を実現できます。繰り返し使う処理をひとつの「定義」にまとめることで、修正したいときはその定義を変えるだけでOKになります。
今回は、上から「リンゴ」のスプライトが落ちてきて、マウスポインターに触れたら消えるというアニメーションを作りながら、「ブロック定義」の使い方を学んでいきましょう。
過去にも「ブロック定義」については触れているので、そちらもご参考ください。
▼ 今回作成するプログラム（の旗をクリックして動作を確認することができます）
リンゴのスプライトが落ちてくるアニメーションを作ろう
まず、「リンゴ」のスプライトが上から落ちてくるアニメーションを作っていきます。
まず、デフォルトで準備されている「ネコ」のスプライトは今回必要ないので、スプライトの一覧からゴミ箱アイコンをクリックして削除しておきます。
今回は「リンゴ」のスプライトを使うので、画面右下にある「スプライトを選ぶ」のところをクリックします。
画面が遷移し、スプライトの一覧が表示されます。
その中から「Apple」という名前で「リンゴ」のスプライトがあるので、クリックで選択します。
続けて、「リンゴ」のスプライトのプログラムを組んでいきます。
「イベント」から「が押されたとき」のブロックをドラッグします。
続けて、「動き」から「x座標を0、y座標を0にする」をドラッグし、「が押されたとき」の下にくっつけます。
座標については、こちらの記事も参照してください。
「x座標を0、y座標を0にする」の数値を変更していきます。
今回、横方向となるx軸については、ランダムな場所にしたいので、「演算」から「1から10までの乱数」のブロックをドラッグし、「x座標を0」のところに入れます。入れたら、「1」を「-195」、「10」を「195」に変更します。
縦方向となるy軸は、上から落ちるようにしたいので、「y座標を0」のところを「150」に変更しておきます。
これで、「リンゴ」のスプライトの最初の位置のプログラムは完成です。
次に「リンゴ」のスプライトが落ちていくアニメーションのプログラムを作っていきます。
落ちる動作は「ずっと続けてほしいもの」なので、「制御」から「ずっと」をドラッグし、下にくっつけます。
「ずっとしてほしい動作」は、「リンゴ」のスプライトが「y座標150の地点からマイナス方向」に変えていきたので、「動き」から「y座標を10ずつ変える」をドラッグし、「ずっと」の中に入れます。
「y座標を10ずつ変える」の「10」のままだと上に登っていくので、「-10」に変更します。
この段階で動作確認してみます。
ステージのをクリックします。
横方向はランダムな位置に「リンゴ」のスプライトが表示され、上から落ちていくアニメーションができました。
次はこれを拡張して、下まで落ちきったら、また上に「リンゴ」のスプライトが表示され落ちるアニメーションが繰り返されるようにしていきます。
繰り返し落ちてくるように改良しよう
今のままだと、リンゴは一度落ちたら終わりです。落ちきったらまた上に戻って繰り返し落ちるようにしていきましょう。
「リンゴ」のスプライトの位置によって条件分岐したいので、「制御」から「もし〜なら」をドラッグし、「ずっと」の中、「y座標を-10ずつ変える」の下にいれます。
条件分岐については、こちらの記事も参照してください。
条件の設定をするので、「演算」から「〜 > 〜」のブロックをドラッグし、「もし〜なら」の「〜」の中へ入れます。
次に「演算」ブロックの「〜 > 〜」の中を設定していきます。
「動き」から「y座標」をドラッグし、「〜 > 〜 」の右側の「〜」に入れます。
「〜 > 〜」の左側には、「-160」と入力します。
これで、「リンゴ」のスプライトは、「-160」より小さい数値の座標になった場合、この条件が発動することになります。
条件になった場合、発動したい動作を入れます。
今回、「リンゴ」のスプライトがy座標「-160」より小さい数値になった場合、また上の位置に戻したいので、「が押されたとき」の下にある「x座標を-195から195までの乱数、y座標を150」にするにしたいので、これを複製したいと思います。これだけを複製したいので、一旦上下のブロックをドラッグで離して、離したあと右クリックで出てきたメニューの中から「複製」を選択します。
複製できた「x座標を-195から195までの乱数、y座標を150」のブロックは、「もし-160 > y座標」ならの中に入れます。
複製のために離していたブロックも元どおりにくっつけます。
動作確認してみます。
ステージのをクリックすると、「リンゴ」のスプライトが下まで落ちたら、またx軸ランダムな位置、y軸上部に「リンゴ」のスプライトが表示され、その動作が繰り返されるアニメーションができていることが確認できます。
ブロック定義で処理をまとめよう
ここで、何度も使っている「位置を初期化する処理」を「ブロック定義」にまとめてみましょう。
先ず「ブロック定義」をクリックすると、「ブロックを作る」があるので、それをクリックします。
画面が遷移し、モーダルが表示されます。
「ブロック定義」の作成から戻ると、「定義 位置」というブロックが表示されています。
どちらでも良いのですが、わかりやすく上側の「x軸を-195から195までの乱数、y座標を150にする」を外して、「定義 位置」にくっつけます。
下の「もし-160>y座標なら」の中にある「x軸を-195から195までの乱数、y座標を150にする」は右クリックで削除しておきます。
これで「定義 位置」に「x軸を-195から195までの乱数、y座標を150にする」の処理はまとめられたので、まとめたものを再度入れていきます。
「定義 位置」のブロックをそのまま入れるのではなく、その分身のブロックをいれていきます。
再び「ブロック定義」をクリックすると、「位置」というブロックが追加されていることがわかります。
では、その「位置」のブロックをドラッグします。
もともと「x軸を-195から195までの乱数、y座標を150にする」があった場所に入れます。
画像を参照いただき、下記場所に入れてください。
- 「が押されたとき」の下に入れる
- 「もし-160>y座標なら」の中に入れる
もうお分かりかと思いますが、「位置」のブロックは、「定義 位置」の中に入れた処理をしてくれます。
今回は、「x軸を-195から195までの乱数、y座標を150にする」だけですが、他にもいろいろ同じ処理がある場合、すっきりとブロックを組むことができます。
ゲーム要素を追加してみよう
さらに条件を追加して、ゲームの要素を入れていきたいと思います。
「リンゴ」のスプライトに触れたら、最初の位置にもどるようにしていきたいと思いますので、その条件を追加していきます。
「もし〜なら」のブロックをドラッグし、「ずっと」の中の一番下に入れます。
今回は、「リンゴ」のスプライトがマウスポインターに触れたらスプライトが元の位置に戻るようにしたいので、「調べる」から「マウスポインターに触れたら」をドラッグして「もし〜なら」の「〜」に入れます。
「もしマウスポインターに触れたなら」の条件に一致した場合、「リンゴ」のスプライトを上の位置に戻すので、再度「ブロック定義」から「位置」をドラッグし、「もしマウスポインターに触れたなら」の中に入れます。
マウスポインターに触れた場合、触れたことがわかりやすいように「リンゴ」のスプライトの見た目を変えていきます。
画面左上の「コスチューム」をクリックします。
画面が遷移するので、今後は左下の「コスチュームを選ぶ」をクリックします。
コスチュームの一覧に画面が遷移します。その中から「Button4-a」というものがあるので、見つけてクリックします。
マウスポインターに触れた瞬間は、「リンゴ」のスプライトから、この「Button4-a」のスプライトへ変えてみようかと思います。
スプライトを切り替えるプログラムをつくっていきます。
「見た目」から「コスチュームをButton4-a」にするがあると思うので、「ずっと」の中の先頭にドラッグで入れます。
最初は、「リンゴ」の状態で表示したいので、「Button4-a」となっているところをクリックし、「apple」に変更します。
今度は、「もしマウスポインターに触れたなら」の条件に一致したときのコスチュームを設定していきます。
切り替える方法は、いろいろありますが、ここでは「見た目」から「次のコスチュームにする」をドラッグし、「もしマウスポインターに触れたなら」の中の先頭に入れます。
「次のコスチューム」というのは、「apple」の次のコスチュームであることを指しているので、この条件にマッチした場合、「Button4-a」に変わるということになります。
コードを整理しておきます。「が押されたとき」の下にある「位置」はもう不要なので、右クリックで削除しておきます。
あとは、「次のコスチュームにする」のところは、このままだと早すぎて「次のコスチューム」に切り替わったことがわからないくらいのスピードになります。切り替わったところがわかるくらいの時間を確保したいところです。そこで「制御」から「1秒待つ」をドラッグし、「次のコスチュームにする」の下にくっつけます。
「1秒」のままでは少し長いので、「0.05」に変更しておきます。
これで「リンゴ」のスプライトが上から落ちてきて、マウスポインターで触れると「緑色のチェックマーク」のスプライトに切り替わり、再び「リンゴ」のスプライトが上から落ちてくるプログラムができました。繰り返し使用されるスプライトの位置は、「ブロック定義」でまとめています。
下の画像の左は、 「ブロック定義」を使ったもので、右は「ブロック定義」を使わなかった場合です。
一見、右の方が縦に短かく、ブロック量も少ないですが、あとでスプライトの位置を変えたい場合が発生した場合、「ブロック定義」を使っている方が1回の変更で済みます。
動作確認してみよう
動作チェックしてみます。ステージのをクリックし、落ちてくる「リンゴ」のスプライトにマウスポインターで触れてみます。一瞬、「緑色のチェックマーク」に変化し、再び「リンゴ」のスプライトが繰り返し上から落ちてくるかおt思います。
動画でも動作チェックの様子を紹介します。
まとめ
- プログラムの中で同じ処理を何度も書かないようにする「DRY原則」を意識しよう。
- スクラッチでは「ブロック定義」で処理をまとめることができる。
- ひとつの処理をまとめておけば、変更があっても1か所だけ直せばOK。
- 「見た目」や「コスチューム」の切り替えは、タイミング調整が大切。
- 今回は「位置」だけをまとめたけど、ほかにも繰り返す処理があればブロック定義を活用しよう！
今回は、「リンゴ」のスプライトの位置だけについて「ブロック定義」を使ったので、それほど「ブロック定義」の恩恵がわかりにくいかもしれませんが、前途の通り、仮に100回同じ処理があった場合、100箇所の変更が必要になってきます。少なくとも100箇所をきちんと変更できればよいですが、漏れが発生した場合はプログラムにバグを発生させてしまいます。その為、同じ処理は必ず「ブロック定義」を活用してください。
また今回は、「ブロック定義」に名前をつけただけでしたが、変数を活用し数値を「ブロック定義」に渡して、動的に処理を変更させることもできます。そういったこともこれから紹介していきたいと思います。
