スマホ対応 誰でも簡単プログラミング講座 p3 処理の切り替え:条件分岐[初心者向けJavaScript解説 初級編]
プログラミングをしていると、ほぼかならず状況に応じて処理を切り替えなければならない場面に出くわすことになります。
その切り替えの方法が「条件分岐」と呼ばれるものです。
読んで字のごとく、処理の流れを「分岐」（枝分かれ）させるための「条件」を設定するということです。
より厳密にいうと、特定の条件下でのみ処理を実行する/しないを設定することです。
現実では、条件を指定する場合「もし～なら」と仮定することが多いですよね。
これと同じように、プログラミング言語でも「if」を使います。
そして、条件の指定に前回学んだ比較などを指定します。
if (2 > 1) {
var a = 2 + 1;
console.log(a);
}
見てわかるとおり、ifに続けて丸カッコ( )の内側に条件を書き、その後波カッコ{ }の内側に条件が合う場合の処理を書きます。
内部の記述をインデントしていますが、これはしてもしなくてもかまいません。
ただ、ほとんどの場合、このようにタブか半角スペースでインデントします。
どれだけインデントするかは自由ですが、自分だけでなく他の人にとっても見やすいように意識しましょう。
では、実行してみましょう。
「3」が出力されたと思います。
条件をいろいろ切り替えてみると、それがfalseとなる場合には出力が何もないことがわかります。
こうした条件の指定には、もちろん変数を利用することも可能です。
var condition = 2 > 1;
if (condition) {
var a = 2 + 1;
console.log(a);
}
条件に合わない場合の処理
それでは、ifで指定した条件に合わなかった場合に別の処理をさせたいときは、どうしたらいいのでしょうか。
そのために「else」というものがあります。
「～の他に」という意味ですね。
これを、ifの処理を書いた波カッコの終わりに続けて、次のように書きます。
if (2 < 1) {
var a = 2 + 1;
console.log(a);
}else {
var b = 3 + 2;
console.log(b);
}
ifの条件がfalseになるようにして実行してみると、if側の処理が無視され、else側のみ実行されて、数値の「5」が出力されたと思います。
もし逆に、ifの条件がtrueでそちらの処理が実行された場合、elseの側の処理は実行されません。
また、このelseは、あくまでifとセットで使うためのものです。
単独では使えませんので、注意してください。
別の条件の指定
ifで先に指定した条件とは別の条件を指定して、別の処理をしたいときにはどうしたらいいのでしょうか。
そのためにあるのが「else if」です。
elseがついていることからもわかるように、先に指定したifの条件と合わない場合＝それがfalseだった場合に、さらに別の条件を指定して処理の切り替えをすることができます。
var condition = -1;
if (condition > 1) {
var a = 2 + 1;
console.log(a);
}else if (condition <= 0) {
var c = 1 - 2;
console.log(c);
}else {
var b = 3 + 2;
console.log(b);
}
elseと異なり、else ifは複数設定することができますが、
上から順に条件の確認がされ、一番初めにその条件がtrueだった部分のみ実行されます。
これも、変数conditionの値や各条件をいろいろ変えて試してみましょう。
入れ子
このif、else if、elseでは、その内部の処理でさらにifによる条件分岐を使うことができます。
つまり、入れ子にできるということです。
if (2 > 1) {
var a = 2 + 1;
console.log(a);
if (3 <= 4) {
var d = 3 * 4;
console.log(d);
}
}
この場合、最初のifの条件がtrueで次のifもtrueであったときのみ、最も内側の「{ }」（波カッコ）内の処理が行われます。
つまり、変数「d」の値「12」が2番目に出力されることになります。
まとめ
今回行ったifによる処理の切り替えも、基本的にはシンプルです。
しかしこれにより、あなたはプログラミングにおいて最も重要な要素のひとつを習得することができました。
たとえばアプリをつくる際、ユーザーの入力に応じて処理を切り替えるといったことが可能となったのです。
初めてifについて知ったという人は、その足掛かりを手に入れたことになります。