さて、このシリーズもついに第四回まで来ました。第四回からは中盤戦、という事で、アニメだったらオープニングが変わる感じですね。ドラクエ2に例えると船とったくらい？(今の子には分からない例え)

第四回はif文なのですが、if文はこのシリーズの読者にはチョロい。
何故なら、このシリーズは「ツクールとかである程度ゲーム作って、プログラム覚えたいと思った人」を対象としているからです。

ツクールでゲーム作る、というのは、ようするにマウスで延々とif文書いているようなものです。普段からやってる事なので、割とすぐ理解出来ると思います。やったね！

ただこのシリーズは、油断しないでじっくりやっていきます。

「はい」か「いいえ」を聞く

if文の説明に入る前に、新たな機能を説明しましょう。「はい」か「いいえ」をプレーヤーに聞く方法です。 RPGのゲームとかで良くありますよね？

「はい」と「いいえ」は、このシリーズではMessageBox.yesNoという物で質問する事にします。
以下のようなコードです。

結果:

　
何度か実行して、「はい」を押したり「いいえ」を押したりしてみてください。どう結果が違うか分かりますか？テキストエリアの下の「結果」という所に注目してください。

唐突に出てきたMessageBox.yesNoですが、MessageBox.yesNoの使い方は以下のようになります。

MessageBox.yesNo(メッセージ,「はい」のラベル,「いいえ」のラベル);

この手の奴は、カンマ、つまり,で区切っていろいろ指定します。 yesNoボックスの場合だと、3つの文字を指定します。

一番最初のメッセージはまぁいいでしょう。
2つ目と3つ目のラベル、というのは、「はい」と「いいえ」のボタンのメッセージになります。ここに違う文字を指定する事で、ボタンの文字を変える事が出来ます。

指定した3つの文字と、実際の表示は、先程の例だと以下の図のような関係になっています。

yesNoボックスの図解

「はい」と「いいえ」のボタンの所の文字を、実際に変えてみましょう。例えば以下のようになります。

結果:

　
ちょっと横に長くて見づらいですね。こういう時には、別の行にしても大丈夫です。たとえばこんな感じです。

結果:

　
これでも同じ結果になります。「はい」のボタンが「そう関係ないね」になって、「いいえ」のボタンが「殺してでも奪い取る」になっていますよね。

アイスソード図解

なお、文字が長い時は変数を使っても構いません。

結果:

　
場合によっては変数を使う方が見やすい事もありますが、逆にわざわざ無駄に複雑にしてめんどくさいと感じる事もあります。プログラムとしてはどれも同じ意味なので、その時の気分で、好きなやり方で良いです。

こんな風にプレーヤーに2つの選択肢を尋ねるのがyesNoボックスです。ツクールでもこういう事やりますよね。少し自分でも書いてみましょう。

課題: 「あじゃはなんですか？」をプレーヤーに質問せよ

「あじゃはなんですか？」と聞いて、「ニワトリです」「餅です」の2つの選択肢をプレーヤーに出してください。

（答え合わせ用スクリプトの都合で、必ず「はい」の方のラベルを「ニワトリです」にしてください。手抜きですまぬ…）

結果:

答え:
MessageBox.yesNo("あじゃはなんですか？", "ニワトリです", "餅です");

　
さて、出来ましたか？ちなみにニワトリなんですかね？餅なんですかね？一応私は餅だと思っているんですが…

yesNoボックスの2つの流儀
MessageBox.yesNoは、このシリーズで勝手に決めた物です。MessageBox.showと同様で、 JavaScriptを実行する人、つまりツクールMVとかUnityとかそうした物が決める奴ですね。第二回のコラムで説明しましたね。環境と言ったりもするのでした。
　
第四回で説明しているyesNoボックスは、Windowsプログラミングを参考にした形です。
Mac OS、Linux(厳密にはX）などもこの形式ですね。吉里吉里にもこの形のyesNoボックスがありますし、Unityも開発中にしか使えないデバッグ目的ですが、似たような機能があります。
専門用語ではこれらのスタイルを、「モーダルダイアログ」といいます。難しいカタカナを使うと長渕に怒られるのでこのシリーズではコラム以外ではこの用語は使いません。日本語バンザイ。
とにかく、Windowsのアプリを作ったりする時のスタイルです。
　
さて、yesNoボックスにはもうひとつ流儀があって、それは「コールバック」スタイル、と呼ばれています。こちらは関数が必要となるので解説はこのシリーズの後半となりますが、残念な事にSecond LifeやツクールMVはコールバック型です。コールバック型はちょっと難しいので、中盤のif文の説明として使う用途としては、Windows型の方がいいかな、と思ったので、こちらを採用しています。
このシリーズの最後の方ではコールバック型のyesNoボックスも扱います（たぶん）。
　
なお、webのJavaScriptはその中間みたいな立ち位置です。基本的にはWindows型なのですが、これで出てくるボタンがださい。
で、おしゃれなボタンを出すライブラリはコールバック型で作られています。だから最近のおしゃれwebアプリはみんなコールバックで書く。

選択した結果を、変数で受け取る

さて、プレーヤーに「はい」と「いいえ」を聞く事は出来ましたが、まだプログラムでは何も対応していません。これでは聞くだけ聞いておいて投げっぱなしです。

対応するプログラムを書くのはこの第四回の主題となるif文という事になりますが、その前にまずは結果を「受け取る」ということを見てみましょう。

結果を「返す」とは

ここまでの例で、「はい」を選ぶと結果の所に1が、「いいえ」を選ぶと結果の所に0が表示されていたと思います。これはMessageBox.yesNoの決まりです(難しい言葉を使うと、仕様と言います）。

プレーヤーが「はい」を選ぶと、MessageBox.yesNo(...)は1という数値になるのです。この、何かした結果、数字になる事を、「数字を返す」と言います。

MessageBox.yesNoに限らず、多くの機能は、結果を「返す」という決まりになっている事がほとんどです。

返す結果と指定する三つの文字、すべてをここにまとめておくと、MessageBox.yesNoは、

文字を3つ受け取る
- 一番目がメッセージ
- 二番目が「はい」に相当するボタンのラベル
- 三番目が「いいえ」に相当するボタンのラベル
プレーヤーが「はい」を選んだら1を、「いいえ」を選んだら0を返す

という物だと言えます。

このシリーズを全て終えたあかつきには、JavaScriptはまぁまぁ分かる、と言える状態になると思います。その後は「環境」の勉強をする事になるでしょう。具体的にはツクールMVなどが、どういう機能を使わせてくれるか、という事です。

それは、上記のような提供されている機能の仕様を順番に調べていく、という作業になるので、たまにこうやって予行演習しておきます。

返された結果を、変数で受け取る

さて、話を戻して。

何かを実行した時の結果が返されたら、「変数」で受け取る事が出来ます。
例を見てみましょう。プレーヤーの選択した結果なので、sentakuという変数で受け取る事にします。

コードとしては以下のようになります。

var sentaku = MessageBox.yesNo("最後の戦いだ。準備はいいかい？", "はい", "いいえ");

第三回でやった、文字に名前をつける、というコードと似ていますが、 =の右側が文字じゃなくて、MessageBox.yesNo("最後の戦いだ。準備はいいかい？", "はい", "いいえ")になっています。

このように、=の右側に結果を返す何かを置いておくと、左の変数に返された結果が入るのです。

試しに、変数に結果を受け取った後に、この変数をMessageBox.showで表示してみましょう。

結果:

　
何度か実行して、「はい」を選んだり、「いいえ」を選んだりしてみてください。

なかなか複雑ですね。ちょっと自分でも書いてみましょう。

課題: プレイヤーが選択した結果に5を足して表示せよ

ちょっと難しい課題をやってみましょう。

まずyesNoボックスを表示します
- メッセージには「あじゃは鶏ですか？」を表示します
- ボタンは「はい」と「いいえ」です
結果をsentakuという変数で受け取ります
sentakuに5を足した物をMessageBox.showで表示します
- ヒント: 第三回の「課題: aに3を足した物をaに入れよ」を思い出そう

なかなか課題もプログラムっぽくなってきましたね。これくらいになると一発で正解、とは、なかなかいかないかもしれませんね。

ヒントとしては、2までは一つ前の例を参考にすると良いと思います。
いきなり全部をマスター出来る物でも無いので、答えを見たり前の例を見直したりしながら、ちょっとずつ消化していきましょう。

結果:

答え:
var sentaku = MessageBox.yesNo("あじゃは鶏ですか？", "はい", "いいえ");
sentaku = sentaku + 5;
MessageBox.show(sentaku);

このように、MessageBox.yesNoという物を使って、プレーヤーに「はい」と「いいえ」をたずねる事が出来ます。

ここまでで「はい」と「いいえ」を聞く方法は分かりました。次はこれを使って結果に応じた対応をするプログラムを書きましょう。
if文の登場です。

ifで分岐しよう

ここまでで、「はい」か「いいえ」をプレーヤーに聞く方法が分かりました。結果を変数に受け取る事も出来ました。

そこでこの変数の結果に応じて、対応を変えるコードを書いてみましょう。ついにif文です。まずはif文の例を見ていきましょう。

はじめてのif (if文の3つの構成要素)

まずは例として、以下のコードを見ていきます。説明はおいといて、とりあえず実行してみましょう。

結果:

　
これがifです。上のコードの2行目で、sentakuに0を入れるとどうなるかも試してみてください。0を入れたら何も表示されなくなったと思います。

では、このコードを細かく見ていきます。

まず一行目は第三回でやった内容です。覚えていますか？

// sentakuという名前をつける
var sentaku = 1;

sentakuという名前をつける、という意味でした。より細かく言うと、sentakuという箱を作って1を入れる、という事です。

次が新しい。

if(sentaku == 1) {
   MessageBox.show("sentakuは1です。");
}

このコードで、sentakuが1だったらMessageBox.show("sentakuは1です。");が実行されるという意味になります。

もう少し細かく見ていきましょう。

if文には3つの構成要素があります。

if
(と)で囲まれている所
{と}で囲まれている所。

ifの3つの構成要素

これらを順番に見ていきましょう。

といっても1番目のifはそのままで別段説明する事も無いので、二番目から見ていきます。

2番目、sentakuが`1`かどうかは、`==`でチェックする

2番目の(と)に囲まれている所は、上の例だと(sentaku == 1)になります。

さて、==という新しい物が出てきましたね（以前コラムでちょっと触れたけれど）。こいつはなんでしょう？
これは、変数が1なのか、などをチェックする為のものです。

JavaScriptでは、変数が1かどうかは、変数==1でチェックします。上の例だとsentaku == 1ですね。
なお、0かどうかは変数==0でチェックします。

==とイコールを2つ並べるんですね。
うわ、なんか知らない奴だ！難しそう！と思うかもしれませんが、ただそう決まっている、というだけです。

数学では（算数で挫折したって言ってんだろー、と聞こえて来そうですが…）普通=一つで同じような意味になりますが、 JavaScriptにおいては、普通の=は、「右の結果を左の箱に代入する」という意味で既に使われてしまっているので使えません。（以前少しコラムでも触れました）
そこでJavaScriptでは==が、左と右が同じ、という意味にしよう、と昔、Netscape社の人が決めたのです。

さて、この2の、(と)の間で書いた事が正しい場合は、その次の3が実行される訳です。なお、正しくない時は何も実行されません。

では次の3を見てみましょう。

3番目、`{`で囲まれている所

3番目の{と}に囲まれた所は、上の例だとコードが

if(sentaku == 1) {
    MessageBox.show("sentakuは1です。");
}

だから、関係無い所を消すと

                {
    MessageBox.show("sentakuは1です。");
}

ですね。

2番目に書いた(sentaku==1)が正しければ、この{で囲まれた所が実行されます。逆に正しくなければ、実行されません。

以上を踏まえて全体を見直す

さて、3つの要素に着目して全体をもう一度見てみましょう。

if(sentaku == 1) {
   MessageBox.show("sentakuは1です。");
}

(で囲まれている所が正しければ、{で囲まれている所が実行される、これがifです。図にすると以下みたいな感じでしょうか。

ifの図解

上のコードを言い換えると、

sentakuが1だったらMessageBox.show("sentakuは1です。");を実行する

という意味になります。

言葉にするとなんだか長ったらしいので、こういう時は自分でやってみる事です。ここらで課題をやってみる事にしましょう。

課題: sentakuが5だったら、「sentakuは5です。」と表示せよ。

以下の途中まで書かれているコードに、ifを追加してsentakuが5の時だけ表示されるようにし、 sentakuが6の時は何も表示されないようにしてください。

なお、この課題は自動で答えを検出するのが難しいのでいつも正解と出てしまいます（すみません）。あってるかどうかは自分で

var sentaku = 6;の場合を実行して何も表示されない事
var sentaku = 5;の場合を実行してメッセージが表示される事

を試して確認してください。

結果:

答え:
if(sentaku == 5){
MessageBox.show("sentakuは5です。");
}

　
この課題もちょっと難しいですね。第四回はif自体はそんな難しく無くても、課題がこれまでやってきた事の組み合わせになって長くなってきたので、課題が難しい気がします。

さて、これでifの説明をしたので、次にこのifを使ってプレーヤーの選択に応じた対応をしてみましょう。

なんか第四回の課題が難しい気がするんだけど…
第四回となる今回は、解説しているif自体はそんな難しくないと思うのですが、課題は全体的に難易度が高い気がします。というのは、今回はプログラムを「書く」練習を兼ねているからです。
　
プログラムというのは、出てくる物を理解しているだけでは実は書けません。これは、日本語が読めてもラノベが書けるとは限らないのと似ています。書く為には、やはり「書く練習」が必要です。
第四回は、意図的に課題を少し実践的な内容にしてあります。だからif自体は分かっていても、課題を解くのはちょっと難しいはずです。もしスラスラ解けるなら、プログラムの才能が他人よりあるのかもしれませんね。
　
書く練習は、最終的にはプラグインをいじったりゲームを作ったりする過程で自然とやれば良いものです。そうやって勉強するのが一番の早道です。やはりやりたい事をやるのが一番やる気も出るし、上達も早い。
ただ、最初はもう少し簡単な所で練習してからの方が、スムーズに始められると思います。ゲームのチュートリアルみたいなもんですね。
このシリーズでは、プラグインを書く事を想定して、このプログラムを「書く」練習もやっていきたいと思っています。
　
だから普通のプログラムの入門だとまだまだ読むだけであまり自分で考えて書く段階では無いこの辺でも、このシリーズでは普通にプログラミングをやってみよう、という構成になっています。
ひょっとしたら少し無謀で難しすぎるかもしれません。もしそうならごめんなさい。

「はい」と「いいえ」を聞いて対応してみよう

上の例では、var sentaku = 1;としていましたが、これでは面白く無いですね。
これをプレイヤーに質問して、その結果を受け取るように変更しましょう。

それには

var sentaku = MessageBox.yesNo(...);という感じにするのでした。やってみましょう。

結果:

　
何度か実行して、「はい」の場合と「いいえ」の場合を確認してください。
このコードで、

プレーヤーが「はい」を選んだら、MessageBox.show("「はい」が選ばれました。");を実行する

という意味になります。

一つ一つはこれまでやってきた事ですが、短いコードの中にいろいろな事がありますね。
良い機会なのでもう一度ここで復習する為に、順番にコードを見ていきましょう。

プレーヤーの選択を受け取る（復習)

まずはプレーヤーに「はい」か「いいえ」を聞いて、その結果を変数sentakuで受け取っています。

var sentaku = MessageBox.yesNo("最後の戦いだ。準備はいいかい？", "はい", "いいえ");

MessageBox.yesNoというのは、三つ文字が指定出来て、左から順番に

メッセージ
「はい」のボタンのラベル
「いいえ」のボタンのラベル

でした。そしてこのMessageBox.yesNoは、「はい」が選ばれたら1に「いいえ」が選ばれたら0になるのでした。

この結果を変数に受け取る、という事をする為に、varと=というのを使うのでしたね。

つまり全体としては、「はい」が選ばれたらsentakuに1が、「いいえ」が選ばれたら0が入るのでした。

if文の3つの構成要素（復習)

次に、このsentakuを使ったifがあります。以下のようになっています。

if(sentaku == 1) {
   MessageBox.show("「はい」が選ばれました。");
}

三つの構成要素は

if
(で囲まれている所
{で囲まれている所

の三つでした。一つ目はそのままなので特に気にせず、2番目と3番目に着目します。

2番目の(で囲まれている所は、(sentaku == 1)となっていますね。 JavasScriptでは、左と右が同じ、という事は==とイコールを二つ書く決まりでした。

つまりこれで、sentakuが1だったら という意味になります。

そしてifは、二番目の(で囲まれている所が正しかったら、三番目が実行される、という事でした。三番目というのは{で囲まれている所、つまり以下のコードになります。

      {
   MessageBox.show("「はい」が選ばれました。);
}

言葉にすると長いですが、以上をまとめると、以下のコードは

if(sentaku == 1) {
   MessageBox.show("「はい」が選ばれました。");
}

sentakuが1だったらMessageBox.show("「はい」が選ばれました。");を実行する

という意味になります。

前半と合わせると、

プレーヤーが「はい」を選んだら、MessageBox.show("「はい」が選ばれました。");を実行する

という意味になります。

どうって事無いコードでも、全部説明すると長いですね。長々とした説明を読むよりも、コードを読む方が楽かもしれません。

説明が良く分からなくても、結局は、以下のコードが何をやってるか分かればいいのです。

// プレイヤーに「はい」か「いいえ」を聞いて
var sentaku = MessageBox.yesNo("最後の戦いだ。準備はいいかい？", "はい", "いいえ");

// 「はい」だった時は以下を実行
if(sentaku == 1) {
   MessageBox.show("「はい」が選ばれました。");
}

ここまで長々と説明してきたのは、ようするにこのコードを理解する為の説明です。なのでこのコードが分かるなら、説明なんて分からなくても問題ありません。

余談ですが、こういうコードは結構ツクールっぽいな、と思うのですが、どうでしょう？

elseをつけよう

ifには、必要ならその後にelseをつける事が出来ます。 elseというのは、「そうじゃなかったら」みたいな意味です。

例を見てみましょう。

結果:

　
さて、実行すると、sentakuは1じゃないです。と表示されたはずです。

ifの所の(の中を見ると、sentaku==1となっています。

if(sentaku == 1) {

でも、今回は二行目で、sentakuに3を入れているので、これは間違っています。間違っている時には、ifの後の{の所は実行されません。

ここまでは既に説明した内容です。

今回違うのは、その後のelseの所です。

if(sentaku == 1) {
   ...
   // 中略
} else {
   MessageBox.show("sentakuは1じゃないです。");
}

ifの所に書いてある事が間違っている時は、elseの方が実行されるのです。

elseの図解

こうして、ifが正しくない時だけ実行する、という事も出来るようになりました。

実はelse ifというものもある
ここまでifとelseを解説しましたが、JavaScriptには実はこの2つの他に、 else ifという物があります。そんなに難しい物でも無いので説明しても良かったのですが、あんまり使わないのでまぁいいか、と思って解説しない事にしました。後の方で使う事になったらその時に解説しますが、使わなかったら必要になるまで知らなくても構わないと思います。
　
else ifは、理論的には使わなくてもifとelseだけで全く同じ事が出来ます。else ifを使わないと実現出来ない事はありません。
また、ifとelseだけしっかり理解していれば、else ifは少しググってみれば何をやっているか、すぐ理解出来ると思います。
　
このシリーズは、いろんな事をざーっと説明するのでは無く、良く使う少数の物だけを詳しくじっくり解説していく、という方針で書いています。基本的な事だけを理解していろいろ書いてみて、ある程度プログラミングという物に慣れた後に、細かい物はまとめて勉強する方がオススメだと思っているからです。（あなたもそう思うから他の入門では無くこのシリーズを見ているのでしょう？）

課題: こちんこちんと言えば？

さて、一通り説明が終わったので、全部使ったような例を二つほど、自分でも書いてみましょう。

まずは「こちんこちん？」と聞かれて、「はい」と答えたら「麦茶！」と表示し、「いいえ」と答えたら「こーしー」と表示するプログラムを作りましょう。途中まで書いてあるので、ifとelseの所だけ書いてください。

結果:

答え:
if(tumetai == 1) {
MessageBox.show("麦茶！");
} else {
MessageBox.show("こーしー");
}

　
なかなか本格的なプログラミングになってきましたね。これを一発で解くのはちょっと大変でしょう。

こういう物はとにかく慣れです。
もう一問、似たような問題をやってみましょう。

課題: あじゃを鳴かせてみよう

次はあじゃを鳴かせてみましょう。といってもあじゃはニワトリか餅か分かりません。

そこでプレーヤーに、「あじゃは何ですか？」と聞きましょう。もし「ニワトリです」と答えたら「コケーーーッ」と鳴き、もし「餅です」と答えたら「ムェーーーー！」と鳴く事にしましょう。

変数を用意しておくので、それを使って下さい。

結果:

答え:
var sentaku = MessageBox.yesNo(message, niwatoriLabel, mochiLabel);

if(sentaku == 1) {
MessageBox.show(niwatoriNakigoe);
} else {
MessageBox.show(mochiNakigoe);
}

　
この課題までくると、もう普通のプログラミングですな。
作る方（つまり私）も大変です(^^;

第四回まとめ

以上でifは終わりです。if自体のむずかしさよりも、その周辺が大変な回だったかもしれませんね。以下に第四回でやった事をまとめてきます。

「はい」、「いいえ」はMessageBox.yesNoでたずねる。
- 文字を三つ指定する
  - 一つ目は表示されるメッセージ
  - 二つ目は「はい」に相当するボタンのラベル
  - 三つめは「いいえ」に相当するボタンのラベル
- プレイヤーが「はい」を選ぶと1が返ってくる -「いいえ」を選ぶと0
プレイヤーの選んだ結果は、変数で受け取る
ifは(と)で囲まれた所があってたら次の{と}を実行する
elseがついてたら、(と)で囲まれた所が間違ってた時に実行される
sentaku==1という風に、==で変数が1かどうかを確認する

最後にifとelseの図解も再掲しておきます。

elseの図解

「はい」か「いいえ」を聞く

課題: 「あじゃはなんですか？」をプレーヤーに質問せよ

選択した結果を、変数で受け取る

結果を「返す」とは

返された結果を、変数で受け取る

課題: プレイヤーが選択した結果に5を足して表示せよ

ifで分岐しよう

はじめてのif (if文の3つの構成要素)

2番目、sentakuが1かどうかは、==でチェックする

3番目、{で囲まれている所

以上を踏まえて全体を見直す

課題: sentakuが5だったら、「sentakuは5です。」と表示せよ。

「はい」と「いいえ」を聞いて対応してみよう

プレーヤーの選択を受け取る（復習)

if文の3つの構成要素（復習)

elseをつけよう

課題: こちんこちんと言えば？

課題: あじゃを鳴かせてみよう

第四回まとめ

2番目、sentakuが`1`かどうかは、`==`でチェックする

3番目、`{`で囲まれている所