【JavaScript】if文・switch文の基本と使い分けパターン

JavaScriptで条件分岐を行う際に頻繁に登場するのが if文 と switch文。

どちらも似たような使い方ができますが、目的や可読性によって使い分けることが大切です。

この記事では、それぞれの基本構文と使い分けパターンを解説します。

if文の基本構文と使い方

if 文は、条件に応じた処理の分岐を行いたいときに使います。条件が多岐にわたる場合でも柔軟に対応できるのが特長です。

let score = 85;

if (score >= 90) {
  console.log("素晴らしい成績です！");
} else if (score >= 70) {
  console.log("よくできました！");
} else {
  console.log("次はもっと頑張りましょう！");
}

特徴

条件式は柔軟に書ける（比較・論理演算など）
ネスト（入れ子）も可能
true/false の評価で分岐

switch文の基本構文と使い方

switch 文は、1つの値を複数の候補と比較して分岐したいときに使います。特定の変数の値に応じて処理を分岐させるときに向いています。

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("週の始まりです");
    break;
  case "Friday":
    console.log("もうすぐ週末ですね");
    break;
  default:
    console.log("平凡な一日です");
}

特徴

評価する対象は1つの値
各 case で値を比較
break を忘れるとフォールスルー（次のケースも実行）に注意

if文とswitch文の使い分けパターン

パターン	向いている構文	理由
値の比較（特に数値や文字列）	`switch`	可読性が高く、選択肢が多いときに便利
複雑な条件（範囲や論理式）	`if`	条件式を自由に書ける
値のチェックが数個だけ	`if`	簡潔に記述できる
default的な処理が必要	両方OK	`if`の`else`または`switch`の`default`が使える
入れ子の条件分岐が必要	`if`	ネストしやすい

例：数字に応じて評価を出す

if文を使う例：

let num = 5;
if (num > 0 && num <= 10) {
  console.log("0より大きく10以下です");
}

switch文では不向き：

// switch では「範囲」での分岐ができないため不向き

フォールスルーに注意

switch文では、break を記述しないと、次のケースに処理が流れてしまいます。

let color = "red";

switch (color) {
  case "red":
    console.log("赤です");
  case "blue":
    console.log("青です");
    break;
}
// 出力: 赤です 青です（意図しない出力）

以下は「switch文が忌避される理由」の補足用セクションです。記事に追加する形でご活用ください。

switch文が忌避される理由とは？

switch文は簡潔な条件分岐が可能で便利な場面もありますが、一部の開発者やプロジェクトでは忌避される傾向もあります。

それには、以下のような理由が主に挙げられます。

フォールスルーの危険性

前日しましたが、break を書き忘れると、意図しないケースに処理が流れてしまいます。これによりバグが発生しやすくなります。

let status = 'pending';

switch (status) {
  case 'pending':
    console.log('処理中です');
  case 'done':
    console.log('完了しました');
    break;
}
// 結果: 「処理中です」「完了しました」が両方出力される

このようなミスは、特に初心者にとって気づきにくく、意図しない動作の原因になりがちです。

拡張性・保守性が低い

switch文は条件が増えると 冗長で見通しが悪くなるため、長くなればなるほど保守が困難になります。たとえば以下のようなコード：

switch (action.type) {
  case 'ADD_TODO':
    // ...
  case 'REMOVE_TODO':
    // ...
  case 'UPDATE_TODO':
    // ...
  // ケースが多くなるほど読みにくくなる
}

このようなケースでは、オブジェクトリテラルやマップによる分岐のほうが簡潔になる場合があります。

柔軟な条件分岐ができない

switchは値の一致にしか対応しておらず、ifのように範囲比較や論理演算は使えません。

// できない例
switch (age > 18 && age < 65) {
  case true:
    console.log("働き盛りです");
    break;
}

こういった条件分岐は if のほうが適しています。

関数型や宣言的スタイルに合わない

現代のJavaScriptでは、React などの 関数型プログラミング的な書き方が主流です。そのような場面では、switchよりもマップや関数を使った分岐のほうが自然で柔軟です。

const handlers = {
  add: () => console.log('追加'),
  remove: () => console.log('削除'),
  update: () => console.log('更新')
};

handlers[action.type]?.();