【code.org】アプリラボ入門２〜さいころの確率〜

このページで学べること
１　画像の使い方
２　入力値の取得
３　配列
４　繰り返し
５　ラベルの一括書き換え

アプリの設計
UIデザイン
コーディング
完成

アプリの設計

サイコロを繰り返しふり、目の出た回数を記録する。
試行回数を入力し、サイコロの画像をクリックしたら、結果が表示される。

UIデザイン

　code.orgで画像を使用するためには、ツールボックス右上の設定ボタンから「資産管理」を開き、ファイルをアップロードする必要があります。

　アップロードした画像を追加するには、Imageをドラッグしてスクリーンに配置し、プロパティのImageにファイル名を指定します。

　サイコロの画像は次のリンクのものを利用しています。

サイコロの無料イラスト - 上・斜の角度別フリー素材 - チコデザ

サイコロの無料イラスト。1、２、３、４、５、６の目の上からの角度と斜めからの立体的な角度のサイコロのイラストなどデザインにも使えるおもちゃ(娯楽)のフリー素材。

　出来上がりの画面はこのような感じです。画像の下に試行回数を入力するText Inputを配置しています（入力欄が１つしかないので、idは特に変えなくても大丈夫）。その下に、目の出た回数を表示するラベルを配置しました。左側の「◯の目」はプログラムで変更しないのでidを変える必要はありませんが、右側の数字はプログラムで変更するので、分かりやすいidを付けてください。（例えばlabelNumber1〜６など、後ろに数字を付けておくと良いです）

コーディング

クリックイベントと入力値の取得

　onEventブロックは、ボタン以外の要素にも割り当てることができます。今回はサイコロの画像をクリックしたときに処理を開始するため、上のように記述します。
　入力値を取得するときには、getNumberブロックを使用します。似たブロックにgetTextブロックがありますが、今回は「数値」を取得するのでgetNumberブロックを使用します。ここでは変数nに取得した数値を記憶させます。

getNumber(id)
…idで指定された要素から数値を取得する。
getText(id)
…idで指定された要素から文字列を取得する。

　数値を取得できたかどうか確かめるために、３行目に「console.log(n);」と記述します。これはワークスペース下にある「Debug Console（デバッグコンソール）」に変数nの値を表示するという意味です。プログラムを作る際には、入力値の取得や計算結果などを途中で確認する必要がある場合があります（例えばバグを見つけたいときなど）。その時に、手軽に確認する方法がこの「console.log();」です。ぜひ覚えておきましょう。

配列と繰り返し

　出た目の回数を記録するのに、６つの変数を作って記録することもできますが、その場合、条件分岐を６つ記述する必要があり（１の目が出たら変数◯◯の値を１増やし、２の目が出たら変数●●の値を１増やし…）、とても面倒くさいです。

　そこで今回は「配列（リスト）」を使ってみましょう。
　配列とは、変数のまとまりのようなもので、配列名[番号]の形で代入したり呼び出したりすることができます。この番号を「インデックス」と呼びます。
　３行目を見てください。「var list = [ 0, 0, 0, 0, 0, 0 ];」となっていますね。このようにカンマで区切ることで、１つの配列の中に６つの値を代入しているのです。

　配列の中の値を呼び出すには「◯番目の値」というようにインデックスを指定する必要がありますが、このとき注意が必要です。それは、配列の先頭は「０番目」として扱われるということです。
　なぜ１からではなく、０から始まるかというのは中々説明が難しいのですが（というか本当に正しく理解しているわけではないのですが）、「コンピュータの仕組みに関係している」からなのです。
　変数や配列を宣言すると、コンピュータ内の「メモリ」という部分に記憶領域が設定されます。配列を宣言したときに確保される記憶領域の先頭部分という意味で、最初の要素は「０」として扱うのが通例となったようです。
　先頭を０として扱うとメリットがあります。次に出てきますが、繰り返し処理を行う際に、「インデックスが配列の要素数未満」という条件で処理を繰り返せば、全ての配列の要素について計算することができます。（サイコロの場合は配列の要素数＝６で、インデックスの最大値＝５です）
　さらに、先頭を０にすることで、インデックスが「先頭から数えて◯個分離れている」ということを教えてくれます。

　次に繰り返しを記述しましょう。

　繰り返しの基本となるのが、このforブロック（Controlにあります）です。forに続くかっこの中に「ダミーインデックス」「ダミーインデックスの範囲」「ダミーインデックスの変化」を記述します。

for( 初期化式，条件式，インクリメント式 )
…初期化式で定義されたダミーインデックスが、条件式を満たしている間繰り返し（ループ）処理を行う。ダミーインデックスは処理が１回終わるごとに、インクリメント式に従って変化する。

　上の処理では、変数iをダミーインデックスとして宣言し、変数iが変数nより小さい間処理を繰り返すことになります。「i++」はインクリメントといって、１回処理が終わるごとに変数iの値を１ずつ増やすことを表しています。

　このように処理をした場合、何回繰り返すことになるでしょうか？
　変数nはユーザーが入力した試行回数です。例えば１０だとしましょう。

処理（１回目　i=0）→iを１増やす（i=1）→処理（２回目　i=1）→iを１増やす（i=2）→…

　処理が１回終わるごとに変数iの値が１増えます。i<10を満たすiの値は「0,1,2,3,4,5,6,7,8,9」の１０個ですから、この繰り返し処理は１０回繰り返されることになります。つまり、上の記述では「変数nの値の回数だけ処理を繰り返す」という意味になるわけです。

　最後に配列への値の代入です。今回はサイコロの目の出た回数を記憶させたいので、まずどの目が出たのかを変数に記憶させます。前回じゃんけんゲームで使ったrandomNumberブロックで０〜５のランダムな整数を変数xに代入します（本当は１〜６の目ですが、配列のインデックスが０〜５なので）。
　そして、配列のx番目の値に、「元の値＋１」を代入します。

結果の表示

　後は記録した回数をラベルに表示するだけですね。これも繰り返し処理を使って、一気に書き換えていきましょう、
　８〜１０行目がその部分になります。今度は繰り返し回数が６回と決まっています（ラベルlabelNumber1〜６）。setTextブロックを使ってラベルに配列の値を表示させますが、このラベルのidにダミーインデックスを活用することができます。「labelNumber + ( i + 1 )」でダミーインデックスの値に応じて指定するラベルidを変化させています。（i=0,1,2,3,4,5なので、1を足していることに注意。ラベルにidをつけるときに０〜５で付けておけば、１を足す必要はありません）
　９行目の１行で「ラベルlabelNumber（◯＋１）に配列listの◯番目」の値を表示することを記述しています。つまり、labelNumber1にlist[0]、labelNumber2にlist[1]…を表示することになるわけです。