JavaScriptのif-else if文で複数条件を効率よく分岐させる書き方

JavaScriptでプログラムを記述する際、避けて通れないのが条件に応じた処理の分岐です。

ユーザーの入力値やAPIから取得したデータに基づいて、実行するコードを切り替えることはアプリケーション開発の基本と言えます。

しかし、処理すべき条件が増えるにつれて、if文やelse if文が複雑に重なり、コードの可読性が著しく低下することがあります。

メンテナンス性が高く、かつ実行効率の良いプログラムを書くためには、JavaScriptが持つ様々な構文を適切に使い分けるスキルが求められます。

本記事では、2026年のモダンな開発シーンにおいても通用する、複数条件を効率的に扱うためのテクニックを詳しく紹介します。

JavaScriptにおけるif-else if文の基本構造

まずは、最も標準的な複数条件分岐の書き方であるif-else if-else文の基本をおさらいしましょう。

この構文は、上から順番に条件式を評価し、最初にtrueとなったブロックの処理のみを実行します。

// 基本的なif-else if文の例
const score = 85;

if (score >= 90) {
    console.log("評価：S");
} else if (score >= 80) {
    console.log("評価：A");
} else if (score >= 70) {
    console.log("評価：B");
} else {
    console.log("評価：C");
}

評価：A

この書き方は非常に直感的であり、条件が数個程度であれば最適解となることが多いです。

しかし、条件が10個、20個と増えていくと、コードの縦の長さが伸びてしまい、全体の流れを把握するのが難しくなります。

また、else ifを多用すると、意図しない条件の重複や、評価の優先順位ミスが発生しやすくなるため注意が必要です。

条件を評価する順番の重要性

if-else if文を利用する際、最も重要なのは「評価の順番」です。

JavaScriptのエンジンは、最初の条件が合致した時点で以降のelse ifをスキップします。

そのため、発生頻度が高い条件や、より限定的な条件を上部に配置することがパフォーマンスと論理的正確性の向上に繋がります。

論理演算子を活用した条件の整理

複数の条件をif文の中に組み込む際、論理演算子（&&や||）を正しく使うことで、コードをスッキリさせることができます。

「AかつB」や「AまたはB」という関係性を整理することで、無駄なelse ifの階層を減らすことが可能です。

かつ（AND）とまたは（OR）の使い分け

例えば、「ユーザーがログインしており、かつ管理者権限を持っている場合」という条件を考えます。

const isLoggedIn = true;
const isAdmin = true;

if (isLoggedIn && isAdmin) {
    console.log("管理画面にアクセス可能です。");
} else {
    console.log("アクセス権限がありません。");
}

このように、複数のフラグを同時に判定することで、ネスト（入れ子）を深くせずに済みます。

また、JavaScriptには「短絡評価（ショートサーキット）」という特性があります。

&&演算子では左辺がfalseなら右辺を評価せず、||演算子では左辺がtrueなら右辺を評価しません。

これを利用して、計算コストの高い処理を条件式の後半に置くことで、無駄な計算を省くテクニックも有効です。

早期リターン（Early Return）による可読性の向上

複雑なif-else if文を解消するための最も強力なパターンの一つが「早期リターン」です。

これは、関数の冒頭で例外的な条件や単純な条件を先に処理して関数を終了させる手法です。

ガード句としてのif文

早期リターンを導入すると、メインの処理がインデント（字下げ）の浅い場所に記述できるようになります。

function checkStatus(status) {
    // 早期リターン（ガード句）
    if (status === "pending") {
        return "処理待ちです。";
    }
    if (status === "error") {
        return "エラーが発生しました。";
    }
    if (status === "success") {
        return "完了しました。";
    }

    return "状態が不明です。";
}

この書き方であれば、else ifを連ねる必要がなく、各条件が独立しているため、新しい条件の追加も容易です。

コードを読む側も、「条件に合致したらすぐに終わる」という確信を持って読み進めることができます。

switch文による等価判定の効率化

特定の変数の値に基づいて多くの分岐を作成する場合、switch文が有効な選択肢となります。

特に「値が完全に一致するかどうか」を判定する際には、if-else ifよりも構造が明確になります。

switch文の適切な使い所

以下の例のように、一つの変数に対して多数のリテラル値を比較する場合に適しています。

const color = "red";

switch (color) {
    case "red":
        console.log("止まれ");
        break;
    case "yellow":
        console.log("注意");
        break;
    case "green":
        console.log("進め");
        break;
    default:
        console.log("信号故障");
}

switch文を使用する際は、breakを忘れないように注意してください。

breakを記述しないと、次のcase節まで処理が実行される「フォールスルー」が発生します。

意図的にフォールスルーを利用して、複数のcaseで同じ処理を共有することも可能ですが、コードが複雑になるため多用は禁物です。

オブジェクトやMapを使用した「ルックアップテーブル」

2026年現在のモダンなJavaScript開発において、最も推奨される効率的な分岐手法の一つが「オブジェクト（またはMap）へのマッピング」です。

if-else ifやswitchを使わずに、データとして条件と処理を定義することで、ロジックを極めてシンプルに保てます。

オブジェクトリテラルによる実装

以下のコードは、キーを条件、値を処理結果とするルックアップテーブルの例です。

const actionType = "update";

const actionMap = {
    create: "新規作成処理を実行します",
    update: "更新処理を実行します",
    delete: "削除処理を実行します",
    read: "読み込み処理を実行します"
};

// 条件分岐なしで値を取得
const message = actionMap[actionType] || "不明なアクションです";
console.log(message);

更新処理を実行します

この手法のメリットは、「ロジック（プログラムの動き）」と「データ（条件の定義）」を分離できる点にあります。

条件が増えたとしても、actionMapオブジェクトの中に新しいキーと値を追加するだけで対応可能です。

関数のマッピング

単なる文字列だけでなく、実行したい関数をマッピングすることもできます。

const taskType = "archive";

const tasks = {
    save: () => console.log("データを保存しました"),
    archive: () => console.log("データをアーカイブしました"),
    clear: () => console.log("データを消去しました")
};

const executeTask = tasks[taskType];

if (executeTask) {
    executeTask();
} else {
    console.log("タスクが見つかりません");
}

このパターンを使えば、巨大なif-else ifブロックを完全に消し去ることができます。

Mapオブジェクトによる高度なキー管理

条件のキーが文字列以外（数値やオブジェクト、関数など）である場合や、順序を保持したい場合には、Mapオブジェクトの使用が適しています。

Mapは検索パフォーマンスが安定しており、大規模なデータセットを扱う場合にif文の連続よりも有利になることがあります。

const config = new Map([
    [1, "モード：初級"],
    [2, "モード：中級"],
    [3, "モード：上級"]
]);

const mode = config.get(2) || "モード：未設定";
console.log(mode);

JavaScriptエンジンの最適化が進んだ現在では、単純なプロパティアクセスは非常に高速です。

しかし、動的なキー追加や頻繁な削除が行われる場合は、Mapの方が意図が明確になり、メモリ効率も良くなる傾向があります。

2026年におけるパフォーマンスの考え方

現代のJavaScript実行エンジン（V8など）は非常に高度に最適化されています。

そのため、if文とswitch文、あるいはオブジェクトマッピングの間に、人間が体感できるほどの実行速度の差が出ることは稀です。

それでも、計算量が膨大なループ内で分岐を数万回繰り返すようなケースでは、分岐の仕方が影響を及ぼすこともあります。

分岐予測（Branch Prediction）を意識する

CPUレベルでは「分岐予測」という仕組みが働いており、次に実行されるコードの道を予測しています。

JavaScriptにおいても、よく通るパスをifの先頭に置くことで、わずかながらエンジンの最適化を助けることができます。

しかし、何よりも優先すべきは「エンジニアが読んで理解しやすいコード」であるということを忘れてはいけません。

複雑な条件を簡潔にするためのテクニック

条件式そのものが複雑で読みにくい場合は、変数に意味のある名前を付けて「抽出」することが効果的です。

// 読みにくい例
if (user.age >= 20 && user.hasLicense && !user.isSuspended) {
    // ...処理
}

// 改善例
const isEligibleToDrive = user.age >= 20 && user.hasLicense && !user.isSuspended;

if (isEligibleToDrive) {
    // ...処理
}

このように、ifのカッコ内に複雑な式を詰め込まず、論理的な意味を持つ名前を与えることで、コードの意図が明確になります。

まとめ

JavaScriptで複数の条件を効率よく分岐させるには、状況に応じた構文の選択が不可欠です。

単純な数個の比較であれば基本のif-else if文、等価判定が多いならswitch文、そして拡張性を重視するならオブジェクトやMapによるマッピングを検討しましょう。

また、早期リターンを積極的に活用することで、コードの階層を浅く保ち、読み手の負担を大幅に軽減できます。

2026年の開発現場では、単に動くコードを書くだけでなく、「将来の自分が読んでも一目で理解できる」ような、整然とした条件分岐を目指すことが重要です。

今回紹介したテクニックを自身のプロジェクトに合わせて使い分け、クリーンで保守性の高いJavaScriptコードを追求してみてください。