閉じる

JavaScriptのif文で複数条件を指定する方法：論理演算子と配列を用いたスマートな書き方

広告

JavaScriptを使用してWebアプリケーションを開発する際、避けては通れないのが「条件分岐」の実装です。

特に、複数の条件を組み合わせて複雑なロジックを構築する必要がある場面は非常に多く存在します。

2026年現在のモダンなフロントエンド開発においては、単に機能を実現するだけでなく、コードの可読性や保守性を高く保つことが強く求められています。

初心者のうちはif文を入れ子（ネスト）にしてしまいがちですが、論理演算子や配列メソッドを駆使することで、驚くほどスッキリとしたコードを記述することが可能です。

本記事では、JavaScriptのif文における複数条件を指定する基本から、配列を活用した応用的な書き方までを詳しく解説します。

目次 [ close ]
  1. 論理演算子（&&, ||）による複数条件の基本
    1. かつ（AND）条件：&& 演算子
    2. または（OR）条件：|| 演算子
  2. 複雑な条件を組み合わせる際の注意点
    1. 優先順位を制御するカッコ () の活用
  3. 配列メソッドを用いたスマートな複数条件判定
    1. Array.prototype.includes() の活用
    2. Array.prototype.some() と Array.prototype.every()
  4. コードの可読性を向上させるテクニック
    1. 条件を変数に代入する
    2. 早期リターン（ガード句）の導入
  5. 条件分岐における真偽値の評価ルール
    1. Falsyな値の一覧
  6. まとめ

論理演算子（&&, ||）による複数条件の基本

JavaScriptのif文で最も一般的に複数条件を扱う方法は、論理演算子を使用することです。

論理演算子には主に「かつ（AND）」を表す&&と、「または（OR）」を表す||の2種類があります。

かつ（AND）条件：&& 演算子

すべての条件がtrueである場合にのみ、処理を実行したいときは&&演算子を使用します。

例えば、「ユーザーがログインしており、かつ管理者権限を持っている場合」といった条件設定がこれに該当します。

JavaScript
const isLoggedIn = true;
const isAdmin = true;

if (isLoggedIn && isAdmin) {
  // 両方の条件がtrueの場合に実行される
  console.log("管理者パネルにアクセス可能です。");
}
実行結果
管理者パネルにアクセス可能です。

&&演算子は、左側の条件から順に評価され、一つでもfalseがあればその時点で評価を終了します。

これを「短絡評価（ショートサーキット評価）」と呼び、パフォーマンスの最適化やエラー防止に役立ちます。

または（OR）条件：|| 演算子

複数の条件のうち、少なくとも一つがtrueであれば処理を実行したいときは||演算子を使用します。

「会員ランクがゴールド、またはクーポンを所持している場合」といった割引条件の判定などに便利です。

JavaScript
const isGoldMember = false;
const hasCoupon = true;

if (isGoldMember || hasCoupon) {
  // どちらか一方がtrueであれば実行される
  console.log("割引が適用されます。");
}
実行結果
割引が適用されます。

||演算子も短絡評価が行われ、最初のtrueが見つかった時点で残りの条件は無視されます。

複雑な条件を組み合わせる際の注意点

&&と||を同じif文の中で混ぜて使う場合は、評価の優先順位に注意が必要です。

JavaScriptでは、&&は||よりも優先的に評価されるというルールがあります。

優先順位を制御するカッコ () の活用

意図しない判定結果を避けるためには、数学の計算式と同じように丸カッコ()を使ってグループ化を行います。

JavaScript
const age = 20;
const hasTicket = true;
const isSpecialGuest = false;

// カッコなし：age >= 18 && hasTicket が先に評価される
if (age >= 18 && hasTicket || isSpecialGuest) {
  console.log("入場可能です。");
}

// カッコあり：条件を明確にグループ化
if ((age >= 18 && hasTicket) || isSpecialGuest) {
  console.log("入場許可を明確に判定しました。");
}

カッコを適切に配置することで、「チケットを持つ18歳以上」または「特別なゲスト」という論理構造が第三者にも伝わりやすくなります。

コードの可読性を高めるため、優先順位が明白な場合でもカッコを付けることが推奨されるケースが多いです。

配列メソッドを用いたスマートな複数条件判定

特定の変数が「複数の候補値のいずれかに一致するか」を判定したい場合、||を並べるのは非効率です。

例えば、if (fruit === 'apple' || fruit === 'banana' || fruit === 'orange')のようなコードは冗長です。

このような場面では、配列のincludes()メソッドを活用するのがスマートな書き方です。

Array.prototype.includes() の活用

includes()を使えば、候補値をリスト化して簡潔に記述できます。

JavaScript
const targetFruit = 'banana';
const validFruits = ['apple', 'banana', 'orange', 'grape'];

if (validFruits.includes(targetFruit)) {
  console.log("対象のフルーツが含まれています。");
}

この手法のメリットは、条件が増えても配列に要素を追加するだけで済む点にあります。

また、条件となる値が外部ファイルやAPIから取得される場合にも柔軟に対応可能です。

Array.prototype.some() と Array.prototype.every()

より高度な条件判定が必要な場合は、some()やevery()が役立ちます。

  • some(): 配列内の少なくとも一つの要素が条件を満たす場合にtrueを返します。
  • every(): 配列内のすべての要素が条件を満たす場合にtrueを返します。
JavaScript
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 17 },
  { name: "Charlie", age: 30 }
];

// 一人でも未成年がいるか判定
const hasMinor = users.some(user => user.age < 18);

if (hasMinor) {
  console.log("未成年のユーザーが含まれています。");
}

オブジェクトの配列に対して複雑な属性チェックを行う際は、これらのメソッドが非常に強力な武器となります。

コードの可読性を向上させるテクニック

if文の中身が長くなりすぎると、プログラムの意図を理解するのが難しくなります。

条件式そのものを変数に切り出すことで、ソースコードの「ドキュメント性」を高めることができます。

条件を変数に代入する

何を判定しているのかを名前で表現することで、コメントがなくても意味が通じるようになります。

JavaScript
const isAdult = user.age >= 18;
const hasValidPayment = user.hasCreditCard || user.hasBalance;
const isSubscriptionActive = user.status === 'active';

if (isAdult && hasValidPayment && isSubscriptionActive) {
  processOrder();
}

このように記述することで、if文の中身を見ただけでビジネスロジックが直感的に理解できるようになります。

早期リターン（ガード句）の導入

複雑な条件分岐が続く場合は、if-elseを重ねるのではなく、条件を満たさない場合に早めにreturnしてしまう手法が有効です。

JavaScript
function checkAccess(user) {
  if (!user.isLoggedIn) {
    return "ログインしてください。";
  }

  if (user.role !== 'admin') {
    return "管理者権限が必要です。";
  }

  if (user.isSuspended) {
    return "アカウントが凍結されています。";
  }

  return "アクセス許可";
}

ネストを浅く保つことは、バグの混入を防ぐための鉄則です。

条件分岐における真偽値の評価ルール

JavaScriptには「Truthy（真とみなされる値）」と「Falsy（偽とみなされる値）」という概念があります。

これらを正しく理解していないと、意図しない複数条件の判定結果を招く恐れがあります。

Falsyな値の一覧

以下の値は、if文の判定においてfalseとして扱われます。

値説明
false論理値の偽
0, -0, 0n数値のゼロ
"" (空文字)長さが0の文字列
null値が存在しないことを示す
undefined値が定義されていない
NaN数値ではない (Not-a-Number)

例えば、数値の0が有効な値として扱われるべきロジックでif (value)と書くと、0の場合に処理がスキップされてしまいます。

厳密な判定が必要な場合は、if (value !== null && value !== undefined)のように比較演算子を明示的に使用しましょう。

また、モダンなJavaScriptではNull合体演算子（??）を活用して、デフォルト値をスマートに設定する手法も一般的です。

まとめ

JavaScriptのif文で複数条件を扱う際は、単に演算子を繋げるだけでなく、読み手にとってのわかりやすさを意識することが大切です。

基本となる&&や||の活用はもちろんのこと、カッコによる優先順位の明示を忘れないようにしましょう。

さらに、includes()やsome()といった配列メソッドを組み合わせることで、冗長なコードを劇的に削減できます。

条件式を変数に切り出したり、早期リターンを活用したりといった工夫を凝らすことで、2026年のスタンダードに相応しい高品質なコードを目指してください。

日々のコーディングの中で「もっとシンプルに書けないか」を意識することが、スキルアップへの一番の近道となります。

URLをコピーしました！