JavaScriptにおけるSwitch文の完全ガイド

JavaScriptでコードを書いていて、複数の条件をチェックする必要がある場合、本能的にif...else文のチェーンに手を伸ばすかもしれません。しかし、多くの場合、よりクリーンな代替手段があります。それがJavaScriptのswitch文です。これは、複数のケースを扱う際にコードをより読みやすく、保守しやすくする制御フロー構造です。

このガイドでは、switch文について知っておくべきすべてを網羅しています。構文、厳密等価を使用した値の比較方法、if-elseチェーンの代わりにいつ使用すべきか、そして実際の問題を解決する実用的なパターンについて説明します。

JavaScriptのSwitch文の構文を理解する

Switch文は式を一度評価し、それを複数のケースと比較します。

switch (expression) {
  case value1:
    // code to execute
    break;
  case value2:
    // code to execute
    break;
  default:
    // code if no match
}

Switchは括弧内の式を評価し、その後、厳密等価(===)を使用して各caseをチェックします。一致するものが見つかると、break文に到達するか、switchブロックの終わりに達するまで、そのcaseのコードを実行します。

JavaScriptにおけるSwitchとIf-Else:どちらを選ぶべきか

SwitchとIf-elseの選択は、多くの場合、可読性と必要な比較のタイプによって決まります。

// If-elseチェーン - 読みにくい
const status = response.status;
if (status === 200) {
  console.log("Success");
} else if (status === 404) {
  console.log("Not found");
} else if (status === 500) {
  console.log("Server error");
} else {
  console.log("Unknown status");
}

// Switch - 複数の正確なマッチに対してよりクリーン
switch (response.status) {
  case 200:
    console.log("Success");
    break;
  case 404:
    console.log("Not found");
    break;
  case 500:
    console.log("Server error");
    break;
  default:
    console.log("Unknown status");
}

一つの値を複数の特定のケースと比較する場合はswitchを使用してください。複雑な条件や異なるタイプの比較が必要な場合は、if-elseを使用してください。

Break文の重要な役割

breakがない場合、JavaScriptは次のcaseを実行し続けます。これは「フォールスルー」と呼ばれる動作です。

const day = 2;
switch (day) {
  case 1:
    console.log("Monday");
  case 2:
    console.log("Tuesday");  // これが実行される
  case 3:
    console.log("Wednesday"); // これも実行される!
  default:
    console.log("Unknown");   // これも!
}
// 出力: Tuesday, Wednesday, Unknown

このフォールスルーは、ケースをグループ化するのに便利です。

let season;
switch (month) {
  case "December":
  case "January":
  case "February":
    season = "Winter";
    break;
  case "March":
  case "April":
  case "May":
    season = "Spring";
    break;
  // ... その他の季節
}

高度なパターン:範囲と複雑な条件の処理

範囲や複雑な条件には、switch(true)を使用します。

const score = 85;
let grade;
switch (true) {
  case score >= 90:
    grade = "A";
    break;
  case score >= 80:
    grade = "B";
    break;
  case score >= 70:
    grade = "C";
    break;
  default:
    grade = "F";
}

このパターンが機能するのは、JavaScriptが各case式を評価し、その結果をtrueと比較するためです。

LetとConstによるスコープの問題を回避する

JavaScriptはswitchブロック全体に対して単一のスコープを作成するため、予期しないエラーが発生する可能性があります。

// これはエラーを投げます!
switch (action) {
  case "create":
    const message = "Creating...";
    break;
  case "update":
    const message = "Updating..."; // エラー: すでに宣言されています
    break;
}

// 解決策: ブロックスコープを使用する
switch (action) {
  case "create": {
    const message = "Creating...";
    console.log(message);
    break;
  }
  case "update": {
    const message = "Updating...";
    console.log(message);
    break;
  }
}

実践的な実例

アプリケーションでよく見られるコマンドハンドラーパターンの例です。

function handleCommand(command, data) {
  switch (command.type) {
    case "USER_LOGIN":
      return authenticateUser(data);
    case "USER_LOGOUT":
      return clearSession();
    case "FETCH_DATA":
      return fetchFromAPI(data.endpoint);
    default:
      console.warn(`Unknown command: ${command.type}`);
      return null;
  }
}

return文は関数全体を終了するため、breakが不要になることに注意してください。

パフォーマンスの考慮事項と代替手段

シンプルなマッピングには、オブジェクトリテラルがよりエレガントです。

// Switchの代わりに
const handlers = {
  'click': handleClick,
  'submit': handleSubmit,
  'change': handleChange
};

const handler = handlers[eventType] || defaultHandler;
handler(event);

最新のJavaScriptエンジンは、特にケースが連続した整数や文字列である場合、switch文を適切に最適化します。ほとんどのアプリケーションでは、switchとif-elseのパフォーマンスの違いは無視できる程度です。可読性に基づいて選択してください。

まとめ

JavaScriptのswitch文は、複数ケースの比較を読みやすく、保守しやすくすることに優れています。厳密等価チェック、break文の意図的な使用、変数宣言時のブロックスコープの使用を忘れないでください。if-elseチェーンやオブジェクトリテラルにも適した場面がありますが、値を複数の特定のケースと照合する必要がある場合、switch文はプログラムフローを制御するための貴重なツールであり続けます。

よくある質問

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.