JavaScriptの条件分岐｜if文・else文・switch文の使い方を初心者向けに解説

JavaScriptのプログラムは通常、上から順番に処理されます。しかし、実際のアプリケーションでは「条件によって処理を変えたい」場面が必ず出てきます。

そのときに使うのが 条件分岐 です。JavaScriptでは主に次の2つの構文を使います。

if ～ else 構文（2通り以上の処理を分岐）
switch ～ case 構文（複数の選択肢から処理を分岐）

if ～ else 構文（条件が真か偽かで処理を分ける）

if文は、条件が true（真） の場合に処理を実行し、false（偽） の場合は else の処理を実行します。

if (条件) {
処理A; // 条件が真のとき
} else {
処理B; // 条件が偽のとき
}

else を省略して「条件が真のときだけ処理する」書き方もできます。

else if を使って条件を増やす

複数の条件を順番に判定したい場合は else if を使います。

if (条件1) {
    処理1;
} else if (条件2) {
    処理2;
} else {
    処理3;
}

複数行の処理は { } で囲む（ブロック）

if文は「直後の1行だけ」を処理します。複数行の処理をまとめたい場合は { } で囲みます。

if (条件)
処理1; // これだけ実行される
処理2; // 条件に関係なく実行される

if (条件) {
処理1;
処理2; // 条件が真のとき両方実行
}

実例：時間帯によって挨拶を変える

today = new Date();
h = today.getHours();

if ((h > 5) && (h <= 10)) {
    document.write(“おはようございます。”);
} else if ((h > 10) && (h <= 17)) {
    document.write(“こんにちは。”);
} else {
    document.write(“こんばんは。”);
}

document.write(“ただいま” + h + “時です。”);

switch ～ case 構文（複数の選択肢から処理を分岐）

switch文は、条件の値に応じて複数の処理から1つを選ぶときに使います。

switch (値) {
    case 値1:
        処理1;
        break;

    case 値2:
        処理2;
        break;

default:
その他の処理;
}

break を書かないと次の case に処理が流れてしまうので注意しましょう。

実例：曜日によってメッセージを変える

today = new Date();
switch (today.getDay()) {
    case 0: // 日曜
        document.write(“今日は日曜!寝てる?遊びに行く?”);
        break;

    case 6: // 土曜
        document.write(“明日は日曜日!計画は万全だよね?”);
        break;

default: // 平日
document.write(“お仕事がんばってください!”);
}

まとめ

if文は「条件が真か偽か」で処理を分ける
else if で条件を増やせる
複数行の処理は { } で囲む
switch文は「値に応じて複数の処理から選ぶ」構文
break を忘れると意図しない処理が実行される

【JavaScript入門】条件分岐の基本｜if文・else文・switch文の使い方を初心者向けに解説