カテゴリ: 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でパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう