2022/05/09(月) JSprimer(条件分岐) - 日々の積み上げブログ

条件分岐

条件分岐を使うと、特定の条件を満たすかどうかで行う処理の流れを分岐できます。
条件分岐を行うには、if文またはswitch文を使います。

if文

if文は、丸括弧内()の条件式がtrueと評価されるtruthyな値の場合、それに続くブロック{}内の処理が実行されます。ただし、条件式がfalseと評価されるfalsyな値の場合は、ブロック{}内の処理は実行されず、if文の次の行に処理が進みます。

if (条件式) {
    実行する文; // 条件式がtruthyの場合実行する文(falsyの場合実行されない)
}

実行する文が1行のみの場合は、{ }のブロックを省略できますが、どこまでがif文かを明確にするためにも常にブロックで囲むようにしましょう。

const x = 42;
// 条件式x > 10に当てはまるかどうかで処理を分岐している
if (x > 10) { // x > 10の条件式がtrueと評価されるtruthyな値であるため、以下の処理が実行されます。
    console.log("xは10より大きな値です");
}

const truthy = "truthyな値です。";

if ( truthy ) {
    console.log("条件式に渡された値は、truthyです。");
} else {
    console.log("条件式に渡された値は、falsyです。");
}

if文の条件式には、比較演算子などが使われ、その比較結果によって処理を分岐したい時などに使います。
if文の条件式に文字列や数値などの真偽値以外の値が単純に渡された場合には、その値を暗黙的に真偽値へ変換してから、条件式として判定します。(truthyかfalsyかを判定)
- truthyならtrueと変換されます。
- falsyならfalseと変換されます。以下は、falseと変換されるfalsyな値7つ。
  - false
  - undefined
  - null
  - 0
  - 0n
  - NaN
  - ""（空文字列）

// falsyな値を条件式に指定した場合は、falseと変換されるためif文のブロック文は実行されません。
if (false) {
    // この行は実行されません
}
if ("") {
    // この行は実行されません
}
if (0) {
    // この行は実行されません
}
if (undefined) {
    // この行は実行されません
}
if (null) {
    // この行は実行されません
}

else if文

if文に続けてelse if文をつなげて記述することで、複数の条件式を使った条件分岐を作成できます。

if(条件式A) {
    console.log('ifブロック'); // 条件式Aがtrueと評価された場合に実行されるブロック
}else if(条件式B){
    console.log('else ifブロック');  // 条件式Aがfalseと評価されたかつ、条件式Bがtrueと評価された場合に実行されるブロック
}

else文

if文の条件式がfalseと評価され、条件に一致しなかった場合の処理は、else文を使うことで書くことができます。

const num = 1;
if (num > 10) { // 条件式で、変数numの数値が10より大きいかを判定
    console.log(`numは10より大きいです: ${num}`);　// 条件式がtrueと評価された場合、実行されるブロック
} else {
    console.log(`numは10以下です: ${num}`); // 条件式がfalseと評価された場合に実行されるブロック
}

switch文

switch文は、条件式の評価結果が指定した値である場合に実行する処理を並べて記述することができます。if文と同様に評価結果の値によって、処理を分岐することができます。

const version = "ES6";
switch (version) {
    case "ES5": // if (version === "ES5")が行われている
        console.log("ECMAScript 5");
        break;
    case "ES6":  // versionの評価結果は"ES6"となるため、case "ES6":に続く文が実行
        console.log("ECMAScript 2015");
        break;
    case "ES7":
        console.log("ECMAScript 2016");
        break;
    default:
        console.log("しらないバージョンです");
        break;
}
// "ECMAScript 2015" と出力される

switch文をif文で記述したバージョン

const version = "ES6";
if (version === "ES5") {
    console.log("ECMAScript 5");
} else if (version === "ES6") {
    console.log("ECMAScript 2015");
} else if (version === "ES7") {
    console.log("ECMAScript 2016");
} else {
    console.log("しらないバージョンです");
}
// "ECMAScript 2015" と出力される

一致する条件式の値がcase節のどれにも一致しない場合は、default節が実行されます。
条件式の評価結果とcase節の値は、厳密等価演算子(===)を使って値の比較を行い、値が一致するか調べています。
厳密等価演算子(===)を使っているため、値の型の一致まで求められます。
switch文のcase節では、最後にbreakというキーワードを使うことが一般的です。break文は、case節の1つに当てはまる処理が実行できた場合にswitch文のブロックから抜けて、switch文の次の処理に移るためのものです。

break文

switch文のcase節では基本的にbreak;を使って当てはまる処理実行後にswitch文を抜けるようにします。このbreak;を省略した場合、後ろに続くcase節が条件式の結果に関係なく実行されます(trueでもfalseでも実行)。

const version = "ES6";
switch (version) { 
    case "ES5":  // (version === "ES5")はfalseと評価されるため、以下の処理は実行されない
        console.log("ECMAScript 5");
    case "ES6": // 一致するケース
        console.log("ECMAScript 2015");
        // break; ここにbreak文を記述すれば、以降の処理は実行されずに済む
    case "ES7": // breakされないため条件無視して実行
        console.log("ECMAScript 2016");
    default:    // breakされないため条件無視して実行
        console.log("しらないバージョンです");
}
/*
 "ECMAScript 2015"
 "ECMAScript 2016"
 "しらないバージョンです"
 と出力される
 */

一致するケース実行後にbreak文を記述していないと以降のcase文が条件を無視して実行されてしまうので注意が必要です。
case節とbreak文が多用されているswitch文は、if、elseを使って書き換える方法も検討しましょう。

まとめ

if文、else if文、else文で条件分岐した処理を扱える
条件式に指定した値は真偽値へと変換してから判定される
真偽値に変換するとfalseとなる値をfalsyと呼ぶ
switch文とcase節、default節を組み合わせて条件分岐した処理を扱える
case節でbreak文しない場合は引き続きcase節が実行される

参考

JSPrimer-条件分岐