閉じる

JavaScriptのswitch文の書き方を基本から応用まで紹介

広告

JavaScriptにおいて複数の条件を判定する場合、if文と並んで頻繁に利用されるのがswitch文です。

switch文を適切に活用することで、コードの可読性が大幅に向上し、メンテナンスしやすいプログラムを作成できます。

特に、ある一つの変数が持つ値に応じて多方向への分岐が必要な場面では、switch文が非常に強力なツールとなります。

本記事では、JavaScriptのswitch文について、基本的な構文から実戦で役立つ応用テクニックまで詳しく解説します。

初心者の方から、より効率的な書き方を模索している中級者の方まで、幅広く役立つ内容となっています。

目次 [ close ]
  1. switch文の基本的な書き方
    1. break文の重要性
    2. default句の役割
  2. switch文における「厳密等価判定」の仕組み
  3. 応用編：複数の条件をグループ化する方法
  4. テクニック：switch(true)を用いた範囲指定
  5. switch文内での変数宣言とスコープの管理
  6. switch文とif文の使い分けと比較
  7. switch文の代替案：オブジェクトやMapの活用
  8. モダンなJavaScriptにおけるswitch文の立ち位置
  9. まとめ

switch文の基本的な書き方

switch文は、式を評価し、その結果が特定の「ケース（case）」に一致するかどうかを確認する構造を持っています。

まずは、最も標準的なswitch文の書き方を確認していきましょう。

JavaScript
// 基本的なswitch文の例
const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("これはリンゴです。");
    break;
  case "banana":
    console.log("これはバナナです。");
    break;
  default:
    console.log("未知のフルーツです。");
}
実行結果
これはリンゴです。

上記のコードでは、変数fruitの値が「apple」であるため、最初のcase節が実行されます。

switch文の構成要素は、主に「式」「case」「break」「default」の4つで成り立っています。

break文の重要性

switch文の中で最も注意すべき要素の一つが、break文の存在です。

breakは、現在のcaseの処理が終了した後に、switch文全体から抜け出す役割を果たします。

もしbreakを書き忘れてしまうと、条件に一致したcase以降の処理が、条件に関係なく順番に実行されてしまう「フォールスルー」という現象が発生します。

意図しないフォールスルーはバグの原因となるため、各ケースの終わりには原則としてbreakを記述するようにしましょう。

default句の役割

default句は、どのcaseにも一致しなかった場合に実行される処理を記述する場所です。

これはif文におけるelseと同じ役割を持っており、予期しない値が入力された際のセーフティネットとして機能します。

プログラムの堅牢性を高めるために、特別な理由がない限りは必ずdefault句を記述する習慣を付けることをおすすめします。

switch文における「厳密等価判定」の仕組み

JavaScriptのswitch文を使いこなす上で絶対に理解しておくべきポイントは、値の比較が厳密等価演算子（===）と同じルールで行われる点です。

つまり、値が同じであっても、データ型が異なる場合は「一致」とはみなされません。

例えば、数値の5と文字列の"5"を比較した場合の結果を考えてみましょう。

JavaScript
const value = "5"; // 文字列型

switch (value) {
  case 5: // 数値型との比較
    console.log("数値の5に一致しました。");
    break;
  default:
    console.log("一致するものがありませんでした。");
}
実行結果
一致するものがありませんでした。

このコードでは、変数valueが文字列であるため、数値型のcase 5には一致せず、defaultの処理が実行されます。

JavaScriptでは自動的な型変換が行われる場面が多いですが、switch文では型まで厳密にチェックされるという性質を忘れないようにしてください。

応用編：複数の条件をグループ化する方法

複数の異なる値に対して同じ処理を実行したい場合、caseを並べて記述することで条件をグループ化できます。

これは、あえてbreakを書かないことで次の処理へ流すフォールスルーの仕組みを意図的に利用した手法です。

JavaScript
const day = "Saturday";

switch (day) {
  case "Saturday":
  case "Sunday":
    console.log("今日は休日です。");
    break;
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("今日は平日です。");
    break;
  default:
    console.log("不正な入力です。");
}
実行結果
今日は休日です。

このように記述することで、冗長なコードを避け、スッキリとした条件分岐を実現できます。

特に、列挙型のデータや特定のカテゴリに属する値を分類する際に非常に役立ちます。

テクニック：switch(true)を用いた範囲指定

通常、switch文は「特定の変数の値」を判定するために使われますが、switch (true)というテクニックを使うことで、より柔軟な条件分岐が可能になります。

各caseの中に比較演算子を含めた式を記述することで、if-else文のような範囲判定が行えます。

JavaScript
const score = 85;

switch (true) {
  case (score >= 90):
    console.log("評価：S");
    break;
  case (score >= 80):
    console.log("評価：A");
    break;
  case (score >= 70):
    console.log("評価：B");
    break;
  default:
    console.log("評価：C");
}
実行結果
評価：A

この方法は、数値の範囲によるランク分けや、複数の異なる変数を組み合わせた複雑な条件判定を行いたい場合に非常に便利です。

ただし、本来のswitch文の使い方からは少し外れるため、チーム開発で使用する際は可読性を考慮して検討してください。

switch文内での変数宣言とスコープの管理

switch文を利用する際、多くの開発者が陥りやすい罠に「ブロックスコープ」の問題があります。

switch文全体が一つのブロックとして扱われるため、異なるcaseの中で同じ変数名を宣言しようとするとエラーが発生します。

JavaScript
const action = "update";

switch (action) {
  case "create":
    const message = "作成しました。"; // 定数の宣言
    console.log(message);
    break;
  case "update":
    const message = "更新しました。"; // エラー：SyntaxError: Identifier 'message' has already been declared
    console.log(message);
    break;
}

この問題を回避するためには、各caseの処理を波括弧 {} で囲んで、個別のブロックスコープを作成するのがベストプラクティスです。

JavaScript
// スコープを分離する正しい書き方
switch (action) {
  case "create": {
    const message = "作成しました。";
    console.log(message);
    break;
  }
  case "update": {
    const message = "更新しました。";
    console.log(message);
    break;
  }
}

このように波括弧を使用することで、変数名の衝突を気にせずに各ケースのロジックを記述できるようになります。

switch文とif文の使い分けと比較

開発を進める中で、「if文を使うべきか、switch文を使うべきか」と悩むこともあるでしょう。

一般的には、判定対象が特定の単一の値であり、かつ分岐の数が多い場合はswitch文が適しています。

以下の表で、それぞれの特徴を比較してみましょう。

特徴if-else文switch文
得意な判定範囲指定、複雑な論理条件（&&, ||）特定の値（定数）との一致判定
可読性分岐が増えるとネストが深くなりやすい多分岐でも構造がフラットで読みやすい
厳密性抽象的な等価（==）も使用可能常に厳密等価（===）で比較される
パフォーマンス条件の数に比例して線形に増加最適化により、多分岐でも高速な場合がある

判定する条件が3つ以上あり、かつその条件が特定の値に基づいているのであれば、switch文の使用を積極的に検討しましょう。

switch文の代替案：オブジェクトやMapの活用

JavaScriptの高度なテクニックとして、switch文を使わずに「オブジェクトリテラル」や「Map」で条件分岐を代用する方法があります。

これを「ルックアップテーブル」と呼び、コードをさらに簡潔かつ宣言的に記述することが可能です。

JavaScript
// オブジェクトを使った代替例
const status = "success";

const statusMessages = {
  success: "処理が成功しました。",
  error: "エラーが発生しました。",
  loading: "読み込み中です。",
};

const message = statusMessages[status] || "不明なステータスです。";
console.log(message);
実行結果
処理が成功しました。

この書き方のメリットは、ロジックとデータが分離されるため、動的な条件追加が容易になり、関数を値として保持することもできる点にあります。

非常にシンプルなマッピングであれば、switch文よりもオブジェクト形式の方がメンテナンス性が高まる場合があります。

モダンなJavaScriptにおけるswitch文の立ち位置

2026年現在のJavaScript開発においても、switch文は依然として標準的で重要な制御構文の一つです。

最近では「パターンマッチング（Pattern Matching）」という、より強力な条件分岐の仕様も議論されていますが、現時点ではswitch文が最も安定して動作する選択肢です。

TypeScriptなどと組み合わせる場合、switch文は「型の絞り込み（Type Narrowing）」において非常に強力な効果を発揮します。

例えば、ユニオン型を持つ変数をswitch文で分岐させると、TypeScriptコンパイラは各case内での型を正確に推論してくれます。

このように、単純な値の比較だけでなく、型安全なコードを書くための土台としてもswitch文は重宝されています。

まとめ

JavaScriptのswitch文は、多分岐の処理を整理し、コードの可読性を高めるための強力な手段です。

基本となるcaseやbreakの使い方から、switch(true)による応用、そしてブロックスコープの活用まで、その使い道は多岐にわたります。

改めて、今回の重要なポイントを振り返りましょう。

  • 比較は厳密等価（===）で行われるため、データ型を意識する必要がある。
  • 意図しないフォールスルーを防ぐために、各ケースには必ずbreakを記述する。
  • 予期しない入力に備え、必ずdefault句を用意する。
  • 変数の重複宣言を防ぐため、ケース内では波括弧 {} を使用してスコープを作る。
  • 状況に応じて、オブジェクトリテラルやMapによる代用も検討する。

これらの知識を日々のコーディングに活かすことで、より洗練されたJavaScriptプログラムを書くことができるようになります。

条件分岐のパターンに合わせて、if文やオブジェクト、そして今回のswitch文を柔軟に使い分けていきましょう。

URLをコピーしました！