JavaScriptのswitch文とは？if文との違いと使い方を初心者向けに解説

「もし〜なら」という条件分岐を作るとき、これまではifを使ってきました。しかし、選択肢が5個、10個と増えていくにつれて、コードがelse ifだらけになって読みづらくなった経験はありませんか？

そんな時に活躍するのが、もう一つの条件分岐「switch（スイッチ）文」です。

switch文を使うと、たくさんの選択肢がある処理をスッキリと整理して書くことができます。本記事では、switch文の基本の書き方から、if文との決定的な違い、そして実務で使う際の注意点までをわかりやすく解説します。

以下の記事はif文の記事ですので、まだ読んでいない方はこちらを先に読むことをオススメします。

JavaScriptのswitch文とは？
JavaScriptのswitch文の基本の書き方
if文とswitch文の違い
JavaScriptのswitch文が向いているケース
重要：breakを忘れるとどうなるか？（フォールスルー）
まとめ

JavaScriptのswitch文とは？

switch文は、プログラミングにおける「条件分岐」の仲間です。
一言で言えば、「ある一つの変数の値に注目して、それがどの候補（ケース）と一致するかをチェックし、一致した場所の処理を実行する」という仕組みです。

これまでのif文は、「もし〜なら」という条件を一つずつ判定して、正しければ進む、違えば次のelse ifへ……という「階段を下りていくような構造」でした。一方、switch文は「たくさんのボタンが並んだスイッチパネル」のような構造をしています。

多肢選択（たしせんたく）に強い

例えば、ゲームのコントローラーを思い浮かべてみてください。

「Aボタン」が押されたらジャンプする
「Bボタン」が押されたら攻撃する
「Xボタン」が押されたらメニューを開く
「Yボタン」が押されたらダッシュする

これをif文で書くと、「もしAなら…そうでなくもしBなら…そうでなくもしXなら…」と、条件式を何度も書かなければなりません。しかし、switch文を使えば、「注目するのはボタンの種類だけ！」と宣言して、あとは候補を並べるだけで済みます。

読みやすさ（可読性）の向上

プログラミングでは、コードが正しく動くことと同じくらい「あとで読み返したときに分かりやすいこと」が重要です。
条件が3つ以上ある場合、if文を連ねるよりもswitch文で書いたほうが、「このブロックは『ボタンの種類』によって分岐しているんだな」という意図が、他のプログラマー（あるいは未来の自分）に一瞬で伝わります。

このように、「一つの変数が、あらかじめ決まったいくつかの値のどれになるか」によって動きを変えたいときに、switch文はその真価を発揮します。

JavaScriptのswitch文の基本の書き方

switch文は、switch、case、break、defaultという4つのキーワードを組み合わせて書きます。

基本の構文

const rank = "A";

switch (rank) {
  case "A":
    console.log("素晴らしい！合格です。");
    break;
  case "B":
    console.log("合格です。");
    break;
  case "C":
    console.log("あと一歩です。");
    break;
  default:
    console.log("判定不能です。");
    break;
}

各パーツの役割

switch（変数）：判定したい「値」を指定します。
case “値”：「もしこの値と同じだったら」という候補を作ります。
break;：ここで処理を止めて、switch文を抜けるための命令です。
default：どのケースにも当てはまらなかった時に実行される、いわば「その他」の枠です。

if文とswitch文の違い

「if文で書けるなら、switch文はいらないのでは？」と思うかもしれませんが、この2つには「得意分野」の違いがあります。

比較ポイント	if文	switch文
判定内容	範囲（以上・以下）や複雑な条件	特定の値との「完全一致」
可読性	分岐が多いと複雑になりやすい	分岐が多くてもスッキリ見える
柔軟性	非常に高い	決まった値の比較に特化

JavaScriptのswitch文が向いているケース

実務でswitch文が選ばれるのは、主に「変数の値によって、きれいに道が分かれる」ときです。

例：占いアプリのラッキーカラー判定

const fortune = "大吉";
let color;

switch (fortune) {
  case "大吉":
    color = "金";
    break;
  case "中吉":
    color = "銀";
    break;
  case "小吉":
    color = "白";
    break;
  default:
    color = "なし";
    break;
}
console.log("今日のラッキーカラーは" + color + "です！");

このように、「値によって変数の内容をコロコロ変えたい」という場面では、switch文を使うとコードの見た目が美しくなり、修正も簡単になります。

重要：breakを忘れるとどうなるか？（フォールスルー）

switch文で初心者が最もやりがちなミスが、break;の書き忘れです。
実は、breakを書かないと、条件が一致したケースの「下のケース」まで勝手に実行されてしまいます。これを「フォールスルー」と呼びます。

失敗例

const fruit = "りんご";

switch (fruit) {
  case "りんご":
    console.log("これはりんごです");
    // ここにbreakがない！
  case "バナナ":
    console.log("これはバナナです");
    break;
}

このコードを実行すると、コンソールには「これはりんごです」だけでなく、「これはバナナです」も表示されてしまいます。意図しないバグを防ぐためにも、各ケースの最後には必ずbreakを入れる癖をつけましょう。

意図的にフォールスルーを使う場合もありますが、初心者のうちは使わなくてOKです。

また、switch文では複数のcaseをまとめて同じ処理を行うこともできます。

const day = "月";

switch (day) {
  case "月";
  case "火";
  case "水";
    console.log("平日です");
    break;
  case "土";
  case "日";
    console.log("休日です");
    break;
}

このように、caseを連続して書くことで、「同じ処理をまとめる」ことができます。