このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】プログラムの制御：switch文

プログラムの制御：switch文

　プログラムの制御で複数の値ごとに異なる処理を行う場合、if 文を積み重ねる以外にも switch 文 を使う方法があります。switch 文は「ある値が複数の候補のうちのどれに一致するか」を判定して、合致した場所の処理を実行します。そのため、値ごとに明確に分岐が分かれている場面で特に有用です。

１．基本的な構文

switch(判定したい値) {
  case 値1:
    // 値が 値1 に一致したときの処理
    break;
  case 値2:
    // 値が 値2 に一致したときの処理
    break;
  default:
    // どの case にも合致しない場合の処理
}
  • case には比較対象となる値を置き、break は「switch 文のブロックから抜ける」ために使います。
  • break がない場合、次の case の処理へそのまま実行が移ってしまいます。
  • default はいずれの case にも一致しないときに実行される。

２．スイッチ文の流れ

  • switch(値) の ( ) 内にある値が評価される。
  • その値が、case 値x: の「値x」と厳密比較（===）され、一致した箇所で処理を行う。
  • break; を見つけたら switch 文を抜ける。break; がなければ次の case へ「フォールスルー」する。
  • どの case にも合わない場合、default の処理が行われる。

サンプルHTMLファイル：mySwitchExample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>mySwitchExample.html</title>
</head>
<body>
  <h1>switch 文のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開き、出力を確認してください。</p>

  <script>
    /**
     * 受け取ったメニュー名から価格を判定して返す関数
     * @param {string} menu - メニュー名
     * @returns {number} - 価格（数値）
     */
    function getMenuPrice(menu) {
      let price;

      switch (menu) {
        case 'ホットコーヒー':
        case 'アイスコーヒー':
        case '煎茶':
          // ホットコーヒー、アイスコーヒー、煎茶の場合
          price = 450;
          break;

        case 'チョコパフェ':
        case 'フルーツパフェ':
          // チョコパフェ、フルーツパフェの場合
          price = 800;
          break;

        default:
          // それ以外
          price = 500;
      }

      return price;
    }

    console.log('ホットコーヒー:', getMenuPrice('ホットコーヒー'));
    console.log('アイスコーヒー:', getMenuPrice('アイスコーヒー'));
    console.log('チョコパフェ:', getMenuPrice('チョコパフェ'));
    console.log('サンドイッチ:', getMenuPrice('サンドイッチ'));
  </script>
</body>
</html>

動作説明

  • getMenuPrice(menu) 関数では、受け取った menu を switch (menu) で判定して、一致する case の処理を実行し、対応する価格を price に代入して break で抜けています。
  • case 'ホットコーヒー': case 'アイスコーヒー': ... と並べて書くことで、複数のメニューをまとめて同じ処理にフォールスルーさせています。
  • default: は、どの case にも合致しない場合の処理を記述。ここでは 500円に設定。

デバックコンソールの出力

ホットコーヒー: 450
アイスコーヒー: 450
チョコパフェ: 800
サンドイッチ: 500

まとめ

  • switch 文 は「特定の値がどれに一致するか」を列挙して分岐させたい場面に向いています。
  • break を書かないと次の case へと処理が流れる（フォールスルー）仕組みがあるため、意図的に活用する場合を除いては忘れず書くことが多い。
  • どれにも合致しない場合は default ブロックに入り、そこに処理を定義できます。

　if 文より見やすい場合や、複数の値が同じ処理になる場合などに、switch 文を使うメリットがあります。上手に使い分けながら、プログラムの可読性を高めていきましょう。