超入門 JavaScript ⑦　～制御構文（if）～

前回の超入門⑥では、関数についていったん終了としました。
関数はJavascriptという言語においては、最重要の概念なので、入門編を終えてからも折に触れて解説を加えていきます。

さて、今回からいよいよ制御構文に入っていきます。
プログラミングの制御構文は、多くの言語でほとんど同じです。
基本的には、以下の３種類しかないと思って問題ありません。

①　順次
②　分岐
③　回帰（繰り返し）

①の順次とは、プログラムの命令が記述されている順に上から下へ流れていく制御です。
サンプルを掲載すると、以下のようになります。

今回のメインは②の分岐です。
分岐とは、ある条件によって、実行する処理を分けたいときに使います。
例えば、

もしも、年齢が２０歳以上であれば、「アルコール解禁！」とアラートし、
そうでなければ「アルコールNG」とアラートする

というプログラムにするとしたら、コードは以下のようになります。

var age = 20;

if (age >= 20) {
 alert('アルコール解禁！');
} else {
 alert('アルコールNG');
}

先頭の行は、変数宣言と初期値の代入ですね。
２０を代入し、２０歳である前提でプログラムしています。
その次の if から始まる１行目が、「もしも〇〇が△△だったら」の条件部分です。
今回の場合は、「年齢が２０歳以上なら」としたいので、
age >= 20
という条件式になっています。
この条件に該当した場合は、中カッコ「{ }」内の処理が実行されるので
「アルコール解禁！」がアラートされることになります。
else とは、if で指定された以外の条件です。

では、このプログラムに機能を追加してみましょう。
以下の仕様に変更するよう顧客から依頼が来たというストーリーです。

年齢が２０歳未満なら「アルコールNG」と表示するのは変わらず。
６０歳以上なら「健康のためアルコールは控えましょう」を表示する。
それ以外は「アルコール解禁！」と表示する。

さあ、条件が増えました。

var age = 20;

if (age < 20) {
 alert('アルコールNG');
} else if (age >= 60) {
 alert('健康のためアルコールは控えましょう');
} else {
 alert('アルコール解禁！');
}

と、このようになります。
特筆すべきは else if の部分ですね。
「それ以外で、もし」という追加の条件を表しています。
このようにして、複数の条件により処理を分岐させることができるわけです。

では、あと２つバリエーションを解説しておきましょう。

年齢が２０歳未満あるいは６０歳以上であれば、「アルコールNG」を表示する。
それ以外は「アルコール解禁！」と表示する。

上記の仕様だった場合どうなるかを例示します。

var age = 20;

if (age < 20 || age >= 60) {
 alert('アルコールNG');
} else {
 alert('アルコール解禁！');
}

と、このようになります。
条件が、「〇〇 または △△」という状況を表したい時は、
パイプ「|」を２つ並べて「または（OR）」を表現します。

最後に、「〇〇 且つ △△」という状況を表したい時は、
アンパサンド「&」を２つ並べて「且つ（AND）」を表現します。
以下に仕様とサンプルプログラムを掲載します。

年齢が２０歳以上で、且つ性別が男性であれば、
「あなたは成人の男性です。」と表示する。

var age = 20;    // 年齢
var gender = 1;  // 性別（男：１、女：２）

if (age >= 20 && gender == 1) {
 alert('あなたは成人の男性です。');
} 

駆け足で制御構文の第一弾「分岐」を紹介しました。

内容も難しくなった上に、そこそこボリュームも大きいため大変だったのではないかと思います。

変数 age を変えて動かしてみたり、最後のサンプルは gender も変えてみるなどして理解を深めてみてもらえると良いと思います。

次回は、今回なにげなく使っていた「 >」や「==」など、
比較演算子について、種類や意味を解説します。

それでは良いプログラミング・ライフを！