JavaScriptのswitch文とは？複数の条件分岐をすっきり書く方法

JavaScriptで複数の条件を分岐させたいとき、if...elseを連続で書くのは少し見づらくなることがあります。
そんなときに便利なのが、switch文です。

この記事では、switch文の基本構文から注意点まで、わかりやすく解説します。

switch文とは？

switch文は、特定の値に応じて処理を分岐するための構文です。
if...else if...よりも見やすく整理できるのが特徴です。

基本構文

switch (式) {
  case 値1:
    // 値1の場合の処理
    break;
  case 値2:
    // 値2の場合の処理
    break;
  default:
    // どのcaseにも一致しない場合の処理
}

例：

let fruit = "りんご";

switch (fruit) {
  case "りんご":
    console.log("赤い果物です");
    break;
  case "バナナ":
    console.log("黄色い果物です");
    break;
  default:
    console.log("その他の果物です");
}

fruit が "りんご" なので、「赤い果物です」と表示されます。

break文について

break文 は、switch文の処理を中断し、外に抜けるために使います。
breakを省略すると、次のcaseにも続けて処理が実行されてしまうので注意が必要です。

breakを省略した場合

let color = "青";

switch (color) {
  case "赤":
    console.log("STOP");
  case "青":
    console.log("GO");
  case "黄":
    console.log("CAUTION");
}

この場合、"青"に一致してから、"GO"と"CAUTION"が続けて表示されます。

default文

defaultは、どのcaseにも一致しない場合に実行されます。
必ずしも書く必要はありませんが、予期しない入力に備えるために書いておくのがおすすめです。

数値や文字列に対応

switch文では、比較対象として数値も文字列も使えます。

let num = 2;

switch (num) {
  case 1:
    console.log("1です");
    break;
  case 2:
    console.log("2です");
    break;
}

複数のcaseで同じ処理をしたい場合

caseを続けて書くことで、複数の条件で同じ処理をまとめられます。

let day = "土";

switch (day) {
  case "土":
  case "日":
    console.log("週末です");
    break;
  default:
    console.log("平日です");
}

if文との使い分け

条件が「1つの変数の値によって分岐する」ような場合はswitchが便利です。
複雑な条件（範囲比較など）が必要なときはif文が向いています。

まとめ

• switch文は、複数の値を条件として分岐処理を書く構文
• 各caseの最後にbreakを書くことで処理を終了させる
• 一致しない場合の処理はdefaultに書く
• if文よりも見やすく書ける場面がある

switch文は、条件によって処理を切り替えたいときに非常に便利です。
実際にいろいろな値を試して、動作を確認しながら覚えていきましょう。