条件分岐

この章ではif文やswitch文を使った条件分岐について学んでいきます。

if文

if文を使うことで、プログラム内に条件分岐を書くことができます。

if文は次のように構文が基本形となり、条件式の評価結果がtrueであるならば、 実行する文が実行されます。

if (条件式)
    実行する文;

どのような式がtrueとして評価されるかは、Booleanオブジェクトで紹介します。

  • [ ] TODO: Booleanオブジェクトのリンク先がない

実行する文が複数行である場合は、{}で囲みます。 この{}で囲んだ範囲をブロックと呼びます。

if (条件式) {
    実行する文;
    実行する文;
}

次のコードでは year2015 よりも大きな値である場合、 if文の {} で囲まれたブロック内が処理されます。

// 現在の西暦を`year`に代入
const year = new Date().getFullYear();
if (year > 2015) {
    console.log(year);
}

実行する文が1行のみである場合、ブロックは省略が可能ですが、コードの読みにくさに繋がるため常につけることを推奨します。

else if文

複数の条件分岐を書く場合は、if文に続けてelse if文を使うことでできます。 たとえば、次の3つの条件分岐するプログラムを考えます。

  • version が "ES5" ならば "ECMAScript 5" と出力
  • version が "ES6" ならば "ECMAScript 2015" と出力
  • version が "ES7" ならば "ECMAScript 2016" と出力

次のコードでは、if文とelse if文を使うことで3つの条件を書いています。

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文

if文とelse if文では、条件に一致した場合の処理をブロック内に書いていました。 一方、条件に一致しなかった場合の処理は、else文を使うことでできます。

const string = "JavaScript";
if (string.length > 0) {
    console.log(`文字列 "${string}" があります`);
} else {
    console.log("空文字列です");
}

ネストしたif文

if、else if、else文は実行する文としてさらにif文を書きネストできます。

ネストしたif文の例として、今年がうるう年かを判定してましょう。

うるう年の条件は次のとおりです。

  • 西暦で示した年が4で割り切れる年はうるう年です
  • ただし、西暦で示した年が100で割り切れる年はうるう年ではありません
  • ただし、西暦で示した年が400で割り切れる年はうるう年です

西暦で示した年は new Date().getFullYear(); で取得できるため、 この条件をif文で表現すると次のように書くことができます。

const year = new Date().getFullYear();
if (year % 4 === 0) { // 4で割り切れる
    if (year % 100 === 0) { // 100で割り切れる
        if (year % 400 === 0) { // 400で割り切れる
            console.log("うるう年です");
        } else {
            console.log("うるう年ではありません");
        }
    } else {
        console.log("うるう年です");
    }
} else {
    console.log("うるう年ではありません");
}

条件を上から順に書き下したため、ネストが深い文となってしまっています。 一般にネストは少ない方が、読みやすいコードとなります。

条件を少し読み解くと、400で割り切れる年は無条件にうるう年であることがわかります。 そのため、条件を並び替えることで、ネストするif文なしに書くことができます。

const year = new Date().getFullYear();
if (year % 400 === 0) { // 400で割り切れる
    console.log("うるう年です");
} else if (year % 100 === 0) { // 100で割り切れる
    console.log("うるう年ではありません");
} else if (year % 4 === 0) { // 4で割り切れる
    console.log("うるう年です");
} else { // それ以外
    console.log("うるう年ではありません");
}

switch文

switch文は次のような構文を持ち、の評価結果が指定した値である場合に行う処理を並べて書きます。

switch (式) {
    case ラベル1:
        // `式`の評価結果が`ラベル1`と一致する場合に実行する文
        break;
    case ラベル2:
        // `式`の評価結果が`ラベル2`である場合に実行する文
        break;
    default:
        // どのcaseにも該当しない場合の処理
        break;
}
// break; 後はここから実行される

switch文はif文と同様にの評価結果にもとづく条件分岐を扱います。 またbreak文は、switch文から抜けswitch文の次の文から実行するためのものです。 次の例ではversionの評価結果は"ES6"となるため、case "ES6":に続く文が実行されます。

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

これは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("しらないバージョンです");
}

switch文はやや複雑な仕組みであるためどのように処理されているかを見ていきます。 まず switch (式)を評価します。

switch (式) {
    // case
}

次にの評価結果に一致するラベルを探索します。 一致するラベルが存在する場合は、そのcase節を実行します。 一致するラベルが存在しない場合は、default節が実行されます。

switch (式) {
    // if (式 === "ラベル1")
    case "ラベル1":
        break;
    // else if (式 === "ラベル2")
    case "ラベル2":
        break;
    // else
    default:
        break;
}

break文

switch文のcase節では基本的にbreak;を使いswitch文を抜けるようにします。 このbreak;は省略が可能ですが、省略した場合、後ろに続くcase節が条件に関係なく実行されます。

const version = "ES6";
switch (version) {
    case "ES5":
        console.log("ECMAScript 5");
    case "ES6": // 一致するケース
        console.log("ECMAScript 2015");
    case "ES7": // breakされないため条件無視して実行
        console.log("ECMAScript 2016");
    default:    // breakされないため条件無視して実行
        console.log("しらないバージョンです");
}
/*
 "ECMAScript 2015"
 "ECMAScript 2016"
 "しらないバージョンです"
 と出力される
 */

このようにbreak;を忘れてしまうと意図しない挙動となります。 そのため、case節とbreak文が多用されているswitch文が出てきた場合、 別の方法で書かないかを考えるべきサインとなります。

一般にswitch文はif文の代用として使うのではなく、関数と組み合わせて値を返すパターンとして使うことが多いです。

function getECMAScriptName(version) {
    switch (version) {
        case "ES5":
            return "ECMAScript 5";
        case "ES6":
            return "ECMAScript 2015";
        case "ES7":
            return "ECMAScript 2016";
        default:
            return "しらないバージョンです";
    }
}
// 関数を実行して`return`された値を得る
getECMAScriptName("ES6"); // => "ECMAScript 2015"

関数については、n章 で詳しく解説します。

  • [ ] 関数の章を書いたらn章を変更する

参考

results matching ""

    No results matching ""