JavaScript | switch 文

1. switch文とは？

switch 文は、ある値をいくつかのパターン（条件）と比べて、どの処理を実行するかを決める 条件分岐 の書き方です。
if 文でも同じことはできますが、「値によって処理を分けるとき」にとてもスッキリ書ける方法です。

2. 基本の書き方

switch (値) {
  case 値1:
    // 値が値1のときに実行する処理
    break;
  case 値2:
    // 値が値2のときに実行する処理
    break;
  default:
    // どれにも当てはまらないときに実行する処理
}

switch (値) {
  case 値1:
    // 値が値1のときに実行する処理
    break;
  case 値2:
    // 値が値2のときに実行する処理
    break;
  default:
    // どれにも当てはまらないときに実行する処理
}

ポイント

1. switch の後ろにある「値」をチェックします。
2. case 値: がその値と一致するか比べます。
3. 一致した case の処理を実行します。
4. break は 「ここでswitch文を終わる」 ために必要です。
5. default は 「どのcaseにも当てはまらなかった場合」 の処理です。なくてもOK。

3. 例題 1：都道府県によってメッセージを表示

let prefecture = 'Osaka';

switch (prefecture) {
  case 'Tokyo':
    console.log('住所は東京都です');
    break;
  case 'Osaka':
    console.log('住所は大阪府です');
    break;
  default:
    console.log('住所はその他です');
}

let prefecture = 'Osaka';

switch (prefecture) {
  case 'Tokyo':
    console.log('住所は東京都です');
    break;
  case 'Osaka':
    console.log('住所は大阪府です');
    break;
  default:
    console.log('住所はその他です');
}

解説

• prefecture の値は 'Osaka' です。
• case 'Osaka': が一致したので、その処理が実行されます。
• 結果: 住所は大阪府です と表示されます。
• break があるので、他のcaseは実行されません。

4. breakを忘れるとどうなる？

let prefecture = 'Osaka';

switch (prefecture) {
  case 'Tokyo':
    console.log('東京都です');
  case 'Osaka':
    console.log('大阪府です');
  case 'Fukuoka':
    console.log('福岡県です');
  default:
    console.log('その他です');
}

let prefecture = 'Osaka';

switch (prefecture) {
  case 'Tokyo':
    console.log('東京都です');
  case 'Osaka':
    console.log('大阪府です');
  case 'Fukuoka':
    console.log('福岡県です');
  default:
    console.log('その他です');
}

解説

• prefecture は 'Osaka'。
• 'Osaka' のcaseに到達すると、その処理から 下のすべてのcaseも実行されてしまいます。
• 結果:

大阪府です
福岡県です
その他です

これを 「フォールスルー」 と言います。
必要な場合にだけ使い、基本は break を書きましょう。

5. 複数の値で同じ処理をしたい場合

let month = '8月';

switch (month) {
  case '8月':
  case '八月':
  case 'August':
    console.log('正解です');
    break;
  default:
    console.log('不正解です');
}

let month = '8月';

switch (month) {
  case '8月':
  case '八月':
  case 'August':
    console.log('正解です');
    break;
  default:
    console.log('不正解です');
}

解説

• month が '8月'、'八月'、または 'August' のどれかなら「正解です」を表示。
• 複数の case を連続させて break は最後だけでOK。

6. 初心者向けポイントまとめ

1. switch は 値による条件分岐 に便利。
2. break を書かないと下のcaseも実行される（フォールスルー）。
3. default はすべてのcaseに当てはまらない場合の処理。
4. 同じ処理を複数の値に適用したいときは、case を並べるだけ。

練習問題

次のコードの出力は何になるでしょう？

let fruit = 'apple';

switch (fruit) {
  case 'banana':
    console.log('バナナです');
    break;
  case 'apple':
    console.log('りんごです');
  case 'orange':
    console.log('オレンジです');
    break;
  default:
    console.log('その他のフルーツです');
}

let fruit = 'apple';

switch (fruit) {
  case 'banana':
    console.log('バナナです');
    break;
  case 'apple':
    console.log('りんごです');
  case 'orange':
    console.log('オレンジです');
    break;
  default:
    console.log('その他のフルーツです');
}

ステップごとの解説

1. fruit の値は 'apple'。
2. switch(fruit) で 'apple' に一致する case を探します。
3. case 'apple': が一致。ここから処理が始まります。

console.log('りんごです'); // まず「りんごです」を表示

console.log('りんごです'); // まず「りんごです」を表示

4. breakがないので、次の case 'orange': も処理されます。

console.log('オレンジです'); // ここも実行
break; // ここでswitch文が終了

console.log('オレンジです'); // ここも実行
break; // ここでswitch文が終了

5. default は実行されません（breakでswitch文が終わったため）。

出力結果

りんごです
オレンジです

ポイントまとめ

• break がないと 次のcaseも順番に実行される（フォールスルー）。
• フォールスルーは場合によって便利ですが、基本的には 必要な箇所で break を書く のが安全。
• 複数の値で同じ処理をしたい場合だけ、意図的にフォールスルーを使えます。

では、さきほどの問題を 2パターンに書き直して比較 してみます。

① 正しく break を入れたバージョン

let fruit = 'apple';

switch (fruit) {
  case 'banana':
    console.log('バナナです');
    break;
  case 'apple':
    console.log('りんごです');
    break; // ここで止める
  case 'orange':
    console.log('オレンジです');
    break;
  default:
    console.log('その他のフルーツです');
}

let fruit = 'apple';

switch (fruit) {
  case 'banana':
    console.log('バナナです');
    break;
  case 'apple':
    console.log('りんごです');
    break; // ここで止める
  case 'orange':
    console.log('オレンジです');
    break;
  default:
    console.log('その他のフルーツです');
}

出力結果

りんごです

解説

• fruit が 'apple' なので 'apple' のcaseが実行されます。
• break があるので、ここでswitch文は終了。他のcaseは実行されません。

② 複数の値で同じ処理をするバージョン

let fruit = 'apple';

switch (fruit) {
  case 'apple':
  case 'red apple':
  case 'green apple':
    console.log('りんごです');
    break;
  case 'banana':
    console.log('バナナです');
    break;
  default:
    console.log('その他のフルーツです');
}

let fruit = 'apple';

switch (fruit) {
  case 'apple':
  case 'red apple':
  case 'green apple':
    console.log('りんごです');
    break;
  case 'banana':
    console.log('バナナです');
    break;
  default:
    console.log('その他のフルーツです');
}

出力結果

りんごです

解説

• fruit が 'apple'、'red apple'、'green apple' のいずれかなら、同じ処理を行う。
• case を並べて書くことで 1つの処理にまとめられる。
• break は最後に1回だけ書けばOK。

まとめ