複数の条件を組み合わせたい時、JavaScriptでのif文は非常によく使われる表現です。AND（&&）やOR（||）の論理演算子を使えば、条件を柔軟に設定できて、処理の流れを細かく制御できます。ネストや優先順位、可読性やパフォーマンスも気になります。この記事では、実践的な例や最新の仕様も含めて、if構文で複数条件を扱うための知識を丁寧に解説します。
目次
JavaScript if 構文 複数条件 の基本構造
JavaScriptでif構文を使って複数条件をチェックする際、まず抑えるべきは「基本構造」です。論理演算子AND（&&）とOR（||）、そして否定演算子NOT（!）を使って、条件を組み合わせられます。
if文の書き方としては、シンプルな条件一つの場合はif（条件） { }ですが、複数条件がある場合は論理演算子でつないだり、else ifで分岐を増やしたりします。ネストを使うケースもありますが、可読性の観点から慎重に設計する必要があります。
論理演算子 AND（&&）を使った条件の組み合わせ
ANDは「かつ」の条件を表し、複数の条件がすべて真（true）でなければ、全体は偽（false）になります。全ての条件を満たす必要がある処理に適しています。
例えば、変数scoreが60以上かつ100未満であれば合格とする場合は、if（score >= 60 && score < 100）{…}のように書きます。どちらか一方でもfalseであれば処理は実行されません。
論理演算子 OR（||）を使った条件の組み合わせ
ORは「または」の条件を表し、複数の条件のうちどれか一つでも真であれば全体が真になります。いくつかの許可シナリオがある場合などに使われます。
例として、曜日が土曜または日曜であれば休日と判断するような処理で、if（day === ‘土曜’ || day === ‘日曜’）{…}のように書けます。どちらか一方がtrueなら内部処理が実行されます。
否定演算子 NOT（!）で条件を反転させる
NOT演算子は単独の条件の真偽を反転させるために使います。ifの条件が成り立たないことをチェックしたい時に役立ちます。単純な比較だけでなく論理演算子と組み合わせて利用できます。
例えば、ユーザーがログインしていない場合に処理を分岐させたいなら if (!isLoggedIn) {…} のように書きます。また、if (!(a > b && c < d)) のように、複雑な条件を逆にするケースでも有効です。
複数条件をさらに活用する実践的なパターンと注意点
複数条件をうまく使うことでif構文は強力になりますが、同時に落とし穴もあります。可読性、優先順位、ネストの深さ、短絡評価（ショートサーキット）などに注意することが重要です。
ネストしたif文と論理演算子の使い分け
条件が階層的で依存関係がある場合はネストを使うことが自然な選択です。しかし、単に複数条件をチェックしたいだけなら論理演算子を使った方が簡潔でわかりやすくなります。ネストが深くなるとコードが読みづらくなり、バグの原因にもなります。
例えば、まずユーザーが登録されているか確認し、その後年齢や権限をチェックする場合は if（isRegistered）{ if（age >= 18 && isAdmin）{…} } のようなネストが考えられます。条件を整理すれば、外側のifで登録確認、内側でその他のチェック、という構造です。
優先順位と括弧で明示する論理演算子の結合
AND（&&）と OR（||）には優先順位があり、AND の方が OR より優先されます。意図しない評価順になることを避けるため、複数の演算子を混ぜる場合は括弧を使って明示することが良い習慣です。
例： if ((a > b && c < d) || e === f)というように、内部の AND を先に評価させたい部分を括弧で囲むことで、論理構造が見やすくなります。括弧を省略すると優先順位によって意図と異なる動作になることがあります。
短絡評価（ショートサーキット）の理解と利活用
論理演算子は短絡評価を採用しており、AND の場合は最初に false となる条件を見つけた時点で以降を評価しません。OR の場合は最初に true となる条件を見つけた時点で残りを無視します。
この性質は効率的ですが、条件内に副作用のある処理を含めると予期せぬ動作となることがあります。条件式の中で関数呼び出しやプロパティ参照などがあり副作用をもたらす場合は、意図を明確にし、副作用がない設計を心がけるべきです。
高度な応用例：複数条件分岐を使ったユースケース集
実際の開発でよく出てくる複数条件のパターンを見ていきます。フォームのバリデーションや認可（authorization）、状態管理など多くの場面で使われます。
フォーム入力のバリデーションでAND/ORを使う
ユーザー登録や問い合わせフォームにおいて複数の必須項目がある時、全ての項目が入力されているかチェックするのに AND が使われます。一方で、メールアドレスまたは電話番号のどちらか一方があればよい、というような OR の使い方もあります。
例として： if (name !== ‘’ && (email !== ‘’ || phone !== ‘’)) { … } のように、名前は必須、連絡先はメールか電話のどちらか必須というような条件を組み合わせます。
認可判定：ユーザー権限と状態の組み合わせ
たとえば、管理者かつアクティブなユーザーにのみ操作を許可するケースが典型です。 if (isAdmin && isActive) { … } のように書きます。場合によっては、管理者でないが特定の権限をもつユーザーも許可、など複数 OR を交えることもあります。
複雑な状態管理では AND と OR の混合が必要になりますが、その際は優先順位や可読性を考えてコードを書くべきです。条件が多くなりすぎるなら関数に切り出すことで整理できます。
状態のスイッチングやタグ付け処理における条件一覧
状態やタグが複数あり、それによって処理を変える場合には if … else if を使った分岐も有効です。 OR だけで書くと重複が生じたり分かりにくくなったりすることがあります。
たとえばユーザーの状態が「新規」「返答待ち」「完了」「キャンセル」など複数のケースがあり、それぞれ異なる処理を行う場合、 if（status === ‘新規’）{…} else if（status === ‘返答待ち’）{…} else if（status === ‘完了’）{…} else{…} のように列挙します。
エラーになりがちな落とし穴と回避策
複数条件を使う際に初心者や中級者が陥りやすいミスと、その防止策を押さえておくことで、バグを未然に防げます。
型変換による予期せぬ真偽値評価
JavaScriptでは文字列・数値・undefined・nullなどが自動的に真偽値に変換されますが、この変換が思わぬ結果を招くことがあります。== よりも === を使うことで型も一致する比較をするのが安全です。
例として、空文字列 ” は偽扱いですが、 ‘0’ のような文字列は真とみなされます。数値 0 や NaN は偽となります。boolean 型以外の値を条件にするなら、明示的な比較や型チェックを行うことが品質向上につながります。
論理判定の優先度ミスによるバグ
先述のように && が || より優先されますが、意図せず評価順が変わることで思わぬ条件評価になることがあります。混雑した条件式を書く場合は括弧で明示して、また他のエンジニアが見てもわかるようなスタイルを採用すべきです。
例： if (a === b || c === d && e === f) は、実際には c === d && e === f が先に評価されます。もし意図が (a === b || c === d) && e === f であれば、括弧を正しく配置する必要があります。
ネストが深くなることによる可読性の低下
ネストした if 文が深くなれば可読性が著しく低下します。複雑な分岐が必要な場合は関数に切り出すか、条件を配列やオブジェクトで管理する方法も検討できます。
また、テンプレートリテラルや関数を使って条件部分を整理することで可読性を維持しやすくなります。過度なネストや長い条件式は後で保守性を悪くする可能性があります。
最新仕様や実践で知っておきたい技術的トピック
JavaScriptは言語仕様が進化しており、条件分岐に関連する最新機能やブラウザ対応、最適化の知見を理解しておくと役立ちます。
Nullish Coalescing Operator（??）と条件分岐の組み合わせ
Nullish Coalescing（??）は null または undefined の場合に代替値を返す演算子で、複数条件分岐の中で未定義値をチェックするときに便利です。条件式の中で undefined/null チェックを簡潔に行えます。
例： const displayName = userName ?? ‘ゲスト’; のように、userName が null または undefined のときには ‘ゲスト’ を使います。if 文内では、 if (userName ?? defaultName === ‘ゲスト’) のように組み合わせて書くこともあります。
Optional Chaining（?.）があるときの安全な条件チェック
オブジェクトのプロパティが未定義の可能性がある場合、オプショナルチェイニングを使うことで安全にアクセスできます。条件にアクセスして値をチェックする際にエラーを防ぎます。
例： if (user?.profile?.age >= 18 && user?.isActive) { … } のように user.profile が undefined の場合も例外を投げることなく処理が止まります。これにより条件分岐が堅牢になります。
論理代入演算子（&&=, ||=）と条件付き代入
最近の仕様では論理代入演算子が導入されており、条件に応じて変数に代入する処理を簡潔に書けます。コード量を減らし可読性を保つのに役立ちます。
例えば、変数 flag が真の場合にプロパティをセットしたいときに、 flag &&= someValue のように書けます。OR の場合は ||= を使うことで変数が偽なら代入、というような意図を表現できます。
パフォーマンスと可読性を両立させる設計のコツ
複数条件を扱うif構文は正確であるだけでなく、読みやすく保守しやすく書くことが重要です。大規模プロジェクトや複数名での開発では特に設計力が問われます。
関数に切り出して条件を整理する
複雑な条件が直に if 文に現れると長くなり可読性が低下します。条件を関数に切り出すことでテスト可能で再利用しやすくなります。
例： function isEligible(user) { return user.isActive && (user.role === ‘admin’ || user.role === ‘moderator’); } のように書いておき、 if (isEligible(user)) { … } のように使うと見通しがよくなります。
論理演算子の短絡評価を応用して早期リターンを使う
条件が複雑な場合は早期リターンを使う手法が効果的です。if 文内を深くネストするよりも、最初に異常系を排除して残りの処理を整理すると見た目がすっきりします。
例： if (!user) return; if (!user.isActive) return; // 通常処理 のように書くことでガード句を設ける設計になります。
テストを書くことで論理条件の正確性を確保する
複数条件を使ったコードは組み合わせが多くなるため、ユニットテストや結合テストを通じて期待する挙動を確かめることが不可欠です。条件の網羅性を考えたテストケースを用意しましょう。
たとえば、全ての AND 条件が真、1つだけ偽、複数偽であるケース、OR 条件が複数真・ひとつだけ真など、それぞれのパターンをカバーすると安心です。
実践コード例で理解を深めよう
ここまでの内容を受けて、具体的なコード例で複数条件のパターンを見ていきます。典型的なケースを実際の書き方で比較します。
年齢と会員ステータスでアクセス制御をする例
例えば、あるページにアクセスできるのは“18歳以上かつ会員でアクティブなユーザー”だけとします。 if (age >= 18 && isMember && isActive) { console.log(‘アクセス許可’); } else { console.log(‘アクセス拒否’); } のようになります。すべての条件が満たされないとアクセスは拒否されます。
時間帯または曜日で処理を切り替える例
営業時間中または特別営業日の場合に受付を行いたいというシナリオがあります。 if ((hour >= 9 && hour < 17) || isHoliday) { console.log('受付中'); } else { console.log('本日は営業していません'); } のように AND と OR を組み合わせることで表現できます。
入力チェック＋条件依存のネスト例
例えば、問い合わせフォームでメールアドレスが入力されていればさらにドメインが許可されたものかを判定したいケース。 if (email !== ”) { if (email.endsWith(‘@example.com’) || email.endsWith(‘@sample.net’)) { console.log(‘有効なメールアドレス’); } else { console.log(‘ドメインが違います’); } } else { console.log(‘メールアドレスを入力してください’); }
まとめ
JavaScriptで if 構文を使って複数条件をチェックするには、論理演算子（AND、OR、NOT）を理解し適切に使うことが肝心です。演算子の優先順位や括弧による明示、型の比較、ネストの深さなどに注意することでバグを防げます。
また、可読性と保守性を優先してコードを整理し、関数に切り出す、早期リターンを用いる、テストを充実させるといった実践的な工夫が効きます。これらを取り入れて、複数条件のチェックをスムーズに書けるようになると、JavaScriptの開発スキルが確実に上がります。
コメント