switch文の落とし穴集（全5例）
switch 文はシンプルに見えて、実務や学習でよく起きる「罠（バグ）」が多い構文です。
ここでは、JavaScript の switch で初心者〜中級者が実際に陥りやすい「落とし穴」5選を、コード例＋出力結果＋原因＋修正版で詳しく解説します。
⚠️ 落とし穴1：break を忘れてフォールスルーする
❌ NGコード
let color = "red";
switch (color) {
case "red":
console.log("赤です");
case "blue":
console.log("青です");
break;
default:
console.log("不明な色です");
}
▶ 実行結果
赤です
青です
❗ 問題点
breakを忘れたため、case "red"のあとに 次の case “blue” まで実行されてしまいました。- 意図せず複数の処理が走る → ロジックバグ。
✅ 修正版
switch (color) {
case "red":
console.log("赤です");
break; // ← 忘れない！
case "blue":
console.log("青です");
break;
default:
console.log("不明な色です");
}
⚠️ 落とし穴2：型が違うと一致しない（=== 比較）
❌ NGコード
let num = "1";
switch (num) {
case 1:
console.log("数値の1です");
break;
default:
console.log("一致しません");
}
▶ 実行結果
一致しません
❗ 問題点
switchの比較は 厳密等価（===）。"1"（文字列）と1（数値）は違う型なので一致しません。
✅ 修正版
switch (Number(num)) {
case 1:
console.log("数値の1です");
break;
default:
console.log("一致しません");
}
または、値の型をそろえる（比較する前に変換）こと。
⚠️ 落とし穴3：default がないため「何も起きない」
❌ NGコード
let fruit = "mango";
switch (fruit) {
case "apple":
console.log("りんごです");
break;
case "banana":
console.log("バナナです");
break;
}
▶ 実行結果
（何も出力されない）
❗ 問題点
fruitが"mango"の場合、どのcaseにもマッチせず、defaultもないため何の処理も行われない。
✅ 修正版
switch (fruit) {
case "apple":
console.log("りんごです");
break;
case "banana":
console.log("バナナです");
break;
default:
console.log("そのフルーツは対応していません");
}
⚠️ 落とし穴4：同じ値の case を重複させてしまう
❌ NGコード
let pet = "dog";
switch (pet) {
case "dog":
console.log("犬です");
break;
case "cat":
console.log("猫です");
break;
case "dog": // ← 重複！
console.log("もう一度犬です");
break;
default:
console.log("不明");
}
▶ 実行結果
犬です
❗ 問題点
- 同じ
caseラベル（”dog”）が複数あっても、
最初に出てきた方しか評価されません。
→ 2つ目の"dog"は永遠に実行されません。
✅ 修正版
switch (pet) {
case "dog":
console.log("犬です（1回だけ）");
break;
case "cat":
console.log("猫です");
break;
default:
console.log("不明");
}
⚠️ 落とし穴5：範囲判定に switch をそのまま使おうとする
❌ NGコード
let score = 85;
switch (score) {
case score >= 90:
console.log("A");
break;
case score >= 70:
console.log("B");
break;
default:
console.log("C");
}
▶ 実行結果
C
❗ 問題点
case score >= 90は「score >= 90の結果（true/false）」を評価している。switch(score)の値（85）とtrue/falseは一致しない。- どの
caseにもマッチしないため、defaultが実行されてしまう。
✅ 修正版1（if/else if を使う）
if (score >= 90) {
console.log("A");
} else if (score >= 70) {
console.log("B");
} else {
console.log("C");
}
✅ 修正版2（switch(true) テクニック）
switch (true) {
case score >= 90:
console.log("A");
break;
case score >= 70:
console.log("B");
break;
default:
console.log("C");
}
まとめ：switch の落とし穴対策リスト
| 落とし穴 | 原因 | 対策 |
|---|---|---|
| ① break忘れ | フォールスルー発生 | 各case末尾にbreakを書く（意図的な連結は明示） |
| ② 型不一致 | 厳密比較（===） | 比較前に型変換／統一 |
| ③ defaultなし | マッチしないと無出力 | 必ずdefaultでフォールバック処理を書く |
| ④ case重複 | 最初のcaseのみ有効 | 重複を避け、意図的にまとめる場合は fall-through を使う |
| ⑤ 範囲判定 | caseに条件式は不適切 | if/elseまたはswitch(true)を使う |
💡 実務的補足
- 大規模ロジックでは、
switchよりオブジェクトマップ{key: value}を使う方が安全で保守しやすいこともあります。
const colorMap = { red: "赤", blue: "青" };
console.log(colorMap[color] ?? "不明");
