JavaScriptのswitch文を使って条件分岐を行うコツ10選

●JavaScriptのswitch文とは？
- ○switch文の基本構文
- ○サンプルコード1：基本的な使い方
●switch文を使うメリット
- ○コードの可読性の向上
- ○サンプルコード2：if文との比較
●switch文の高度な使い方
●switch文でよくあるエラーとその対処法
- ○サンプルコード5：エラー例と修正方法
- ○サンプルコード6：型の不一致に注意
●switch文の応用例
まとめ

●JavaScriptのswitch文とは？

プログラミングをしていると、様々な条件に応じて処理を分岐させる必要があります。

JavaScriptでは、if文やswitch文を使ってこれを実現できます。

特にswitch文は、複数の条件を簡潔に記述でき、コードの可読性を高めてくれる強力なツールです。

○switch文の基本構文

switch文の基本的な構文は次のようになります。

switch (式) {
  case 値1:
    // 式が値1に一致する場合の処理
    break;
  case 値2:
    // 式が値2に一致する場合の処理
    break;
  ...
  default:
    // どのcaseにも一致しない場合の処理
}

switch文では、式の値と各caseの値を比較し、一致する場合にはそのcaseのブロック内の処理が実行されます。

各caseの末尾にはbreak文を記述し、そのcaseの処理が終了したらswitch文全体を抜け出すようにします。

どのcaseにも一致しない場合は、default節の処理が実行されます。

○サンプルコード1：基本的な使い方

それでは、switch文を使った基本的な例を見てみましょう。

const fruit = "apple";

switch (fruit) {
  case "banana":
    console.log("This is a banana.");
    break;
  case "apple":
    console.log("This is an apple.");
    break;
  case "orange":
    console.log("This is an orange.");
    break;
  default:
    console.log("Unknown fruit.");
}

実行結果↓

This is an apple.

この例では、fruitの値が”apple”なので、2番目のcaseの処理が実行され、”This is an apple.”が出力されます。

●switch文を使うメリット

JavaScriptのコーディングをしていると、条件分岐を使う場面によく遭遇しますよね。

if文を使えば、ほとんどの場合に対応できますが、switch文を使うことでコードの可読性を大幅に向上させることができます。

○コードの可読性の向上

switch文を使うメリットの1つは、コードの可読性が向上することです。

複数の条件を評価する際、if文を使うと条件式が長くなり、コードが読みにくくなることがあります。

一方、switch文を使えば、条件式をシンプルに記述でき、各条件に対する処理もわかりやすく書くことができます。

例えば、ユーザーの入力に応じて、異なるメッセージを表示するような処理を考えてみましょう。

if文を使うと、次のようになります。

const userInput = "A";

if (userInput === "A") {
  console.log("あなたは優秀な人材です。");
} else if (userInput === "B") {
  console.log("あなたはまだ伸び代がありそうです。");
} else if (userInput === "C") {
  console.log("もう少し頑張りましょう。");
} else {
  console.log("入力が正しくありません。");
}

実行結果↓

あなたは優秀な人材です。

一方、switch文を使うと、次のようにシンプルに書くことができます。

○サンプルコード2：if文との比較

const userInput = "A";

switch (userInput) {
  case "A":
    console.log("あなたは優秀な人材です。");
    break;
  case "B":
    console.log("あなたはまだ伸び代がありそうです。");
    break;
  case "C":
    console.log("もう少し頑張りましょう。");
    break;
  default:
    console.log("入力が正しくありません。");
}

実行結果↓

あなたは優秀な人材です。

このように、switch文を使うことで、条件式がシンプルになり、各条件に対する処理もわかりやすく書くことができます。

特に、条件が多い場合や、条件式が複雑な場合には、switch文を使うことでコードの可読性が大幅に向上します。

●switch文の高度な使い方

switch文は、単純な条件分岐だけでなく、もっと高度な使い方もできるんです。

JavaScriptのコーディングに慣れてきた方なら、ぜひマスターしておきたいテクニックですね。

○ケースのグルーピング

switch文では、複数のcaseをグループ化して、同じ処理を実行することができます。

これは、コードの重複を避け、より簡潔に書くことができる便利な方法です。

○サンプルコード3：複数のケースを一括で処理

例えば、ユーザーの入力が”A”、”B”、”C”のいずれかの場合に、同じメッセージを表示するとします。

このような場合、次のようにcaseをグループ化することができます。

const userInput = "B";

switch (userInput) {
  case "A":
  case "B":
  case "C":
    console.log("あなたは合格です！");
    break;
  default:
    console.log("入力が正しくありません。");
}

実行結果↓

あなたは合格です！

このように、case “A”、case “B”、case “C”を連続して書くことで、いずれかの条件に一致した場合に同じ処理が実行されます。

これは、コードの重複を避け、より簡潔に書くことができる便利なテクニックです。

○サンプルコード4：フォールスルーの活用

switch文では、breakを省略することで、次のcaseの処理も実行することができます。

これを「フォールスルー」と呼びます。

フォールスルーを活用することで、複数のcaseで同じ処理を実行することができます。

const userLevel = 2;

switch (userLevel) {
  case 1:
    console.log("レベル1の特典を付与");
  case 2:
    console.log("レベル2の特典を付与");
  case 3:
    console.log("レベル3の特典を付与");
    break;
  default:
    console.log("対象外のユーザーレベルです");
}

実行結果↓

レベル2の特典を付与
レベル3の特典を付与

この例では、userLevelが2の場合、case 2の処理が実行された後、breakがないためにcase 3の処理も実行されます。

このように、フォールスルーを活用することで、複数のcaseで同じ処理を実行することができます。

ただし、フォールスルーを多用すると、かえってコードが読みにくくなることがあるので、適切に使い分けることが大切です。

●switch文でよくあるエラーとその対処法

JavaScriptのswitch文を使っていると、時々思わぬエラーに遭遇することがありますよね。でも、大丈夫です。

エラーの原因を理解し、適切に対処することで、switch文をより効果的に使いこなせるようになります。

○サンプルコード5：エラー例と修正方法

switch文を使う際によく起こるエラーの1つに、breakを忘れてしまうことがあります。

下記のコードを見てみましょう。

const fruit = "banana";

switch (fruit) {
  case "apple":
    console.log("This is an apple.");
  case "banana":
    console.log("This is a banana.");
  case "orange":
    console.log("This is an orange.");
  default:
    console.log("Unknown fruit.");
}

実行結果↓

This is a banana.
This is an orange.
Unknown fruit.

このコードでは、fruitの値が”banana”なので、case “banana”の処理が実行されます。

しかし、breakがないため、それ以降のcase “orange”とdefaultの処理も実行されてしまいます。

これは意図しない動作ですよね。

この問題を解決するには、各caseの末尾にbreakを追加します。

const fruit = "banana";

switch (fruit) {
  case "apple":
    console.log("This is an apple.");
    break;
  case "banana":
    console.log("This is a banana.");
    break;
  case "orange":
    console.log("This is an orange.");
    break;
  default:
    console.log("Unknown fruit.");
}

実行結果↓

This is a banana.

これで、意図したとおりの動作になりました。

breakを忘れずに記述することが重要ですね。

○サンプルコード6：型の不一致に注意

switch文では、式の値とcaseの値の型が一致していないと、予期しない動作をすることがあります。

const num = "1";

switch (num) {
  case 1:
    console.log("This is number 1.");
    break;
  case 2:
    console.log("This is number 2.");
    break;
  default:
    console.log("Unknown number.");
}

実行結果↓

Unknown number.

このコードでは、numの値が文字列の”1″ですが、caseの値は数値の1と2になっています。

この場合、型が一致しないため、どのcaseにも当てはまらず、defaultの処理が実行されます。

この問題を解決するには、式の値とcaseの値の型を一致させる必要があります。

次のように修正しましょう。

const num = "1";

switch (num) {
  case "1":
    console.log("This is string '1'.");
    break;
  case "2":
    console.log("This is string '2'.");
    break;
  default:
    console.log("Unknown string.");
}

実行結果↓

This is string '1'.

このように、式の値とcaseの値の型を一致させることで、意図したとおりの動作になります。

型の不一致によるエラーに注意しましょう。

エラーに遭遇しても、焦らずに原因を特定し、適切に修正することが大切です。

そうすることで、switch文をより効果的に使いこなせるようになります。

●switch文の応用例

JavaScriptのswitch文は、基本的な条件分岐だけでなく、もっと応用的な使い方ができます。

ここでは、switch文を使ったより高度なコーディングテクニックを見ていきましょう。

○サンプルコード7：動的な条件分岐

switch文では、式の値を動的に変更することで、条件分岐を柔軟に制御できます。

const getDay = (dayNumber) => {
  switch (dayNumber) {
    case 0:
      return "日曜日";
    case 1:
      return "月曜日";
    case 2:
      return "火曜日";
    case 3:
      return "水曜日";
    case 4:
      return "木曜日";
    case 5:
      return "金曜日";
    case 6:
      return "土曜日";
    default:
      return "無効な曜日番号";
  }
};

const dayNumber = new Date().getDay();
console.log(getDay(dayNumber));

実行結果（例）↓

火曜日

この例では、getDay関数内でswitch文を使って曜日番号に応じた曜日名を返しています。

そして、Date オブジェクトの getDay メソッドを使って現在の曜日番号を取得し、それを getDay 関数に渡すことで、動的に条件分岐を行っています。

このように、式の値を動的に変更することで、より柔軟な条件分岐を実現できます。

○サンプルコード8：関数内での利用

switch文は、関数内で使うことで、より複雑な処理を簡潔に記述できます。

const calculatePrice = (itemCode, quantity) => {
  let price;

  switch (itemCode) {
    case "A001":
      price = 1000;
      break;
    case "B002":
      price = 1500;
      break;
    case "C003":
      price = 2000;
      break;
    default:
      return "無効な商品コードです";
  }

  const totalPrice = price * quantity;
  return `${quantity}個の合計金額は${totalPrice}円です`;
};

console.log(calculatePrice("A001", 5));
console.log(calculatePrice("B002", 3));
console.log(calculatePrice("D004", 2));

実行結果↓

5個の合計金額は5000円です
3個の合計金額は4500円です
無効な商品コードです

この例では、calculatePrice関数内でswitch文を使って商品コードに応じた価格を設定し、数量を掛け合わせて合計金額を計算しています。

無効な商品コードが渡された場合は、適切なメッセージを返しています。

このように、関数内でswitch文を使うことで、より複雑な処理を簡潔に記述できます。

○サンプルコード9：オブジェクトとの組み合わせ

switch文は、オブジェクトと組み合わせることで、より効率的なコードを書くことができます。

下記のコードを見てみましょう。

const getUserRole = (userId) => {
  const userRoles = {
    1: "管理者",
    2: "編集者",
    3: "閲覧者",
  };

  return userRoles[userId] || "無効なユーザーID";
};

const userId = 2;
console.log(getUserRole(userId));

実行結果↓

編集者

この例では、userRolesオブジェクトにユーザーIDと対応する役割を定義しています。

getUserRole関数では、switch文を使わずに、オブジェクトのプロパティアクセスを使ってユーザーの役割を取得しています。

このように、オブジェクトと組み合わせることで、switch文を使わずに条件分岐を行うことができ、より効率的なコードを書くことができます。

○サンプルコード10：モジュール化されたコード例

switch文を使ったコードは、モジュール化することで、より保守性の高いコードを書くことができます。

const fruitModule = {
  getFruitName: function(fruitCode) {
    switch (fruitCode) {
      case "A":
        return "りんご";
      case "B":
        return "バナナ";
      case "C":
        return "さくらんぼ";
      default:
        return "無効なフルーツコード";
    }
  },

  getFruitPrice: function(fruitCode) {
    switch (fruitCode) {
      case "A":
        return 100;
      case "B":
        return 80;
      case "C":
        return 120;
      default:
        return 0;
    }
  }
};

const fruitCode = "B";
const fruitName = fruitModule.getFruitName(fruitCode);
const fruitPrice = fruitModule.getFruitPrice(fruitCode);

console.log(`${fruitName}の価格は${fruitPrice}円です`);

実行結果↓