switch 文を一言でいうと
switch 文は、
「1つの値に対して、“いくつもの候補”の中からどの処理をするか選ぶための条件分岐」 です。
同じ変数を何度も if (x === "A") ... else if (x === "B") ... と書く代わりに、
switch (値) {
case 候補1:
// ①
break;
case 候補2:
// ②
break;
default:
// どれにも当てはまらないとき
}
JavaScriptという形で、「値ごとの分岐」をスッキリ書けます。
ここが重要です。
if 文は「条件式(比較や大小)」を自由に書くのに向いていて、
switch 文は「同じ値に対して、候補パターンがたくさんあるとき」に向いています。
「これは if のほうが素直か? switch のほうが読みやすいか?」を選び分ける感覚が大事です。
switch 文の基本構造
基本の形と流れ
もっと具体的に書くと、switch 文の基本形は次のようになります。
switch (expression) {
case 値1:
// 値1と一致したときの処理
break;
case 値2:
// 値2と一致したときの処理
break;
default:
// どのcaseとも一致しなかったときの処理
}
JavaScript流れはこうです。
expression(かっこの中の式)を評価する- 上から順に
case 値:と比較していき、一致したところから処理が始まる - 通常は、処理の最後に
break;を書いて、そのswitchから抜ける - どの
caseにも一致しなかった場合、defaultがあればその中が実行される
default は「どの候補にも当てはまらなかったとき」用の、いわば else 的なポジションです。
if / else と書き比べたときの違い
例えば「色の名前に応じてメッセージを変える」コードを if / else で書くとこうなります。
const color = "red";
if (color === "red") {
console.log("赤です");
} else if (color === "blue") {
console.log("青です");
} else if (color === "green") {
console.log("緑です");
} else {
console.log("その他の色です");
}
JavaScriptこれを switch 文で書き直すと、
const color = "red";
switch (color) {
case "red":
console.log("赤です");
break;
case "blue":
console.log("青です");
break;
case "green":
console.log("緑です");
break;
default:
console.log("その他の色です");
}
JavaScriptどちらも意味は同じです。
ただ、「同じ変数 color を何度も比較している」場合は、switch のほうがスッキリ見えることが多いです。
ここが重要です。
switch 文は、「1つの値」に対して「候補がたくさんある if / else if / else」を、読みやすく並べ替えた形だと捉えてください。
その値が color、role、type のような「カテゴリ」を表すときに、とても相性が良くなります。
case と break の役割(ここを深掘り)
case は「この値のとき」のラベル
case は「この値のとき、ここから処理を始めてね」というラベルです。
const num = 2;
switch (num) {
case 1:
console.log("1です");
break;
case 2:
console.log("2です");
break;
case 3:
console.log("3です");
break;
default:
console.log("1〜3以外です");
}
JavaScriptnum が 2 の場合、
switch (num)→ 2case 1:→ 一致しないcase 2:→ 一致する → ここから処理を実行"2です"を表示break;に到達したので switch を抜ける
という動きになります。
なぜ break が必要なのか(フォールスルー)
break を書かないとどうなるか、わざと省いてみます。
const num = 2;
switch (num) {
case 1:
console.log("1です");
case 2:
console.log("2です");
case 3:
console.log("3です");
default:
console.log("1〜3以外です");
}
JavaScriptnum が 2 のとき、実行結果はこうなります。
2です
3です
1〜3以外です
理由は、「一致した case から下に向かって、break に出会うまで全部実行」されるからです。
この挙動を「フォールスルー(落ちていく)」と呼びます。
初心者のうちは、意図せずフォールスルーが起きると、かなり混乱します。
なので、基本的には「毎回必ず break; を書く」ことを習慣にしておく と安全です。
ここが重要です。
switch 文の落とし穴のほとんどは「break の付け忘れ」です。
「case が終わったら抜ける」がデフォルトではなく、「抜けたいなら自分で break と書くもの」 だと強く意識してください。
default の役割(if / else でいう else)
どの case にも当てはまらないときの処理
default は、どの case にもマッチしなかったときに呼ばれます。
if / else でいう else の役割です。
const command = "update";
switch (command) {
case "create":
console.log("新規作成します");
break;
case "delete":
console.log("削除します");
break;
default:
console.log("不明なコマンドです");
}
JavaScriptcommand が “create” なら “新規作成します”、
“delete” なら “削除します”、
それ以外(”update” など)なら “不明なコマンドです” になります。
default は省略することもできますが、
「予期しない値が来たときにエラーを出したい」「ログに残したい」といった場面では、
書いておいたほうがデバッグがしやすくなります。
ここが重要です。
default は「想定外の値に対する最後の砦」です。
「ここに来ることはほぼないはずだけど、来たら気づきたい」処理を置く場所、と考えるといいです。
簡単な実用例で switch を掴む
例1:曜日によってメッセージを変える
const day = "Mon";
switch (day) {
case "Mon":
console.log("月曜日です");
break;
case "Tue":
console.log("火曜日です");
break;
case "Wed":
console.log("水曜日です");
break;
default:
console.log("その他の曜日です");
}
JavaScriptday が “Mon” なら「月曜日です」、
“Wed” なら「水曜日です」、
それ以外なら「その他の曜日です」。
例2:ユーザーの権限ごとに表示を変える
const role = "admin";
switch (role) {
case "admin":
console.log("管理者メニューを表示");
break;
case "editor":
console.log("編集メニューを表示");
break;
case "viewer":
console.log("閲覧専用メニューを表示");
break;
default:
console.log("権限が不明です");
}
JavaScriptrole の取りうる値が “admin” / “editor” / “viewer” のように限られているとき、
switch は「一覧性」が高くなり、ロジックを追いやすくなります。
ここが重要です。
switch 文は、「種類ごとの分岐」を一覧で並べるのに向いています。if (role === "admin") ... else if (role === "editor") ... と書くより、
「役割一覧」として視覚的にまとまるのが、読みやすさのポイントです。
複数の値を同じ処理にしたいときのテクニック
意図的なフォールスルーを使う
「この 2 つの値は、同じ扱いでいい」ということがあります。
例えば、”Mon” と “Tue” は「平日のくくり」にしたい場合など。
const day = "Mon";
switch (day) {
case "Mon":
case "Tue":
case "Wed":
case "Thu":
case "Fri":
console.log("平日です");
break;
case "Sat":
case "Sun":
console.log("週末です");
break;
default:
console.log("不明な曜日です");
}
JavaScriptここでは、
- “Mon”〜”Fri” のどれかに一致したら、
そのcaseからフォールスルーして、最後のconsole.log("平日です")にたどり着きます。 - “Sat” または “Sun” なら「週末です」
という形で、「平日」と「週末」に分類しています。
これは “意図的に break を書かない” パターンです。
「この値たちは全部同じ扱いでいいんだ」と示すために、
フォールスルーを利用しています。
ここが重要です。
フォールスルーは「うっかり起きるとバグ」ですが、
上手く使えば「複数の case をまとめて同じ処理にする」ための技にもなります。
ただし、慣れないうちは「基本は全部 break。まとめたいときだけ意識してフォールスルー」と決めておくと安全です。
switch を使うべきか if を使うべきか
switch が向いているケース
switch が生きる場面は、だいたいこんなときです。
- 1つの変数(値)に対して、「取りうるパターン」がはっきり決まっている
例:statusが"pending" | "success" | "error"のようなとき - そのパターンごとに「全く別の処理」をしたい
- if / else if が 3 個、4 個と増えてきて、横に長く読みにくくなってきたとき
こういうときに switch にすると、
「この値のときはこう」というマッピングが視覚的に分かりやすくなります。
if / else のままのほうがいいケース
逆に、次のようなときは if のほうが素直です。
- 条件が「数値の範囲」など、単純な「一致」ではないとき
例:score >= 90,score >= 70のようなランク分け - 複雑な論理式(
&&や||)を使う必要があるとき
例えば、
if (score >= 90) {
// A
} else if (score >= 70) {
// B
} else {
// C
}
JavaScriptを switch で表現しようとすると、逆に読みにくくなります。
迷ったときの指針
- 「同じ変数に対して equals(===)で何回も分岐している」
→ switch を検討する価値あり - 「条件がそれぞれバラバラ(>= や && など)」
→ if / else のほうが自然
ここが重要です。
switch と if は「どちらが偉い」ではなく、「得意分野が違う」だけです。
自分やチームが読んだときに、“何を基準に分岐しているか” が一目で分かるほうを選ぶ、という感覚を持っておいてください。
初心者として switch 文の基本で本当に押さえてほしいこと
switch 文は、「1つの値」に対して、「値ごとの分岐」を一覧で書くための構文。case 値: は「その値のときの処理の入り口」、default は「どれにも当てはまらないとき」。
一致した case から下に向かって実行され、break に出会うまで落ちていく(フォールスルー)。
誤爆を防ぐために、基本は各 case の最後に break; を書く習慣をつける。
複数の値を同じ扱いにしたいときは、意図的に break を書かずに case を並べ、
最後に 1 回だけ処理を書いて break するパターンが使える。
「範囲」や「複雑な論理式」の条件分岐は if / else のほうが向いている。
switch は「値がこれのときはこう」というマッピングがはっきりしている場面で使うと読みやすい。
ここが重要です。
switch 文を学ぶ目的は、「条件分岐の引き出しを増やす」ことです。
if / else しか知らないときより、
“これはパターン分けだから switch のほうが見通しがいいな” と選べるようになると、
コードが一段階スッキリしたものになっていきます。
最後に、簡単な練習をいくつか挙げておきます。
ぜひ自分で書いて、どの case が実行されるか予想してから動かしてみてください。
// 練習1:
// 数値 level が 1, 2, 3 のどれかで、
// 1 → "初級"
// 2 → "中級"
// 3 → "上級"
// それ以外 → "不明なレベル"
// と表示する switch 文を書いてみる。
// 練習2:
// 文字列 command が "start" / "stop" / "pause" のどれかで、
// それぞれ違うメッセージを表示し、
// どれにも当てはまらないときは "不明なコマンド" と表示する switch 文を書く。
// 練習3:
// 曜日 day が "Mon"〜"Sun" のどれかという前提で、
// "Mon"〜"Fri" → "平日",
// "Sat" / "Sun" → "週末"
// と表示する switch 文を書いて、
// なぜ "Mon"〜"Fri" をまとめるときにフォールスルーが便利なのかを自分なりに説明してみる。
JavaScript「if で書くならどう書くか」「switch で書くならどう書くか」を両方試してみると、
自然と「ここは switch のほうが読みやすいな」という感覚が育っていきます。
