【JavaScript入門】if…else 文 – 条件による処理の分岐

JavaScript入門として基礎的な内容を引き続き扱っていきましょう。これまで扱ってきた内容は記述したコードを順番に実行していくものでした。

しかし、プログラミングの処理は、何か入力があった時などに条件によって異なる処理を行う必要があります。これを処理の分岐といってプログラミングでは制御構文（制御命令）などと言います。

ここではその制御構文の一つのif文について扱っていきます。

MDNのページに制御構文は次のようにまとめられています。if-else文も入っています。

JavaScript アプリケーションは、適切な構文で書かれた文から構成されます。ひとつの文が数行に渡る場合もあります。また複数の文それぞれがセミコロンで区切られていれば 1 行となる場合もあります。そのキーワードはひとつではなく、キーワー...

では、if文についてみていきましょう。

if 命令
if…else文
まとめ

if 命令

if文はこの単語の意味するように「もし…だったら」ということでここに条件式を指定し、この条件に合致、つまりture/falseのtrueである時に処理をおこなう命令になります。

次のような構文になります。

if (条件式) {
  条件式がtrueの時に実行する命令文;
}

if文を使って簡単なコードを書いてみましょう。

var name = 'エドワード・エルリック';
var job = '国家錬金術師';

if (job === '国家錬金術師') {
    console.log(name + 'は国家錬金術師です。');
}

変数を2つ用意しています。

if文の丸括弧()の中の条件式がここでは一致しています。イコール(=)を三つ連ねていますが、これは条件式の左右のデータ型が完全に一致することまで判定しています。（たとえば数字の1と文字列の’1’は違うということです。これはイコール2つで判定するとtrueに判定するというイコールの使い方に違いがあります）

波括弧{}で囲まれた部分をブロックといい、この中に処理する命令文を書いています。ここでは条件式がtrueなのでJavaScriptコンソールには次のようにブロック内の命令文が実行されて表示されます。

では、if文の条件式を次のように変更してみます。

var name = 'エドワード・エルリック';
var job = '国家錬金術師';

if (job === '機械鎧整備士') {
    console.log(name + 'は国家錬金術師です。');
}

これを実行すると、条件式がfalseになるので、JavaScriptコンソールには何も表示されません。

この条件式がfalseになった場合の処理を加えることにします。

if…else文

if文の条件式がfalseであった時の処理を加えてみましょう。それにはelseを追加して処理のブロックを記述します。

次のような構文になります。

if (条件式) {
  条件式がtrueの時に実行する命令文;
} else {
  条件式がfalseの時に実行する命令文;
}

先ほどのコードを次のように変えてみましょう。

var name = 'エドワード・エルリック';
var job = '国家錬金術師';

if (job === '機械鎧整備士') {
    console.log(name + 'は国家錬金術師です。');
} else {
    console.log(name + 'は機械鎧をウィンリィに整備してもらっています。');
}

else文と新たなブロックを記述しています。

if文の条件式はfalseのままのコードなので、実行するとelse文のブロックが実行されることになります。

JavaScriptコンソールには次のように表示されます。

elseのブロックが実行されているのがわかります。

条件式の部分はイコールで結ばない場合の方法もあります。

次のようなコードに変更してみます。

var name = 'エドワード・エルリック';
var job = '国家錬金術師';
var isMale = true;

if (isMale) {
    console.log(name + 'は男性です。');
} else {
    console.log(name + 'は男性ではありません。');
}

isMaleという変数を作って、それ自体をここではtrueにしています。

この変数自体がture/falseで判定されて命令文が実行されることになります。

ここでは次のような結果になります。

if-else文はelse if文で新たに条件式を複数作ることによって、複数の分岐を作ることができます。ここでは構文だけ示しますので、自分なりにコードを作ってみるといいでしょう。

if (条件式1) {
  条件式1がtrueの時に実行する命令文;
} else if (条件式2) {
  条件式2がtrueの時に実行する命令文;
}
…
} else if (条件式n) {
  条件式nがtrueの時に実行する命令文;
} else {
  全ての条件式が当てはまらずfalseの時に実行する命令文;
}

また、if-else文は入れ子構造にすることができ、複雑な条件分岐をすることも可能です。

このあたりはこれから触れる内容が増えていく中で出てくると思います。