※ 当ページには【広告/PR】を含む場合があります。
2020/05/12
2022/07/27
【Scratch入門】はじめてのScratchアプリ作成〜スプライトを自由に歩かせてみよう
この記事ではScratchプログラミング初心者向けに基本となる操作をじっくりと解説していく内容になっています。まずはScratchの基本中の基本である、「変数」と「四則演算」(足し算/引き算/掛け算/割り算)を扱う方法を考えてみます。Scratchはブラウザからオンラインでどなたでも無料で使えます。手を動かしながら、プログラミングをする感覚に体で慣れていきましょう。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ
足し算
まずは足し算からやってみます。以下のプログラムでは、5 + 6
を計算させている簡単なものです。これの中身について、ブロックごとにみていきます。Scratchをプログラミングの基本は以下のようにブロックを積み立てるようなイメージです。開始ブロック〜終了ブロックの間になにかの処理を実行するブロックをつなげていく、「ハンバーガー構造」になっています。またプログラミングコードの大原則として、コード処理の流れは上から下に流れます。勝手に処理が下から上にさかのぼることはありえません。その意味では、下から上に順々に具材を積み上げていく実際のハンバーガーの作り方とは真逆ですが、開始ブロックが下のバンズ、終了ブロックが上のバンズ、実行ブロックは中身の具材、といったイメージです。(どうでもいいですが、ハンバーガーの下のバンズは「ヒール」、上のバンズは「クラウン」と呼ぶそうです。)開始ブロックには、開始するために呼ばれる「イベント」
によって、いくつか種類があります。通常は🚩
ボタンを押して開始するイベントからスタートします。考える吹き出しを付ける
最初に、猫に「うーん...」と2秒間考えさせるプログラムを作成してみましょう。左のツールバーから、うーんと2秒考える
ブロックをマウスでつまんで、キャンバスに放り込み、開始ブロックと終了ブロックではさんであげましょう。そうすると、以下のように動作するプログラムが完成します。中々地味なプログラムですが、このテクニックがScratchプログラミングのデバッグの基本となるので、Scratchを卒業するまでおそらくずっと使うことになると思います。ちなみに、以下はまったく同じ働きをします。プログラミングの世界では、同じ働きをするプログラムでも、プログラムを作る人の考え方によって、何通りにも書き方が違います。今のような単純な処理でも、ブロックが短く書ける方が良いだろう、という訳でもなく、どちらを使うかはプログラムを作る人の好みやその前後の文脈で違います。しかしプログラミングに絶対的な正解はないので、「どっちを使うのが正しいのだろう...」というのはあまり気にせず作業を進めるのが良いでしょう。気に入らなければ、あとでいくらでも手直し可能です。変数を使う
プログラミングに欠かせないのが「変数」です。変数とはよく「箱」
に例えられます。数字や文字を一旦入れておく箱が、「変数」
と呼ばれるものとイメージしてもらえばよろしいかと思います。今回は、5 + 6
を計算させた答えを入れる変数を作成したいので、Scratchで変数を使うにはどうしたら良いか考えていきます。新しい変数を作るには、左のツールバーから変数
のボタンをクリックします。すると、新しい変数
という名前のダイアログボックスが出るので、変数の名前の欄に今回は足し算の結果
という名前を入力してOKボタンを押します。変数が作成されると、ツールバーに足し算の結果
という変数が作成されました。この変数をプログラムで使うには、ツールバーからマウスで引っ張って、変数のブロックをキャンバスに投げ込みます。変数の中身を入れる際には、[変数の名前]を●●にする
ブロックをツールバーから取ってきて、キャンバスに追加します。これで、キャンバス内に材料は揃いました。変数「足し算の結果」
に11
を代入して、その変数が11
になっているか確かめてみます。以下のようなブロックになるように組んでみてください。このプログラムを走らせると、のようになっているかと思います。足し算
先程は、5 + 6
の結果である11
を自分で入力してましたが、足し算もプログラムに処理させてみます。足し算を行うブロックはツールバーの演算
の中にあります。これをキャンバスに追加して、ブロックの入力欄に5
と6
を入れてみましょう。先程のプログラムを改良したものが以下です。足し算の結果を〜にする
ブロックの中身に、この足し算をするブロックを入れ込みます。これを実行すると、のようになり、ちゃんとプログラムが足し算を計算しています。条件分岐
処理の最後に、簡単な条件分岐を入れてみます。プログラミング言語には付きもののif文と言われます。この条件分岐
はツールバーの制御
の項目にあります。もし〜なら...
という文章で、〜
の部分にあたる条件で、正しい場合にのみ処理が実行できるのがこの機能です。ここでは足し算した結果が11だったら...
にしてあげたいので、以下の等号比較
を行えるブロックは演算
の項目にあります。それではキャンバスに材料が揃ったので、以下のように実行ブロックを組み替えます。もしも、計算した結果が間違っていたら、猫は「あってるわ」と言わないはずです。完成品は以下のプログラムです。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ
残りの演算(引き算/掛け算/割り算)
ここからは足し算以外の残り3つの計算を上で説明したやり方と同じ要領で、まとめて作ってみます。上の足し算
のお話でも説明したように、ツールバーの演算
の項目に四則算のブロックがあるのをおさえておきましょう。必要になったら、ここから欲しい計算のブロックをキャンバスに追加していきます。引き算
足し算のプログラムを部分的に引き算に変えます。例えば、13 - 5
を計算するプログラムにするため、以下のように編集します。引き算の完成品のサンプルプログラムはこちらです。掛け算
かけ算は、小学校の算数では、通常×
の記号を使うのですが、プログラミング言語では、*(アスタリスク)
が使われます。今回は11 * 13
をやってみましょう。かけ算の完成品のサンプルプログラムはこちらです。割り算
最後に割り算を行います。割り算の記号はプログラミング言語では/(スラッシュ)
記号で計算します。小学校で習う÷
記号では計算出来ませんので、注意が必要です。スラッシュ記号をはさんで、左が分子(割られる数)と右が分母(割る数)です。それでは、8 ÷ 2
を計算するプログラムになるように以下のようにブロックを組んでみます。割り算の完成品のサンプルプログラムはこちらです。ちなみに割り切れない割り算の計算結果は、ちゃんと小数点まで計算してくれます。長くなりそうですので今回は小数点のお話はやめておきます。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ
まとめ
今回はScratchの四則演算と変数の使い方を図解してみました。Scratchは実際に手を動かしてブロックを組み合わせていくことが一番の練習になります。是非とも、オンラインのScratchのページで基本的なプログラミングから1つひとつ自分の手で作ってみましょう。