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

JavaScriptでプログラムを組んでいると、「もしAならこれ、Bならこれ、Cならこれ……」といった具合に、条件によって処理をいくつも分けたい場面が出てきます。

条件分岐といえば if 文が真っ先に思い浮かびますが、選択肢が多い場合に if やelse if を何個も並べると、コードが縦に長くなり、読みづらくなってしまうことがあります。

そんな時に、多方向の分岐をスッキリと美しく整理できるのが switch（スイッチ）文です。

本記事では、switch 文の基本構文から、絶対に忘れてはいけない break の役割、実務で迷わないための if 文との使い分け基準まで、わかりやすく解説していきます。

switch文の基本概念：多方向の分岐を整理する
1. switch文の役割をイメージで理解する
2. 1-2. 基本の書き方
switch文を構成する4つの重要キーワード
実践！おみくじプログラムでswitch文を学ぶ
【要注意】初心者が必ずハマる「break忘れ」とフォールスルー
1. 処理が下に突き抜ける「フォールスルー」
2. 意図的にフォールスルーを使う場面
【徹底比較】if文とswitch文、どっちを使うべき？
1. switch文が向いている場面
2. if文が向いている場面
実務で役立つ「厳密等価（===）の落とし穴
1. 文字列と数値の違い
発展：switch文をより高度に使いこなす
1. 関数内でのreturnとswitch
実践演習：曜日の自動表示プログラム
まとめ：読みやすいコードのためにswitch文を活用しよう

switch文の基本概念：多方向の分岐を整理する

switch 文は、ある「式」の結果（値）を評価し、その値に一致する「ケース」の処理を実行する仕組みです。

switch文の役割をイメージで理解する

駅の切符売り場や、ホテルのフロントをイメージしてください。「1階ならレストラン、2階なら客室、3階なら会議室」というように、「一つの値に対して、どのルートに進むか」が最初から決まっている場合に、switch 文はその真価を発揮します。

1-2. 基本の書き方

switch 文は、以下のような構造で記述します。

switch (式) {
  case 値1:
    // 式の結果が「値1」の時に実行される処理
    break;

  case 値2:
    // 式の結果が「値2」の時に実行される処理
    break;

  default:
    // どのケースにも一致しなかった時に実行される処理
    break;
}

switch文を構成する4つの重要キーワード

switch 文を正しく動かすためには、4つの要素の役割を理解する必要があります。

switch（式）

評価の対象となる値や変数です。ここに書かれた中身が、下の各 case と照らし合わせられます。

case（値）

「もし、switchの中身がこの値だったら……」という選択肢です。コロン : を忘れないようにしましょう。

break;（超重要）

そのケースの処理が終わったら、「switch文の外へ脱出せよ」という命令です。これがないと、次のケースの処理まで勝手に実行されてしまいます。

default:

どの case にも当てはまらなかった時に、最後に実行される「その他」の枠です。if 文でいうところの else に当たります。

実践！おみくじプログラムでswitch文を学ぶ

具体的なコードで、switch 文の動きを見てみましょう。

const rank = "A";

switch (rank) {
  case "S":
    console.log("超ラッキー！最高の結果です。");
    break;

  case "A":
    console.log("おめでとう！素晴らしい結果です。");
    break;

  case "B":
    console.log("まずまずの結果です。");
    break;

  default:
    console.log("順位外です。次回頑張りましょう。");
    break;
}

この場合、rank は”A”なので、case”A” の処理が実行され、「おめでとう！……」というメッセージがコンソールに表示されます。

【要注意】初心者が必ずハマる「break忘れ」とフォールスルー

switch 文において、最も多く、かつ見つけにくいバグが break; の書き忘れです。

処理が下に突き抜ける「フォールスルー」

もし break を書き忘れると、JavaScriptは「次の case も実行していいんだな」と判断し、下の処理を連続で実行してしまいます。

const fruit = "りんご";

switch (fruit) {
  case "りんご":
    console.log("これはりんごです。");
    // ここで break を忘れると……
  case "バナナ":
    console.log("これはバナナです。");
    break;
}
// 結果：「これはりんごです。」「これはバナナです。」の両方が表示されてしまう！

意図的にフォールスルーを使う場面

逆に、複数のケースで「同じ処理」をさせたい場合は、あえて break を書かずに並べるテクニックがあります。

const month = 8;

switch (month) {
  case 7:
  case 8:
  case 9:
    console.log("夏休み期間です。");
    break;
  default:
    console.log("通常期間です。");
    break;
}

【徹底比較】if文とswitch文、どっちを使うべき？

「if 文があれば switch 文はいらないのでは？」という疑問に答えていきます。

switch文が向いている場面

比較対象が「一つの変数」である。
条件が「特定の値（定数）」との一致である。
分岐の数が3~4いつ以上ある。
コードをスッキリと「表」のように見せたい。

if文が向いている場面

「〜より大きい（ > ）」「〜を含む」などの複雑な比較が必要。
複数の変数を組み合わせて判定する。
分岐が2つ（YesかNoか）だけ。

実務で役立つ「厳密等価（===）の落とし穴

switch 文を使う際に絶対に知っておくべきなのが、「型まで一致していないと反応しない」という点です。

文字列と数値の違い

const num = 100;

switch (num) {
  case "100": // 文字列の100
    console.log("一致しました");
    break;
  default:
    console.log("一致しませんでした");
}
// 結果：「一致しませんでした」が表示される

switch 文の内部では ===（厳密等価演算子）による比較が行われます。データ型（数値なのか文字列なのか）が異なると一致とみなされないため、注意しましょう。

【関連記事】：データ型の違いについては、「JavaScriptのデータ型とは？数値と文字列の違い・typeofの使い方を初心者向けに解説」で詳しく解説しています。

発展：switch文をより高度に使いこなす

最近のJavaScript開発では、switch 文を「値を返す関数」の中で使うのが一般的です。

関数内でのreturnとswitch

関数の中で使う場合、break 代わりに return を使うことで、値を返しつつ switch 文から抜けることができます。

function getPrice(item) {
  switch (item) {
    case "コーヒー": return 400;
    case "紅茶":     return 450;
    case "コーラ":   return 300;
    default:        return 0;
  }
}

const coffeePrice = getPrice("コーヒー");
console.log(coffeePrice); // 400

このように書くと、break を書く手間が省け、コードが非常にコンパクトになります。

実践演習：曜日の自動表示プログラム

これまでの知識を使って、今日の曜日を日本語で表示するプログラムを作ってみましょう。

const dayNum = new Date().getDay(); // 0(日)〜6(土)の数値が返る
let dayName = "";

switch (dayNum) {
  case 0: dayName = "日曜日"; break;
  case 1: dayName = "月曜日"; break;
  case 2: dayName = "火曜日"; break;
  case 3: dayName = "水曜日"; break;
  case 4: dayName = "木曜日"; break;
  case 5: dayName = "金曜日"; break;
  case 6: dayName = "土曜日"; break;
  default: dayName = "不明"; break;
}

console.log("今日は " + dayName + " です。");