【code.org】アプリラボ入門１〜じゃんけんゲーム〜

このページで学べること
１　スクリーンの遷移
２　ボタンとonEvent
３　変数の宣言と代入、呼び出し
４　条件分岐
５　ラベルとsetText
６　ローカル変数とグローバル変数
７　文字列の結合
８　関数

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

アプリの設計

グー、チョキ、パーのボタンを押すと画面が変わり、結果が表示される。
勝った回数が表示される。

UIデザイン

　アプリラボを開いたら、このような画面が現れます。左側にプレビュー画面、右側にプログラムを各部分が配置されています。まずは左上の「デザイン」をクリックしましょう。

　ボタン（Button）をドラッグしてプレビュー画面にドロップするとボタンが追加されます。ボタンを追加したら「id」と「テキスト」を書き換えましょう。

id…ボタンやラベルなどの要素を識別するための文字列。重複してはならない。日本語はNG
テキスト…実際に表示される文字列。日本語でOK。

　ここではidを「buttonGu」、テキストを「グー」としました。

〜idをつけるときの工夫〜
　どんなidをつけるかは、プログラムをする上でとても重要です。ボタンを追加したときに自動でつけられるidは「button◯◯」（◯◯は数字）です。ボタンの数が少ないうちは、どのボタンについてプログラムしているかを覚えていられますが、ボタンが多くなるとそうはいきません。
　そこで上の例のように「buttonGu」のように、グーのボタンだということをidに書いておくことで、後々混乱しないようにしておくのです。最初のうちは面倒くさいかもしれませんが、プログラミングでは避けて通れませんので、今のうちに習慣づけましょう。
　ちなみにidにはスペース（空白）を入れられません。本当は「button gu」のように書きたいところですが、これではエラーになってしまいます。スペースを開けずに「buttongu」とすると、境目が分かりにくくなります。そこで単語の切れ目をわかりやすくするために、単語の最初の文字を大文字にすることがよくあります。これをキャメルケース（大文字がラクダのコブのように見えるからこう呼ばれています）と言います。This is a penをキャメルケースで表すと、thisIsAPenとなります。先頭が小文字であることに注意してください。

　画面右上のコピーを押すと、ボタンが複製されます。２つコピーを作って、チョキとパーのボタンを作りましょう。（idは「buttonChoki」と「buttonPa」にします）

　同じように今度はラベル（Label）をドラッグして、上の図のように配置しましょう。（idは「labelWin」にします。必要に応じてフォントサイズを変更しましょう）

　次に２枚目のスクリーンを追加します。プレビュー画面上のセレクトボックスをクリックして、New Screenでスクリーンを追加できます。このスクリーンにラベルとボタンを追加しましょう。
　最後にスクリーンにidをつけてデザインは終了です。（プレビュー画面のボタンやラベル以外の部分をクリックするとスクリーンのプロパティを表示することができます。）
　１枚目のスクリーンid…screenHome
　２枚目のスクリーンid…screenResult

コーディング

画面の遷移

　今度はコーディングです。ボタンを押したら画面が変わるようにコーディングしていきましょう。
　プレビュー画面上にある「コード」をクリックすると、右側のワークスペースにコーディングできるようになります。ツールボックス内の「UI Controls」にあるonEventブロックとsetScreenブロックをワークスペースにドラッグして、図のようにidを書き換えます。

onEvent（id,イベントタイプ,コールバック関数）
…idで指定された要素に対するイベント（クリックやキー押下など）が発生したときに、コ　ールバック関数を呼び出す。
setScreen(id)
…idで指定されたスクリーンに変える。

　残りのボタンにも同じ処理を追加しましょう。ここでは上手なコピペの方法を紹介します。ワークスペース右上にある「</>テキストを表示」をクリックすると、コードがブロックからテキストに変わります。１〜３行目を選択して「Ctrl＋C（Macはcommand＋C）」でコピーして、４行目に「Ctrl＋V（Macはcommand＋V）」で貼り付けます。３回貼り付けて、ワークスペース右上の「ブロックを表示」を押しましょう。

　後はボタンのidとジャンプ先のスクリーンidを図のように設定すればページ遷移の完成です。プレビュー画面下の「実行」を押して動作を確認しましょう。

勝ち負け判定

　次にじゃんけんの勝ち負け判定をコーディングしていきましょう。次のような処理をする必要があります。

（グーを押したとき）
１　変数opponentに０，１，２をランダムで格納する。（０がグー、１がチョキ、２がパー）
２　もしopponentが０なら、ラベル（labelMessage）に「あいこ」と表示する。
３　もしopponentが１なら、ラベル（labelMessage）に「勝ち！」と表示する。
４　もしopponentが２なら、ラベル（labelMessage）に「負け！」と表示する。

　それでは実際にコーディングしてみましょう。今はグーを押したときの処理であることに注意して、onEventのコールバック関数の中に処理を記述していきます。

　まずは相手の手を記憶しておく変数を用意します。変数に関する命令はツールボックス内の「Variables」に入っています。
　変数を使うときには「宣言」と「代入」が必要です。「宣言」とは数値や文字列を記憶しておく変数を作ることで、「代入」とは宣言した変数に数値や文字列を記憶させることです。
　「var x = 0;」とすると、「変数xを宣言し、xに０を代入する」という命令になります。それに対して「var x;」とすると、「変数xを宣言する」だけの命令になり、まだ数値や文字列は記憶されません。つまりこの「var」が変数を宣言する命令だということです。
　また、「x = 0;」とすれば「変数xに０を代入する」という命令になります。

　変数名は好きな名前をつけることができます。これもidと同じように、何を記憶させているかを理解しやすくするような名前をつけましょう。変数名は先頭を大文字にしたり、空白を入れたりすることはできませんので、長くなる場合はキャメルケースを活用しましょう。

　ここでは変数名を「opponent（敵という意味）」としました。変数opponentに０〜２の乱数を代入するには、ツールボックス内の「Math」にあるrandomNumberブロックを利用します。

randomNumber(最小値，最大値）
…最小値〜最大値の間の整数をランダムで発生させる。

　次に勝ち負けを判定するために条件分岐の処理を記述していきます。「もし〜なら・・・する」というしょりはifブロックを使います。ツールボックス内の「Control」にあるifブロックを３行目に追加しましょう。

　まずは「変数opponentが０の場合」の処理から作ります。条件に「opponent == 0」（==ブロックはMathにあります）を追加します。

　プログラミングで「等しい」を表すときには「==」を使います。数学では「=」を使いますが、プログラミングで「=」は代入を表します。

　０がグー、１がチョキ、２がパーと考えているので、０の場合はあいこです。「UI Controls」にあるsetTextブロックを追加し、ラベル（labelMessage）に「あいこ」と表示させるようにしましょう。

setText(id,文字列)
…idで指定された要素のテキストを指定された文字列に書き換える。文字列を直接指定する場合は「”（ダブルクオーテーション）」で囲む。文字列を記憶している変数を指定する場合はダブルクオーテーションで囲まずに変数名を指定する。

　同じように相手がチョキの場合とパーの場合も記述していきましょう。３〜５行目をコピペして、条件部分と表示するテキスト部分を書き換えればグーの場合の勝ち負け判定は完成です。実際に動かしてみましょう。

勝った回数の記録

　最後に勝った回数を記録する処理を作りましょう。これも変数を使って記録しますが、変数を宣言する場所が肝心です。
　勝ち負けを判定するための変数opponentはコールバック関数の中で宣言しています。このようにコールバック関数の中で宣言された変数は、その関数内でしか使うことができません。このような変数を「ローカル変数」と呼びます。
　一方、勝った回数を記録する変数は、自分がどのボタンを押しても同じように変化させる必要があります。そのような変数は関数の外で宣言する必要があります。このような変数を「グローバル変数」と呼び、どの関数からでも呼び出したり値を書き換えたりすることができます。

　１行目で変数winを宣言し０を代入します。そして相手がチョキの場合の処理の中に、勝った回数を１増やし、ラベル（labelWin）に表示させる処理を記述します。

　ここで９行目の書き方に注目してください。「win = win + 1」となっていますね。これは数学ではおかしな書き方で、プログラミング独特の書き方と言えるでしょう。
　左辺の「win = 」は、「変数winに右辺の値を代入する」ことを意味しています。それに対して右辺の「win + 1」は、「変数winの値を呼び出し、それに１を足す」という意味になります。つまり「win = win + 1」は、「変数winの値を呼び出し、それに１を足した値を変数winに代入する」という意味になるわけです。

　変数を扱う数式では、「左辺は代入」「右辺は呼び出し」を表す。

　次に１０行目を見てください。setTextブロックで指定している文字列が「”勝った回数” + win」になっていますね。このwinは先程と同様、変数winの値を呼び出すことを意味しています。変数winから呼び出される値は「数値」ですから、「文字列」には足せない気もしますが…。
　このように文字列と数値を足し算すると、数値は文字列として認識され「文字列同士を結合する」という処理になります。
　これで勝った回数が表示されるようになりました。（もし表示されなければラベルの幅が短くて表示されていないだけかもしれません。デザインに戻ってラベルの幅を調整しましょう）

関数で同じ処理をまとめる

　これでグーを出したときの処理が完成しました。残りはチョキとパーですね。
　グーの処理をコピーしてチョキとパーのボタンを押したときの処理に貼り付けて、変数opponentの値に応じて表示するテキストを変えて…というように作ればゲームは完成します。しかし、同じような処理を何度も書くのは、プログラム的には美しくありません。

　これまでは、変数opponentの値に応じて（０がグー、１がチョキ、２がパー）処理を変化させてきましたが、それぞれの数字にグー、チョキ、パーのどれを割り当てるのかは作り手側の勝手です。チョキのボタンを押したときには、０がチョキ、１がパー、２がグーとすれば、グーのボタンを押したときの処理と同じように記述することができます。

　このように同じ処理を記述するときには「関数」が有効です。

　まずonEventブロックの外に、ツールボックス内のFunctionsにあるfunctioinブロックを追加します。このとき、関数名も変数名と同じように「どんな処理をするのかが分かりやすい」名前をつけてください。
　次にonEventブロックに記述した処理をコピーして、functionブロックの中に貼り付けます。
　最後にonEventブロックの中に、関数を呼び出すブロックを追加すれば関数の完成です。

　関数には「引数あり」と「引数なし」の２種類あります。「引数」とは、関数の中で計算するのに必要な数値や文字列などのことを言います。例えば「入力した値を２倍にして返す」という関数に数値３を与えると６が返ってきます。このとき入力した数値３が引数です。一方、「引数なし」の関数は、ただ処理を行うだけになります。今回はどのボタンを押しても同じ処理で済むため、引数なしの関数を使用しています。