カテゴリ: JavaScript 更新日: 2026/07/09

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

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

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

生徒

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

先生

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

生徒

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

先生

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

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

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

switch文は、1つの値に対して「どのパターンに当てはまるか」を順番にチェックし、条件ごとに処理を分けるための書き方です。特に「同じ変数に対して複数の選択肢がある場合」に使うと、コードがすっきり読みやすくなります。

たとえば、「1なら○○、2なら△△、3なら□□」といったように、値ごとに処理を変えたいときに便利です。

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


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

ここで、switchの後に書くの値と、各caseの値を上から順に比較していきます。一致したcaseが見つかると、その中の処理だけが実行されます。

初心者の方は「上から順番にチェックしていく」と覚えると理解しやすいです。

次に、簡単なサンプルで動きを見てみましょう。


let num = 2;

switch (num) {
  case 1:
    console.log("1が入力されています");
    break;
  case 2:
    console.log("2が入力されています");
    break;
  default:
    console.log("1でも2でもありません");
}

2が入力されています

このように、numの値が2なので、case 2の処理が実行されます。

breakは、その時点でswitch文の処理を終了するための命令です。これを書かないと、次のcaseの処理まで続けて実行されてしまうため、基本的には忘れずに書きましょう。

また、defaultはどのcaseにも当てはまらなかったときの処理です。予期しない値が来たときの保険として用意しておくと安心です。

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

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

たとえば、曜日の番号(0〜6)に応じて、その曜日名を表示する例を見てみましょう。switch文を使うと、「どの数字が入力されたか」によって表示内容を分けることができ、条件が増えても見やすく書けるのが特徴です。

今回は、数字と曜日を対応させるシンプルな例なので、プログラミングが初めての方でも流れを理解しやすいです。「入力された値に応じて結果が変わる」という基本的な仕組みを確認してみましょう。


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」が入っているため、case 3の処理が実行され、「水曜日」と表示されます。switch文は上から順番に一致するか確認していき、最初に一致した場所だけが実行される仕組みです。

また、もしdayに0〜6以外の値が入っていた場合は、defaultの処理が実行されます。こうして「想定外の値」にも対応できるようにしておくと、エラーを防ぎやすくなります。

3. switch文を使うメリット

3. switch文を使うメリット
3. switch文を使うメリット

switch文は、同じ値をもとに複数の分岐を行うときにとても便利な書き方です。特に初心者の方は、if文との違いを意識しながら使うことで、コードの読みやすさが大きく変わることを実感できます。

  • コードが見やすくなる
    条件ごとに処理がまとまるため、どの値でどの処理が行われるのかがひと目で分かります。ネスト(入れ子)が増えにくく、後から見直すときにも理解しやすいのが特徴です。
  • 複数の値に対する処理を簡単に書ける
    同じ変数に対して分岐する場合、ifを何度も書く必要がなくなり、スッキリと整理できます。条件が増えても構造が崩れにくいです。
  • ミスを減らせる
    決まった書き方で記述できるため、条件の書き忘れやミスに気づきやすくなります。特に初心者は構文に沿って書くだけで、自然と正しい形になります。

例えば、同じ処理をif文で書いた場合と比較してみましょう。


let num = 2;

if (num === 1) {
  console.log("1です");
} else if (num === 2) {
  console.log("2です");
} else if (num === 3) {
  console.log("3です");
} else {
  console.log("それ以外です");
}

このように条件が増えると、else ifが長く続いてしまいます。一方、switch文を使うと、次のようにシンプルに書けます。


let num = 2;

switch (num) {
  case 1:
    console.log("1です");
    break;
  case 2:
    console.log("2です");
    break;
  case 3:
    console.log("3です");
    break;
  default:
    console.log("それ以外です");
}

2です

このように、条件ごとに整理されているため、どの値にどの処理が対応しているかが直感的に分かります。条件分岐が増えてきたら、switch文を使うことでコード全体をスッキリ保つことができます。

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

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

switch文は便利ですが、正しく使わないと思わぬ動きになることがあります。ここでは初心者がつまずきやすいポイントを、簡単なサンプル付きで確認していきましょう。

  • breakの書き忘れに注意
    breakを書かないと、次のcaseの処理まで続けて実行されてしまいます。これを「フォールスルー」と呼びます。意図的に使うこともありますが、初心者のうちは毎回書くクセをつけるのがおすすめです。

let num = 1;

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

1です
2です
  • 式の値は厳密比較される
    switch===で比較されるため、「数値」と「文字列」は別物として扱われます。見た目が同じでも一致しないので注意しましょう。

let num = "1";

switch (num) {
  case 1:
    console.log("数値の1です");
    break;
  case "1":
    console.log("文字列の1です");
    break;
}

文字列の1です
  • 複雑な条件には向かない
    例えば「10以上かつ20未満」などの範囲条件や、複数の条件を組み合わせる場合は、if文の方が直感的で分かりやすくなります。switchは「値が一致するかどうか」の判定に向いている構文です。

let score = 75;

if (score >= 70 && score < 80) {
  console.log("70点台です");
}

このように、switch文はシンプルな条件分岐に強い一方で、使いどころを間違えると読みにくくなることもあります。基本をしっかり押さえて、状況に応じて使い分けることが大切です。

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文のほうが向いている。

まとめ

まとめ
まとめ

JavaScriptのswitch文は、複数の条件分岐を整理してわかりやすく記述できる重要な構文です。if文でも同様の処理は可能ですが、条件が増えてくるとネストが深くなり、可読性が大きく下がってしまいます。その点、switch文は一つの値に対して複数の選択肢を並べて比較できるため、コードの見通しがよくなり、保守性も高まります。特に初心者がプログラミングを学習する際には、条件分岐の基本としてif文とあわせて理解しておくべき重要なポイントです。

switch文の基本構文では、switchの後に評価する式を書き、その結果と一致するcaseの処理が実行されます。このとき重要になるのがbreak文の存在です。breakを記述しないと、次のcaseに処理が流れてしまうため、意図しない動作を引き起こす可能性があります。初心者がつまずきやすいポイントの一つなので、必ず意識して書く習慣を身につけることが大切です。

また、defaultの使い方も重要です。defaultはどのcaseにも一致しなかった場合に実行される処理であり、予期しない値が入力されたときの安全対策として機能します。エラーを未然に防ぐためにも、基本的にはdefaultを用意しておくことが推奨されます。実務でも入力値のチェックや例外処理として活用される場面が多いため、必ず覚えておきましょう。

switch文が活躍する場面としては、メニュー選択、曜日判定、ステータス管理など、同じ変数の値に応じて処理を分岐したいケースが挙げられます。例えばユーザーが選択した番号によって表示内容を変える処理や、数値に応じた状態分岐などは、switch文を使うことで非常にシンプルに記述できます。こうしたパターンを理解しておくことで、実践的なプログラム作成にも役立ちます。

一方で、switch文には向き不向きもあります。範囲条件や複雑な論理式を扱う場合には、if文のほうが適しています。switch文はあくまで値の一致を前提とした条件分岐なので、使いどころを正しく判断することが重要です。条件の内容を見て、どちらの構文を使うべきか選べるようになると、より効率的なコーディングができるようになります。

以下に、理解を深めるための簡単なサンプルプログラムを示します。実際にコードを書いて動作を確認することで、知識がより確実に身につきます。


let score = 85;
let result;

switch (true) {
  case score >= 90:
    result = "とても良い成績です";
    break;
  case score >= 70:
    result = "良い成績です";
    break;
  case score >= 50:
    result = "合格です";
    break;
  default:
    result = "再試験が必要です";
}

console.log(result);

良い成績です

このようにswitch文は応用次第で柔軟な条件分岐にも対応できます。基本構文をしっかり理解したうえで、さまざまなパターンに挑戦してみることが大切です。繰り返し練習することで、自然と使い分けができるようになります。

先生と生徒の振り返り会話

生徒

「switch文って、同じ変数を何回も比較するときに便利なんですね。」

先生

「その通りです。if文よりもスッキリ書けるので、条件が多いときに特に役立ちます。」

生徒

「でもbreakを書き忘れると、次の処理まで実行されるんですよね。」

先生

「よく気づきました。breakの書き忘れはよくあるミスなので、必ず確認する習慣をつけましょう。」

生徒

「defaultも書いておいたほうが安全なんですよね。」

先生

「そうです。予想外の値に対応できるので、エラー対策としてとても重要です。」

生徒

「switch文とif文をうまく使い分けることが大切なんですね。」

先生

「その理解で問題ありません。条件の種類に応じて最適な書き方を選べるようになると、プログラミングのレベルが一段上がりますよ。」

カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptでURLを正規化(canonical)する方法を徹底解説!初心者向けにわかりやすく解説
New2
TypeScript
TypeScriptの型まとめ!安全で保守性の高いコードを書く方法
New3
TypeScript
TypeScriptのプロジェクトをtscでビルドする基本操作を解説!初心者にもわかるステップバイステップ
New4
Claude Code
Claude Codeの基本的な使い方!起動から終了まで初心者向けに解説
人気記事
No.1
Java&Spring記事人気No1
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptの文字列を分割する方法(splitメソッド)
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptで要素の表示・非表示を切り替える方法(display・visibility)を完全解説
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptで最初に覚えたい基本構文まとめ
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptでフォームの値を取得する方法を徹底解説!valueプロパティの使い道
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptのライブラリとは?標準ライブラリと外部ライブラリの違いと使い方
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptでクライアントとサーバーのバリデーションを共通化する方法!初心者向けデータ検証入門