JavaScript | 基礎構文:条件分岐 – switch 文の基本

JavaScript JavaScript
スポンサーリンク

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

流れはこうです。

  1. expression(かっこの中の式)を評価する
  2. 上から順に case 値: と比較していき、一致したところから処理が始まる
  3. 通常は、処理の最後に break; を書いて、その switch から抜ける
  4. どの 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」を、読みやすく並べ替えた形だと捉えてください。
その値が colorroletype のような「カテゴリ」を表すときに、とても相性が良くなります。


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以外です");
}
JavaScript

num が 2 の場合、

  1. switch (num) → 2
  2. case 1: → 一致しない
  3. case 2: → 一致する → ここから処理を実行
  4. "2です" を表示
  5. 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以外です");
}
JavaScript

num が 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("不明なコマンドです");
}
JavaScript

command が “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("その他の曜日です");
}
JavaScript

day が “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("権限が不明です");
}
JavaScript

role の取りうる値が “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 のほうが読みやすいな」という感覚が育っていきます。

タイトルとURLをコピーしました