JavaScriptのif文で複数条件（AND）を扱う方法：&&演算子の基本から効率的な書き方まで

2026年5月5日2026年5月8日

制御構文

JavaScriptでプログラミングを行う際、条件分岐は避けて通れない非常に重要な要素です。

特に「もしAかつBであれば」という、複数の条件を同時に満たす場合にのみ処理を実行したい場面は頻繁に登場します。

このような論理積（AND）を表現するために使用されるのが&&演算子です。

本記事では、JavaScriptのif文において論理積（AND）を扱うための基礎知識から、現場で役立つ実践的なテクニック、さらにはコードの可読性を高めるための書き方までを詳しく網羅します。

初心者の方から、よりクリーンなコードを目指す中級者の方まで、日々の開発に役立てていただける内容となっています。

目次 [ close ]

JavaScriptにおけるAND演算子（&&）の基本

JavaScriptで「かつ（AND）」の条件を記述するには、&&（アンパサンド2つ）という論理演算子を使用します。

この演算子を使用することで、複数の条件式を結合し、すべての条件が真（true）である場合のみ、全体の評価結果を真にすることができます。

基本的な構文

もっともシンプルなif文での使い方は以下の通りです。

JavaScript

if (条件A && 条件B) {
  // 条件Aと条件Bがどちらもtrueの場合に実行される
  console.log("すべての条件を満たしました");
}

例えば、ユーザーの年齢が20歳以上、かつ有効な免許を所持しているかどうかを確認するプログラムを考えてみましょう。

JavaScript

const age = 25;
const hasLicense = true;

if (age >= 20 && hasLicense) {
  console.log("車を運転することができます。");
} else {
  console.log("運転することはできません。");
}

実行結果

車を運転することができます。

この例では、age >= 20がtrueであり、かつhasLicenseもtrueであるため、全体の条件が成立しています。

3つ以上の条件を組み合わせる

&&演算子は2つだけでなく、3つ以上の条件を連結することも可能です。

JavaScript

const isMember = true;
const points = 1000;
const isSpecialSale = true;

if (isMember && points >= 500 && isSpecialSale) {
  console.log("特別割引が適用されます！");
}

このように、左から順番に評価され、すべてが真であることを条件として処理を記述できます。

短絡評価（ショートサーキット）の仕組みと活用

JavaScriptの&&演算子を使いこなす上で欠かせないのが、短絡評価（ショートサーキット評価）という特性の理解です。

短絡評価とは

&&演算子は、左側のオペランド（値）を評価し、その結果が偽（falsy）であった場合、右側のオペランドを評価せずに即座に終了します。

なぜなら、1つでも偽があれば、全体のAND条件が真になることはあり得ないからです。

以下のコードで確認してみましょう。

JavaScript

let checkCount = 0;

function isConditionA() {
  checkCount++;
  return false;
}

function isConditionB() {
  checkCount++;
  return true;
}

if (isConditionA() && isConditionB()) {
  console.log("成功");
}

console.log("関数が実行された回数: " + checkCount);

実行結果

関数が実行された回数: 1

この結果を見ると、isConditionBは実行されていません。

これはisConditionAがfalseを返した時点で、全体の評価がfalseに確定したためです。

安全なプロパティアクセスのための活用

この特性は、オブジェクトのプロパティを参照する際のエラー回避によく利用されます。

例えば、オブジェクトがnullやundefinedの可能性がある場合、そのプロパティに直接アクセスするとエラーが発生してしまいます。

JavaScript

const user = null;

// userがnullの場合、user.nameを参照しようとするとエラーになる
// しかし、&&演算子を使えば安全にチェックできる
if (user && user.name) {
  console.log("名前: " + user.name);
} else {
  console.log("ユーザー情報が見つかりません");
}

実行結果

ユーザー情報が見つかりません

近年では「オプショナルチェーン（?.）」が普及していますが、依然として複数の条件をロジカルに組み合わせる場面では&&が重要な役割を果たします。

JavaScriptにおける「真偽値」の注意点

if文や&&を使用する際に注意が必要なのが、JavaScriptにおける「Falsy（偽値）」の概念です。

Boolean型のfalse以外にも、以下の値はif条件式でfalseと見なされます。

値	説明
`false`	論理値の偽
`0`	数値のゼロ
`-0`	数値のマイナスゼロ
`0n`	BigIntのゼロ
`""`	空文字列
`null`	値が存在しない
`undefined`	定義されていない
`NaN`	数値ではない（Not a Number）

これらの値が条件式の左側にくると、&&の右側は評価されません。

数値の0や空文字""を有効な値として扱いたい場合は、厳密にundefined等と比較する必要があります。

複雑な条件を綺麗に書くためのリファクタリング

if文の中に大量の&&を詰め込むと、コードの可読性が著しく低下します。

メンテナンス性の高いコードを書くための工夫を紹介します。

条件を変数に抽出する

条件式が3つ以上になる場合は、意味のある名前を付けた変数に代入することで、コードの意図が明確になります。

JavaScript

// 読みづらい例
if (user.age >= 18 && user.hasPaid && !user.isBanned && user.emailVerified) {
  // 処理
}

// 改善例
const canAccessContent = user.age >= 18 && 
                         user.hasPaid && 
                         !user.isBanned && 
                         user.emailVerified;

if (canAccessContent) {
  // 処理
}

このように記述することで、後からコードを見返した際にも「何を確認している条件なのか」が瞬時に理解できるようになります。

早期リターン（ガード節）の活用

深いネスト（入れ子）を避けるために、条件を満たさない場合に早めに処理を終了させる手法も効果的です。

JavaScript

// ネストが深くなる例
function processOrder(order) {
  if (order && order.isValid) {
    if (order.items.length > 0) {
      if (order.paymentStatus === "completed") {
        console.log("配送準備を開始します");
      }
    }
  }
}

// 改善例（ガード節）
function processOrder(order) {
  if (!order || !order.isValid) return;
  if (order.items.length === 0) return;
  if (order.paymentStatus !== "completed") return;

  console.log("配送準備を開始します");
}

ガード節を使うことで、本来実行したいメインの処理をif文の深い外側に配置でき、コードの見通しが劇的に改善されます。

論理積（AND）と論理和（OR）の優先順位

複数の&&（AND）と||（OR）を同じif文の中で使う場合、その優先順位に注意が必要です。

JavaScriptでは、&&は||よりも優先順位が高いというルールがあります。

JavaScript

// 期待：(A または B) かつ C
// 実際：A または (B かつ C)
if (isAdmin || isEditor && hasPermission) {
  // ...
}

上記のコードは、開発者が意図した挙動にならない可能性があります。

意図を明確にするため、また計算の優先順位を保証するために、カッコ () を使ってグループ化することを強く推奨します。

JavaScript

// 正しい記述
if ((isAdmin || isEditor) && hasPermission) {
  console.log("編集権限があります");
}

このように括弧で囲むことで、読み手にとっても曖昧さがなくなり、バグの混入を防ぐことができます。

実践テクニック：論理代入演算子（&&=）

2021年以降のJavaScript（ES2021以降）では、論理代入演算子が導入されています。

これは、ある変数が真（Truthy）である場合にのみ、別の値を代入するという処理を簡潔に書くためのものです。

JavaScript

let userStatus = "active";
let message = "Welcome!";

// 従来の書き方
if (userStatus === "active") {
  message = "Welcome Back!";
}

// 論理代入演算子を使った書き方（概念的な例）
let isLoggedIn = true;
let sessionToken = "abc";

// isLoggedInが真の場合のみ、右辺が評価・代入される
isLoggedIn &&= (sessionToken = "new_token");

この演算子&&=は、設定の上書きやフラグの更新時に役立ちます。

ただし、多用しすぎると直感的に理解しにくい場合もあるため、チームのコーディング規約に合わせて使用を検討しましょう。

AND条件を扱う際のデバッグ方法

複雑なAND条件で「なぜかif文の中に入らない」という事態に直面したときは、個々の条件を分割してデバッグするのが近道です。

JavaScript

const cond1 = user.isMember;
const cond2 = cart.total > 10000;
const cond3 = coupon.isValid;

console.log({ cond1, cond2, cond3 }); // 各条件の真偽値を一括確認

if (cond1 && cond2 && cond3) {
  // ...
}

このように、一度変数に切り出してからconsole.log等で出力することで、どの条件がfalseになって全体の足を引っ張っているのかを一目で特定できます。