JavaScript switch文完全ガイド｜初心者でもわかる基本構文と条件分岐の使い方

プログラミング

公開日: 2026/01/26

JavaScript switch文完全ガイド｜初心者でもわかる基本構文と条件分岐の使い方

※この記事にはプロモーションを含みます

はじめに

JavaScriptで条件分岐を行う際、最もよく使われるのがif文ですが、複数の条件が重なる場合にはコードが煩雑になりやすいという課題があります。

そこで役立つのがswitch文です。
switch文を使うことで、複雑な条件分岐も整理された見やすい形に書くことができ、保守性や可読性も向上します。

本記事では、switch文の基本構文から応用テクニック、よくある失敗パターンの回避まで、初心者でも理解できるようコード例付きで丁寧に解説します。

これを学ぶことで、if文よりもスッキリした条件分岐を作成でき、実装での活用も容易になります。

switch文の基本

switch文の構文と書き方

switch文は、特定の値を評価して該当するcaseブロックの処理を実行するための構文です。

条件分岐を整理し、読みやすく保守しやすいコードを実現することができます。

let fruit = "リンゴ";

switch(fruit) {
  case "リンゴ":
    console.log("リンゴです");
    break;
  case "バナナ":
    console.log("バナナです");
    break;
  default:
    console.log("果物ではありません");
}

上記のコードでは、変数 fruit に入っている文字列がどの値と一致するかによって実行される処理が変わります。

switch(fruit) の部分で「何を判定するか」を指定し、各 case に一致したブロックの処理が実行されます。

例えば、fruit が “リンゴ” であれば “リンゴです” と表示され、break によってそこで処理が止まります。
もし “バナナ” であれば “バナナです” が表示されます。

一方で、どの case にも一致しなかった場合は default のブロックが実行され、該当しない値が入力された時の処理をまとめて扱えます。

switch文の基本構成パーツ

switch（評価対象）：判定する値を指定
case “値”：一致した場合に実行する処理
break：処理を終了し、次のcaseに流れないようにする
default：どのcaseにも一致しない場合に実行される処理

switch文を使うことで、複数の条件を見やすく整理できます。
特に条件が多い場合には、if文よりもコードがすっきりします。

caseの使い方と注意点

case は、switch文で指定した評価対象と値が一致したときに実行される処理をまとめたブロックです。

複数の条件で同じ処理を実行したい場合でも、コードを重複させずに書ける点が大きな特徴です。

let day = "土";

switch(day) {
  case "土":
  case "日":
    console.log("休日です");
    break;
  default:
    console.log("平日です");
}

このように case を並べることで、「土曜日または日曜日なら同じ処理を実行する」といった条件をシンプルに表現できます。

同じ処理を if 文で書く場合は、以下のように ||（OR条件）を使う必要があります。

if (day === "土" || day === "日") {
  console.log("休日です");
}

if 文は条件が増えるほど長くなりがちですが、switch 文では複数のcaseをまとめることでコード量を減らし、可読性を高めることが可能です。

初心者の方は、まず基本構文を理解した上で、複数caseのまとめ方を試してみましょう。

breakとdefaultの役割

break：一致したcaseで処理を終了し、次のcaseに流れないようにする

default：どのcaseにも該当しない場合の処理を指定

breakを忘れると、処理が次のcaseまで実行されてしまうため、バグの原因になります。

defaultは必須ではありませんが、想定外の入力があった場合でもエラーを避けるために設定することをおすすめします。
例えば、入力値が誤っていた場合にログを出力したり、エラーの原因を特定しやすくするための処理を書くことができます。

複数条件の応用テクニック

ネストしたswitch文の使い方

場合によっては、switch文の中にさらにswitch文を入れることも可能です。

ただし、ネストが深くなるとコードの可読性が低下するため、使い方には注意が必要です。

let type = "果物";
let fruit = "リンゴ";

switch(type) {
  case "果物":
    switch(fruit) {
      case "リンゴ":
        console.log("リンゴです");
        break;
      case "バナナ":
        console.log("バナナです");
        break;
    }
    break;
}

上記のコードでは、まず type が「果物」であるかどうかを判定し、さらにその中で fruit の種類（リンゴかバナナか）を判定しています。

このように、外側の条件で大きな分類（カテゴリ）を行い、内側の switch でさらに細かく分ける、という “階層的な条件分岐” が可能になります。

ネストは、条件が複雑な場合や、階層的な分類を行う場合に便利です。

しかし、深くなりすぎると初心者には理解しにくくなるので、なるべく単純な形で記述することをおすすめします。

複雑な条件式の場合

純粋に「等しいかどうか」を見る場合は今まで紹介した書き方で十分ですが、「より大きい」「より小さい」などを見たい場合は、下記のように記述します。

let score = 85;

switch(true) {
  case score >= 90:
    console.log("A");
    break;
  case score >= 80:
    console.log("B");
    break;
  default:
    console.log("C");
}

この例では、switch(true) を使うことで、case に書いた条件式が true かどうかで判定を行っています。

例えば、score が 85 なので、case score >= 80 に一致し、 “B” が出力されます。

このように、スコアや点数などの数値に応じて、自動で評価を振り分ける仕組みを簡単に作ることができます。

if文との使い分け

条件が少ない場合や単純な場合は、if文で十分に対応可能です。

例えば、数値が正か負かを判定するような単純な分岐は、if文の方が読みやすくシンプルです。

let num = 5;
if (num > 0) {
  console.log("正の数です");
} else {
  console.log("正の数ではありません");
}

上記のように条件が少ないときは、わざわざswitch文を使わなくてもコードは理解しやすくなります。

しかし、条件が多くなるとif文がネストして複雑になるため、switch文を使うことでコードの整理が容易になります。

実装での活用例

ユーザー入力に応じた処理分岐

ユーザーの入力値に応じて処理を分岐させると、複数の条件を効率的に管理できます。

例えば、フォームの選択肢やアンケートの回答によって処理を切り替えたり、ゲームでの判定に応用したりすることが可能です。

let action = "ジャンプ";

switch(action) {
  case "ジャンプ":
    console.log("ジャンプします");
    break;
  case "走る":
    console.log("走ります");
    break;
  default:
    console.log("行動を選んでください");
}

上記の例では、ユーザーが選んだ行動に応じて処理が分岐し、それぞれのcaseで適切な処理が実行されます。

まずこのような単純な実装で練習し、switch文の挙動に慣れていきましょう。

イベント処理でのswitch文活用

クリックやキー入力などのイベントハンドラ内でもswitch文は活用できます。

複数の条件を整理して分岐できるため、コード全体の見通しがよくなり、保守や修正も容易です。

document.addEventListener("keydown", (e) => {
  switch(e.key) {
    case "ArrowUp":
      console.log("上に移動");
      break;
    case "ArrowDown":
      console.log("下に移動");
      break;
    default:
      console.log("別のキーが押されました");
  }
});

この例では、押されたキーに応じて処理を分けています。

switch文を使うことで、イベントごとの条件分岐が整理され、コードが見やすくなる点がポイントです。

switch文のポイント

switch文の使い方や注意点をまとめました。

正しいポイントを押さえることで、コードの可読性を高め、意図しない挙動を防ぐことができます。

switch文のポイント

これらのポイントを理解しておくと、switch文を使った複数条件の分岐がスムーズに実装できます。

まとめ

本記事では、JavaScriptのswitch文について、基本構文、caseやbreak、defaultの使い方、複数条件の応用例までを詳しく解説しました。

switch文を正しく使うことで、条件分岐が整理され、読みやすく保守しやすいコードを実現できます。
特に初心者の方は、まず基本構文を丁寧に理解し、実際にコードを書きながら学ぶことが大切です。

こうしたJavaScriptの構文を基礎から学び、Web制作に挑戦したい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

段階的に学び、コーディングスキルを着実に身につけていきましょう。

この記事を
シェアする！