プログラミング初心者から中級者までが必ずぶつかる壁――JavaScriptでif構文を使いながら複数条件を正しく扱う方法です。ひとつの条件では足りない場面で、論理演算子を駆使して複雑な条件分岐を明確に書けるようになります。AND・OR・NOTなどの基本構文から優先順位の制御、可読性を上げるテクニックまで、多角的に紹介します。実践コード例を含むので使える知識をしっかり習得できます。
JavaScript if 構文 複数条件とは何かと基本的な使い方
JavaScriptのif構文 複数条件を使うとは、ひとつのif文の中で複数の論理条件を組み合わせて判定を行うことです。単一条件だけでは表現しきれない判断をANDやORやNOTといった論理演算子を使って、判断基準を複雑化または洗練化します。適切に組み合わせることで同じ処理を複数のifに分岐せずにすっきりと書くことができます。
具体的には「ある変数がある範囲内であるか」「文字列が特定の値かつ数値が一定以上か」などを同時にチェックするケースに使います。AND演算子を使うと全ての条件が真（true）であれば処理が実行され、OR演算子ではひとつでも真であれば処理が実行されます。NOT演算子で条件を否定することも可能です。
AND演算子（&&）の基本
AND演算子とは、複数の条件のすべてが成立したときに真と判断するための演算子です。例えば変数ageが18以上かつ変数isMemberがtrueの場合などいくつかの条件を同時に満たす必要がある処理に利用されます。すべての条件が真でないとifブロックは実行されません。
OR演算子（||）の基本
OR演算子は、複数の条件のうちひとつでも真であれば真と判断する演算子です。例えばユーザーが管理者であるか監査者であるかのどちらかで処理を許可する場合などに使われます。条件が多くてもひとつでもマッチすればよければORを連ねれば十分です。
NOT演算子（!）で条件を反転する
NOT演算子は、条件式の真偽を反転させます。真を偽に、偽を真に変換するため、論理演算子と組み合わせて「～でない場合」などを表現するのに使います。特定の変数がnullやundefinedでない、またはfalseでないことを確認するなどの用途が一般的です。
複数条件を組み合わせる方法とパターン
複数条件を組み合わせる方法にはいくつかのパターンがあります。論理AND／ORの混合やネスト構造、配列を使ったループでの条件評価などです。最新情報ではこれらの方法が推奨され、コードの明快さや保守性が重視されています。
ANDとORを混合して使う
ANDとORを混合する場合、優先順位に注意が必要です。ANDがORより強い結合力を持つため、意図しない評価順で条件が判定されがちです。特定の条件をまとめて優先的に評価したい場合は、必ず括弧を使ってグループ化しておくと安全で可読性が高まります。
else if を使った段階的な条件分岐
複数の候補があり、どれか一つの条件だけを満たすとき処理を分けたい場合には else if を使います。if → else if → else の流れで上から順に条件を評価していきます。ひとつでもマッチした時点でそのブロックが実行され、それ以降の else if はスキップされます。
配列や関数を使って条件を整理する
条件が多くなるほど if 文が読みにくくなります。そのため、配列を作成し includes や every／some といったメソッドを使って判定するパターンが実用的です。また、共通の条件を関数化して名前を付けておくと意図が明確になり、再利用性も向上します。
注意すべきポイント：優先順位と型チェック
複数条件を使う上で間違いやすい点に、演算子の優先順位と型の違いがあります。論理演算子の優先順位を誤解すると意図しない判定結果になることがあります。== や === の違いによる型変換による誤判定も避けるべきです。
演算子の優先順位の理解
JavaScriptでは AND 演算子（&&）の方が OR 演算子（||）より優先度が高く、かつ NOT（!）が最も高いです。この順序を知らずに複数条件を組むと、予期しない挙動になる場合があります。たとえば A && B || C という式は (A && B) || C と解釈されますが、意図を変える場合は括弧を使います。
型の厳密な比較（===／!==）を活用する
== は型変換を伴う比較で意図しない一致を生む可能性があります。複数条件ではこのリスクが複数に広がるため、=== および !== を使い、型も値も正確に比較する習慣をつけるべきです。型が混在する変数を扱うときは typeof を確認するなどの措置が有効です。
短絡評価とサイドエフェクトに注意する
AND／OR 演算子は短絡評価を行います。つまり最初の条件で結果が確定できる場合、残りの条件は評価されません。副作用のある関数呼び出しなどを条件に含めると、期待しない動作になることがあります。副作用がある処理は条件の中に直接書かないか、先に変数に代入しておくほうが安全です。
コード例で実践する if構文で複数条件の使い方
ここでは実際に複数条件を使ったif構文のコード例をいくつか示し、どのような場面でどんな書き方が適しているかを比較検討します。読み手が実際のプロジェクトでそのまま応用できるような構成にしています。
基本的な AND／OR の組み合わせ例
以下は年齢と会員ステータスをチェックする例です。年齢が18以上かつ会員であるなら特典を表示します。また、別の例で年齢が65以上または特定の優待会員なら別のメッセージを表示します。
let isMember = false;
if (age >= 18 && isMember === true) {
console.log(‘特典を利用できます。’);
} else if (age >= 65 || isMember === ‘prestige’) {
console.log(‘シニア優待または特別会員向け’);
} else {
console.log(‘通常利用者です。’);
}
配列を使って多数の選択肢を整理する例
多数の値をひとつずつ OR 条件で書くより、配列の includes メソッドを使う方が読みやすくメンテナンス性が高いです。例えばユーザーの役割が複数パターンに当てはまるかチェックする場合です。
let allowed = [‘admin’,’editor’,’moderator’];
if (allowed.includes(role)) {
console.log(‘権限があります。’);
} else {
console.log(‘アクセス拒否。’);
}
関数を使って条件を分かりやすくする例
複雑な条件があちこちに散らばっている場合、名前付き関数にまとめることで意図が明確になります。後で条件が変わっても関数を修正すれば済むので保守性も上がります。
function isVip(memberType) { return memberType === ‘vip’; }
let user = { age:20, member:’vip’ };
if (isAdult(user.age) && isVip(user.member)) {
console.log(‘成人かつVIPのユーザーです。’);
} else {
console.log(‘一般ユーザーです。’);
}
最新情報を踏まえたベストプラクティス
複数条件の if 構文について、最新の標準やトレンドから見て、読みやすさとパフォーマンスの両立を図るベストプラクティスを紹介します。2026年現在の情報を元に、モダンな JS コードでよく使われる手法や注意点を押さえます。
可読性を優先した書き方
条件が複雑になるほど可読性が重要になります。ひとつの if 文に長々と書くより、条件を変数または関数で表現し、意図が名前で分かるようにするのが好ましいです。また、条件式が長いときは改行やインデントで整理するのも効果的です。
コードの短縮と ES 記法の活用
ES6 以降では、配列の includes、アロー関数、テンプレート文字列などを使って冗長さを減らす書き方が増えています。また、every / some メソッドで「全て」「少なくとも一つ」の条件を配列で評価するパターンも定番化しています。これにより if 文自体を短く、論理構造が明確になります。
テストの観点からの注意点
複数条件を持つコードはテスト網羅性が求められます。すべての分岐（AND／OR の組み合わせ、else のケースなど）が想定通りに動くかユニットテストを用意することが望ましいです。また型エラーや null 値、未定義の変数などを条件に含める場合、それらが安全に処理されるかを確認しておきます。
まとめ
JavaScriptの if 構文 複数条件を使いこなすには、論理演算子を正しく理解し、組み合わせのパターンを押さえることが鍵です。AND や OR を混ぜる際は優先順位に注意し、括弧で明示的にグループ化すると意図が伝わりやすくなります。
また配列や関数を活用して条件を整理することで可読性と保守性が大きく向上します。最新の書き方を取り入れることでコードがスリムかつ堅牢になります。
複数条件の分岐が必要な場面が来たら、この記事で示したパターンを思い出して、明確・安全・可読な JavaScript コードを書けるようになって下さい。
コメント