caseを使った条件分岐の実装とswitch文の応用をわかりやすく解説

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

caseの概要

caseの基本的な使い方

switch 文のカッコ内に「調べたい変数」を入れ、その下に case 値: という形で選択肢を並べます。
各 case の処理の末尾には、通常 break;（ブレイク）を記述して、処理が終わったら switch 文の箱から外へ脱出するように命令するのが基本ルールです。
以下は、変数の中身に応じて表示するメッセージを切り替える基本的な例です。

// 基本的なswitch文とcaseの使用例
const fruit = "banana";

// fruit（中身はbanana）を評価します
switch (fruit) {
    case "apple":
        console.log("リンゴです。");
        break; // 一致しないのでスキップされます
    case "banana":
        console.log("バナナです。"); // ⭕ ここが一致！処理が実行されます
        break; // 処理を終えたので、switch文全体の出口（21行目の外）へワープします
    case "orange":
        console.log("オレンジです。");
        break;
    default:
        console.log("不明な果物です。"); // どのcaseにも該当しない場合の部屋
}

// 出力: バナナです。

• switch文は指定された変数や値を一度だけ評価し、合致する case ラベルへと案内人のようにプログラムを誘導します。
• break を各 case の最後に記述することで、目的の処理だけをピンポイントに実行し、関係のない他の case の部屋に侵入するのを防ぎます。

複数のcaseで同じ処理を実行する（フォールスルーの応用）

もし「土曜日」でも「日曜日」でも同じく「休日です」と表示させたい場合など、複数の条件で完全に同一の処理を行わせたいときは、case を途中で区切らずに連続して並べます。
あえて break を書かずに次の行へ突き抜けさせるこの挙動を「フォールスルー」と呼びます。

// 複数のcaseを合体させて同じ処理を行う例
const day = "土曜日";

switch (day) {
    case "土曜日": // ❗ breakがないため、次のcaseへと処理がそのまま流れ込みます
    case "日曜日":
        console.log("休日です！"); // 土曜日・日曜日のどちらでもこれが実行されます
        break; // ここで初めてswitch文を脱出します
    default:
        console.log("平日です。");
}

// 出力: 休日です！

• 複数の case を縦に並べることで、if (day === "土曜日" || day === "日曜日") と同じような「または（OR）」の条件分岐をスッキリと表現できます。
• break が置かれるまでプログラムは下へ下へと走り続けるため、意図しない突き抜けバグ（書き忘れ）が起きないよう注意が必要です。

caseに式を使用する（高等テクニック）

通常、case は「値」を固定で指定しますが、switch のカッコ内に変数ではなく true という真偽値を渡し、case 側に age < 13 のような「条件式」を記述するという応用技があります。
これを使うと、範囲（〜以上、〜未満）を用いた複雑な分岐も switch 形式できれいに整理できます。

// caseの中で条件式を評価する応用例
const age = 18;

// 各caseの式が「true（正しい）」になる部屋を探します
switch (true) {
    case age < 13:
        console.log("子供です。");
        break;
    case age >= 13 && age < 20:
        console.log("ティーンエイジャーです。"); // ⭕ 18はここの条件式がtrueになります！
        break;
    case age >= 20:
        console.log("成人です。");
        break;
    default:
        console.log("年齢がエラーです。");
}

// 出力: ティーンエイジャーです。

• switch(true) という特殊な形をとることで、各 case の条件式が上から順番に計算され、最初に見つかった「正しい（真の）部屋」が実行されます。
• 複数の数値範囲で細かくランク分けを行うようなロジックにおいて、インデントが深く複雑になりがちな if...else if 文を劇的にスマートに書き直すことができます。

注意点

• breakの省略に注意（意図しない突き抜け）: case の処理で最も多い致命的なバグが、break; の記述忘れです。
  これを忘れると、条件に一致した部屋の処理が終わった後、下にある次の case の処理まで勝手に巻き添えで実行されてしまいます。

  // ❌ NGな例：breakを忘れると悲惨な突き抜けバグになります
  const mode = "save";
  switch (mode) {
      case "save":
          console.log("データを保存しました。"); // ⭕ 実行されるがbreakがない！
      case "delete":
          console.log("データを削除しました！"); // 🛑 意図せずこちらも実行されてしまいます！
  }
  

• defaultの推奨: 「想定される条件値はこれだけだから大丈夫」と思っていても、ネットワーク通信の不具合などで予期せぬデータが紛れ込むことがあります。
  原因不明の動作不良を放置しないためにも、すべての case の一番最後には必ず default を記述し、エラーログを出すなどの安全対策を施すのが堅牢なコードへの近道です。
• 一致は厳密比較（===）: case の値が一致しているかを判定する際、JavaScriptの内部では ===（厳密比較）という仕組みが使われます。
  これは「値」だけでなく「データ型（文字列か数値か）」まで完全に一致していなければならないため、数字の 10 と 文字列の "10" は別物として弾かれる点に注意してください。

  // ❌ 型が違うと case をすり抜けてしまいます
  const count = "3"; // 文字列の「3」
  switch (count) {
      case 3: // 数値の「3」なので、型が異なり不一致とみなされます
          console.log("3点です"); // 実行されません
  }
  

よくある質問

Q: case（switch文）と if...else 文は、どのように使い分けるのがベストですか？

A: 判断基準は「比較したい条件の切り口」です。
1つの同じ変数を対象にして、"A"、"B"、"C" と具体的な値を何パターンも等価比較していくような場合は、switch...case を使うと縦に綺麗に並ぶため圧倒的に読みやすくなります。
一方で、「Aが10以上、かつBがtrueで、かつCが特定の文字ではない」というように、複数の異なる変数を複雑に掛け合わせた条件式を書きたい場合は、if...else 文の独壇場となります。

Q: case の中で let や const を使って新しい変数を宣言するとエラーになることがあるのですが、なぜですか？

A: switch 文全体は、複数の case を含めて実は「1つの大きな同じ部屋（同じスコープ）」として扱われているからです。
そのため、上の case で定義した変数名を、下の case でもう一度再宣言しようとすると名前の衝突エラーが発生してしまいます。
各 case の中だけで使える独立した変数を作りたい場合は、各 case の中身を波カッコ { } で囲って小さな個室を作ってあげることで解決できます。

// caseの中に個別の波カッコ { } を作ってエラーを回避する例
switch (type) {
    case "text": {
        const message = "こんにちは"; // 波カッコ内だけの変数になります
        console.log(message);
        break;
    }
    case "number": {
        const message = 12345; // 名前が被ってもエラーになりません
        console.log(message);
        break;
    }
}

Q: break の代わりに return を使って case を終わらせることは可能ですか？

A: はい、その switch 文が「関数（function）の内部」に書かれている場合であれば、break の代わりに return を使うことができます。
return は case の終了と同時に、関数そのものをその場で完全に終了させて値を返してくれるため、break を書く必要すらなくなり、突き抜けバグも発生しないため、実務でも非常に推奨されるクリーンなテクニックです。

// returnを使ったスマートなcase終了の例
function getSignalColor(status) {
    switch (status) {
        case "go": return "緑色"; // breakを省略して即座に関数を終了・納品できます
        case "stop": return "赤色";
        default: return "黄色";
    }
}

まとめ

caseは、たくさんの候補値の中から特定の1つを選び出して的確に処理を振り分ける、条件分岐の整理整頓に欠かせないキーワードです。

• 処理の終着点には必ず break（または関数の場合は return）を忘れずに記述して、プログラムの予期せぬ突き抜け事故を未然に防ぎましょう。
• 同じ処理を適用したい条件が複数あるときは、あえて break を挟まずに case ラベルを縦に並べることで、綺麗に処理を合流させることができます。
• 型までシビアに一致させる厳密比較（===）のルールや、switch(true) を用いた範囲評価などの応用技をマスターし、不具合に強いスマートなプログラムを構築していきましょう。