JavaScriptの switch-case による条件分岐

条件分岐は「制御構文」のひとつで、特定の条件に応じて異なる処理を実行するための構文です。
条件分岐により、プログラムは状況に応じて柔軟に振る舞うことができます。

本記事では、switch-case文について詳しく説明します。

switch-case 文

条件分岐の中で、if-else に次いでよく使われる条件分岐の構文が switch-case です。

switch-case文の構文は次の通りです。

switch (評価対象の式) {
  case 値1:
    // 値1に該当した場合の処理
    break;
  case 値2:
    // 値2に該当した場合の処理
    break;
  default:
    // いずれにも該当しない場合の処理
    break;
}

switch-caseの基本的な使用例

ジェダイの階級を英語から日本語に翻訳するサンプルプログラムです。

let rank = "padawan";

switch (rank) {
  case "master":
    console.log("マスター");
    break;
  case "padawan":
    console.log("パダワン");
    break;
  case "initiate":
    console.log("訓練生");
    break;
  case "youngling":
    console.log("候補生");
    break;
  default:
    console.log("フォース感応者");
    break;
}

👆こちらのプログラムを実際に作成し、結果を予測し（仮説を立て）、その後に動作を確認（検証）してみてください。

> パダワン

break文の重要性

break文は、各ケースの処理が終わった後にswitch文から抜け出すために不可欠です。
もしbreak文がない場合、次のケースの処理が続けて実行されてしまいます。これを「フォールスルー」と呼びます。

先ほどのサンプルプログラムから、break分をコメントアウトして試してみます。

let rank = "padawan";

switch (rank) {
  case "master":
    console.log("マスター");
    // break;  👈コメントアウト
  case "padawan":
    console.log("パダワン");
    // break;  👈コメントアウト
  case "initiate":
    console.log("訓練生");
    // break;  👈コメントアウト
  case "youngling":
    console.log("候補生");
    // break;  👈コメントアウト
  default:
    console.log("フォース感応者");
    // break;  👈コメントアウト
}

> パダワン
> 訓練生
> 候補生
> フォース感応者

複数のケースをまとめた使用例

複数のケースに対して同一の処理を行いたい場合、「フォールスルー」の性質を利用して以下のように記述することができます。

let day = "木";

switch (day) {
  case "月":
  case "火":
    console.log("習い事（🎹）");
    break;
  case "水":
  case "木":
  case "金":
    console.log("仕事");
    break;
  default:
    console.log("休日");
    break;
}

👆こちらのプログラムを実際に作成し、結果を予測し（仮説を立て）、その後に動作を確認（検証）してみてください。

👆変数「day」の値を書き換えて、様々なパターンを試してみましょう。

> 仕事

評価対象の式について

今回ご紹介したサンプルプログラムでは、switch-caseの「評価対象の式」に文字列を指定していました。

しかし、評価対象の式には文字列や数値以外にも様々な値を入れることができます。
いくつかを例示しておきます。
※ 「関数」や「オブジェクト」など、現段階では未習の内容が含まれるので、コードの意味は理解できなくても大丈夫です。

算術演算の結果

let num = 10;

switch (num % 3) {
  case 0:
    console.log("3で割り切れます。");
    break;
  case 1:
    console.log("3で割ると1余ります。");
    break;
  case 2:
    console.log("3で割ると2余ります。");
    break;
}

論理値（真偽値）

let isRaining = true;

switch (isRaining) {
  case true:
    console.log("傘を持って行きましょう。");
    break;
  case false:
    console.log("傘は必要ありません。");
    break;
}

関数の戻り値

function getDayOfWeek() {
  // 0(日曜日)から6(土曜日)までの数値を返す
  return new Date().getDay();
}

switch (getDayOfWeek()) {
  case 0:
    console.log("日曜日です。");
    break;
  case 1:
    console.log("月曜日です。");
    break;
  case 2: ... //以降も続く
  default:
    console.log("不明な日です。");
    break;
}

オブジェクトのプロパティ

let person = {
  name: "Alice",
  age: 30,
  role: "admin"
};

switch (person.role) {
  case "admin":
    console.log("管理者です。");
    break;
  case "user":
    console.log("一般ユーザーです。");
    break;
  case "guest":
    console.log("ゲストです。");
    break;
  default:
    console.log("不明な役割です。");
    break;
}

最後に

switch-case文は、複数の条件を扱う際にif-else文よりも読みやすく、シンプルなコードを書くために役立ちます。
特に、同じ変数や式に対して複数のケースを評価する場合に有効です。break文の使い方に注意し、適切に条件を分岐させることで、より効率的なコードを作成しましょう。

次に学習するのは『JavaScriptの繰り返し（ループ）処理』です。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

最後までお読みいただき、ありがとうございました。

『詳説 JavaScript』メニューに戻る