【JavaScript】switch文による多岐分岐の制御とフォールスルー活用

2026年1月23日

概要

変数の値が「特定の定数（数値や文字列）」と一致するかどうかを判定し、処理を多方向に分岐させたい場合、if...else if を繰り返すよりも switch 文を使用した方がコードが読みやすくなるケースがあります。本記事では、switch 文の基本構文、必須となる break の役割、そして複数の条件をまとめて処理する「フォールスルー」というテクニックを解説します。

仕様（入出力）

入力: 判定対象となる文字列（例: 商品カテゴリ、ステータスコード）
出力: 条件に一致したメッセージのコンソール出力

基本の使い方

switch (式) { ... } の中に、case 値: というラベルを並べて記述します。式の結果が case の値と**厳密に等しい（===）**場合に、そのラベル以下の処理が実行されます。どの case にも当てはまらない場合の処理は default: に記述します。

コード全文（HTML / JavaScript）

HTML (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch文デモ</title>
    <script src="switch-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>switch文による分岐結果が出力されています。</p>
    </div>
</body>
</html>

JavaScript (switch-demo.js)

基本的な分岐と、複数の値をまとめる応用パターンを含んだコードです。

/**
 * 1. 基本的なswitch文
 * フルーツの種類に応じて値段を表示します。
 */
const checkPrice = (fruitName) => {
    console.log(`--- 商品確認: ${fruitName} ---`);

    switch (fruitName) {
        case "りんご":
            console.log("りんごは 150円 です。");
            break; // 処理をここで終了してブロックを抜ける
            
        case "みかん":
            console.log("みかんは 50円 です。");
            break;

        case "ぶどう":
            console.log("ぶどうは 400円 です。");
            break;

        default:
            // どのcaseにも一致しなかった場合の処理
            console.log("その商品は取り扱っていません。");
            break;
    }
};

checkPrice("りんご");
checkPrice("スイカ");


/**
 * 2. 複数条件のまとめ（フォールスルー）
 * caseを連続して書くことで「OR（または）」のような条件を作れます。
 */
const checkCategory = (item) => {
    console.log(`--- カテゴリ判定: ${item} ---`);

    switch (item) {
        // "apple" または "orange" の場合
        case "apple":
        case "orange":
            console.log("カテゴリ: フルーツ");
            break;

        // "carrot" または "potato" または "onion" の場合
        case "carrot":
        case "potato":
        case "onion":
            console.log("カテゴリ: 野菜");
            break;

        default:
            console.log("カテゴリ: その他");
            break;
    }
};

checkCategory("orange"); // カテゴリ: フルーツ
checkCategory("potato"); // カテゴリ: 野菜

カスタムポイント

比較は厳密等価: switch の比較は === で行われます。入力が数値の 10 なのか、文字列の "10" なのかによって分岐先が変わるため、型を意識する必要があります。
returnとの併用: 関数内で switch を使う場合、break の代わりに return 値; を書くことで、値を返して即座に関数を終了させることができます。この書き方の方がコードが短くなることが多いです。

注意点

breakの忘れ（意図しない通過）: case の終わりに break を書き忘れると、条件が一致した後も次のcaseの処理まで実行してしまいます（これをフォールスルーと呼びます）。意図的な場合を除き、必ず break を記述してください。
スコープの共有: switch ブロック全体でスコープ（変数の有効範囲）は一つです。ある case 内で let x = 1; と宣言すると、別の case で同じ変数名 x は使えません。変数宣言が必要な場合は、case 内を { ... } で囲ってブロックスコープを作ります。

応用

条件判定に式を使う（高度なテクニック）

switch (true) と書くことで、各 case に条件式を書くことができます。ただし、通常は if...else if の方が読みやすいため、乱用は避けましょう。

const score = 85;

switch (true) {
    case score >= 90:
        console.log("評価S");
        break;
    case score >= 70:
        console.log("評価A"); // ここが実行される
        break;
    default:
        console.log("評価B");
}

まとめ

switch 文は、変数の値が「Aか、Bか、Cか…」と決まった選択肢に分かれる場合に威力を発揮します。if 文の羅列よりも構造が見えやすくなりますが、break の書き忘れには十分注意してください。複数の値をまとめて処理したい場合は、あえて break を書かない（case を並べる）手法が有効です。

よかったらシェアしてね！