カテゴリ: JavaScript 更新日: 2025/10/20

JavaScriptのswitch文の基本構文と使いどころを学ぼう!初心者でもわかる条件分岐の書き方

JavaScriptのswitch文の基本構文と使いどころを学ぼう
JavaScriptのswitch文の基本構文と使いどころを学ぼう

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで複数の条件によって処理を変えたいとき、どう書けばいいですか?」

先生

「複数の条件がある場合は、switch文を使うとわかりやすく書けます。if文でもできますが、条件がたくさんあるとコードが長くなってしまいます。」

生徒

switch文ってどんなふうに書くんですか?」

先生

「では基本の書き方から説明しますね!」

1. switch文とは?基本構文を見てみよう

1. switch文とは?基本構文を見てみよう
1. switch文とは?基本構文を見てみよう

switch文は、ある値が何と等しいかを調べて、それぞれの場合に応じた処理を行うための書き方です。複数の選択肢があるときに使うことが多いです。

基本構文は次の通りです。


switch (式) {
  case 値1:
    // 値1の場合の処理
    break;
  case 値2:
    // 値2の場合の処理
    break;
  // 他のcaseも続ける
  default:
    // どのcaseにも当てはまらない場合の処理
}

ここで、switchの後のは評価される値で、それとcaseを順番に比べていきます。caseの値に一致するものがあれば、その処理を実行します。

breakは処理をそこで終わらせるために必要な命令で、これを書かないと次のcaseの処理まで続けて実行されてしまいます。

defaultは、どのcaseにも当てはまらない場合に実行される処理です。省略もできますが、エラー防止のため書くことが多いです。

2. switch文の簡単な例:曜日ごとにメッセージを変える

2. switch文の簡単な例:曜日ごとにメッセージを変える
2. switch文の簡単な例:曜日ごとにメッセージを変える

たとえば、曜日の番号(0〜6)に応じて、その曜日名を表示する例を見てみましょう。


let day = 3;
let dayName;

switch (day) {
  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 = "不正な曜日です";
}

console.log(dayName);

水曜日

この例では、変数dayが3なので、水曜日のメッセージが表示されます。

3. switch文を使うメリット

3. switch文を使うメリット
3. switch文を使うメリット
  • コードが見やすくなる
    たくさんの条件分岐を整理して書けるので、読みやすくなります。
  • 複数の値に対する処理を簡単に書ける
    同じ変数の値に対して処理を変える場合に便利です。
  • ミスを減らせる
    書き方が決まっているので、条件漏れや記述ミスを防ぎやすいです。

4. switch文の注意点とポイント

4. switch文の注意点とポイント
4. switch文の注意点とポイント
  • breakの書き忘れに注意
    breakを書かないと、次のcaseの処理まで続けて実行されてしまいます。意図的に続けることもありますが、初心者は特に気を付けましょう。
  • 式の値は厳密比較される
    switchは比較に===(型と値が両方等しい)を使います。型が違うと一致しません。
  • 複雑な条件には向かない
    範囲判定や複雑な条件にはif文を使うほうがわかりやすいです。

5. switch文の活用例:簡単なメニュー選択

5. switch文の活用例:簡単なメニュー選択
5. switch文の活用例:簡単なメニュー選択

ユーザーが入力したメニュー番号に応じて料理名を表示する例です。


let menu = 2;
let dish;

switch (menu) {
  case 1:
    dish = "カレーライス";
    break;
  case 2:
    dish = "ハンバーグ";
    break;
  case 3:
    dish = "ラーメン";
    break;
  default:
    dish = "メニューにありません";
}

console.log(dish);

ハンバーグ

こうした選択肢が複数ある処理は、switch文が便利です。

6. よくある質問:switch文のdefaultは必須ですか?

6. よくある質問:switch文のdefaultは必須ですか?
6. よくある質問:switch文のdefaultは必須ですか?

defaultは必須ではありませんが、予期しない値が来たときに備えて書いておくのが安全です。エラーの原因を見つけやすくなります。

7. まとめない代わりに簡単ポイント整理

7. まとめない代わりに簡単ポイント整理
7. まとめない代わりに簡単ポイント整理
  • switch文は複数の条件分岐を整理して書くのに便利。
  • caseの最後にはbreakを書くのを忘れない。
  • defaultで例外処理を書くと安全。
  • 複雑な条件や範囲判定はif文のほうが向いている。
カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScript × ES6の連携まとめ!安全でモダンなJavaScript開発の鍵
New2
TypeScript
TypeScriptの型システムとは?静的型付けのメリットと基本
New3
JavaScript
JavaScriptの正規表現で繰り返し指定(* + ? {n,m})を学ぼう
New4
TypeScript
TypeScriptとESNextの連携を完全ガイド!最新機能を使いこなす設定と対応法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの日時操作Tips!実務で役立つテクニック集
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptでESLintとPrettierを導入!コード整形ルールを自動で統一する方法
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptのif文の使い方を完全ガイド!初心者でもわかる条件分岐
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptの正規表現で文字列を置換する方法(replaceメソッド)
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptで非同期イテレーター(for await of)を活用する