JavaScriptで分岐処理を書く際、単一の条件だけでなく複数の条件を扱いたくなる場面は多いです。条件ごとに値を比較したり論理演算子を組み合わせたりすることで、コードが煩雑になりがちです。ですが、最新のベストプラクティスを踏まえれば、読みやすく保守性の高い複数条件のifの構文が書けるようになります。ここではJavaScript if 構文 複数条件という観点から、具体的な構文、論理演算子、ネストやswitchとの比較、可読性・保守性を高める手法などを丁寧に解説します。
目次
JavaScript if 構文 複数条件の基本構造と演算子
JavaScriptにおけるif構文で複数条件を評価する基本的な方法は、論理積（AND, &&）および論理和（OR, ||）を使って条件を組み合わせることです。複数の条件を一つのif文内で評価する際には、すべての条件が真でなければならない場合にはANDを、いずれかの条件が真であればよい場合にはORを使用します。そして複雑な条件を組み合わせる際には括弧を使って演算の優先順位を明示することが重要です。最新のガイドラインでも、論理演算子の使い方が整理されており、可読性の担保が強く推奨されています。
論理積（AND, &&）を使った複数条件の指定
AND演算子を使うと、複数の条件すべてが成立することが要求されます。例えば「ユーザーがログインしていて、かつ管理者である」ことをチェックしたいなら、if文内で両方の条件を && で繋ぎます。こうすることでネストしたifを避け、簡潔で読みやすいコードを書くことが可能です。
例：
let isLoggedIn = true;
let userRole = 'admin';
if (isLoggedIn && userRole === 'admin') {
console.log('アクセス許可: 管理者ユーザーです');
} else {
console.log('アクセス拒否');
}
論理和（OR, ||）を使った条件のいずれかを満たすケース
OR演算子を使うと、複数の条件のうち少なくとも一つが真であればifブロックが実行されます。複数の可能性の中からどれか一つでも当てはまればよいときに使うものです。「管理者であるかモデレーターであるならアクセス許可」といった場面で役立ちます。
例：
let userRole = 'moderator';
if (userRole === 'admin' || userRole === 'moderator') {
console.log('特権ユーザーとしてアクセス許可');
} else {
console.log('アクセス拒否');
}
AND と OR の組み合わせおよび括弧による優先順位管理
場合によってはANDとORを混ぜて複雑な条件を一つのif文で扱いたいことがあります。このような複合条件では、括弧を使ってどの演算を先に評価するかを明示することでバグや誤解を防げます。演算子の優先順位に頼り過ぎず、コードの読みやすさを重視するのがポイントです。
例：
let userRole = 'manager';
let department = 'sales';
if (userRole === 'admin' || (userRole === 'manager' && department === 'sales')) {
console.log('通知を送信します');
} else {
console.log('通知不要');
}
- 括弧がないと && は || より先に評価される仕様があるため、予期せぬ挙動になることがある。
- 条件が複雑になるほど、コメントや変数名を工夫して意図を明確にする。
else if と switch を使った複数条件分岐の制御
複数の条件分岐が必要な場面では、else if と switch のどちらを使うか判断することが重要です。else if は条件を順次評価し、最初に真となるブロックを実行します。一方、switch は特定の変数の値を複数のケースで評価するのに適しています。使いどころを理解すれば、if構文で複数条件をまとめるよりも整理された構造にできます。
else if を使った順次評価とデフォルト処理
else if を使えば、複数の状態やスコアなどを段階的に評価できます。if が偽なら次をチェックし、さらに偽ならその次、と進んでいき、どれも偽なら else でデフォルトの処理を行います。比較演算子と論理演算子を組み合わせたり、複雑な条件を設定する際に有効です。
例：
let score = 75;
if (score >= 90) {
console.log('優秀です');
} else if (score >= 70) {
console.log('良い成績です');
} else if (score >= 50) {
console.log('合格です');
} else {
console.log('再試験が必要です');
}
switch 文による分岐の整理
switch はある変数の値が複数の値のいずれかと一致するかをチェックするのに適しています。値ごとの処理が明確なケースでは switch を使うと、複数の else if を使うより可読性が上がります。ただし、複雑な論理条件を扱いたい場合には switch は不向きなこともあるため、使いどころを見極めることが肝要です。
例：
let day = 'Monday';
switch (day) {
case 'Saturday':
case 'Sunday':
console.log('休日です');
break;
case 'Friday':
console.log('週末が近い金曜日です');
break;
default:
console.log('平日です');
}
ネストした if の避け方と早期リターンの活用
ネストが深くなるとコードが読みづらくなり、バグの原因になりやすくなります。複数条件を入れ子で書くのではなく、AND や OR を使った一つの if 文にまとめたり、条件を分割して早期リターンで処理を分岐させたりする手法が推奨されます。可読性と保守性が大きく向上します。
例：
function process(user) {
if (!user.isActive) {
return '非アクティブユーザー';
}
if (user.role === 'admin' && user.age >= 18) {
return '管理者アクセス可';
}
return '一般ユーザー';
}
複数条件を扱うときの注意点と最適化テクニック
複数条件のif文を書くときには、パフォーマンスやバグ回避のための注意点があります。演算子の優先順位の誤解、真偽値の取り扱い、比較演算子の使い分け、短絡評価の理解などがその例です。またif構文で複雑になりすぎないように、関数化や条件抽象化を行うと良いでしょう。
比較演算子の厳密等価性（===, !==）を使う
比較には厳密等価演算子を使うことが望まれます。== や != は型の変換を含むため、予期せぬ真偽値を返すことがあります。=== や !== を使うことで型も値も確認し、バグ発生を抑制できます。条件が複数ある場合、どれか一つの比較が緩いと全体の信頼性が落ちるため、全条件で厳格な比較を使うことがお勧めです。
真偽値（Truthy / Falsy）の扱いに注意する
JavaScriptには false / undefined / null / 0 / NaN / 空文字列など、条件式で偽と評価される値があります。複数条件を && や || で組み合わせるとき、これらの値が予期せず偽と扱われることがあります。条件式を書く際には、特に falsy な値への配慮と明示的なチェックが重要です。
短絡評価（ショートサーキット評価）の活用と副作用の回避
AND 演算子は最初に偽と判断された条件で評価を打ち切り、OR 演算子は最初に真と判断された条件で打ち切ります。これを短絡評価と呼びます。これを利用して無駄な計算を減らすことができますが、副作用のある関数呼び出しなどが条件に入っていると予期せぬ挙動になることがありますので注意が必要です。
条件の抽象化と関数分割で可読性を高める
複数条件が多い場合は、それぞれの条件を関数として切り出すと可読性や再利用性が向上します。たとえば「ユーザーが管理者かつアクティブか」という判定を isAdminUser という関数にまとめておくと、if 文の中身が明快になります。コードレビューやテストもやりやすくなります。
if構文の複数条件 vs 他の分岐手法との比較
if構文で複数条件を書く方法は柔軟性が高いですが、他の分岐手法と比較することでメリットとデメリットが見えてきます。ここでは switch 文、オブジェクトマッピング、三項演算子などと比較して、どの場合にどの手法が適しているかを示します。
switch 文との使い分け
switch 文は変数の値が複数のケースに該当するような分岐では非常に整理された構文を提供します。定数や列挙的な値を比較する場合に向いています。複雑な論理演算子を多数含む条件分岐には不向きで、可読性が低くなることがあります。
三項演算子（条件演算子）の活用範囲
条件演算子（? :）は短く分岐を表現できるため、短い条件チェックで使うとコードが簡潔になります。ただし複数の条件が複雑に絡むような場合には、三項演算子を重ねると読みづらくなりかねないため、if or switch に戻すほうが望ましいです。
オブジェクトやマップを使った分岐のパターン
ケースが値の比較中心であり、処理内容が関数な場合にはオブジェクトやマップでキーと関数を対応させる手法が有効です。条件が増えても構造がシンプルになり、メンテナンス性が高まります。ただし、複雑な論理結合が必要なケースには適用が難しいことがあります。
実践例：複数条件を整理して書くコーディングパターン
実際のプロジェクトでは複数条件をきれいに整理して扱う必要があります。ここでは実務で使えるコーディングパターンを示します。可読性、テストしやすさ、変更に強い構造などを重視した例です。固定値の判定だけでなくユーザー情報や外部入力を扱う場面で役立ちます。
状態オブジェクトを使って条件を整理する
条件が多くなると、そのまま if 文に書き込むと複雑になります。そのようなとき、状態をオブジェクトで表現し、条件を書く関数群で判定するパターンが有効です。例えば user.status や user.permissions などのプロパティを持たせ、それらをチェックする関数をまとめておくと、主処理側のコードがすっきりします。
例：
const user = {
isActive: true,
role: 'manager',
department: 'sales'
};
function isAdmin(user) {
return user.role === 'admin';
}
function isManagerOfSales(user) {
return user.role === 'manager' && user.department === 'sales';
}
if (user.isActive && (isAdmin(user) || isManagerOfSales(user))) {
console.log('アクセス可能なユーザーです');
} else {
console.log('アクセス制限されました');
}
ガード節（早期リターン）を使ってネストを浅く保つ
処理の流れで「この条件を満たさないならすぐに抜ける」スタイルをガード節と呼びます。このスタイルを使うとネストの深さが減り、主要な処理ロジックが上に見えるようになります。条件の真偽で処理が続くか終わるかをはっきりさせるパターンが良い方法です。
function handleRequest(request) {
if (!request.user) {
return '認証が必要です';
}
if (!request.user.isActive) {
return 'アカウントが無効です';
}
// ユーザーが認証され、有効な場合のメイン処理
return '処理を続行します';
}
条件テストをユニットテスト可能な関数に切り出す
複数条件を含むロジックはテストケース数も多くなります。そのため条件判定部分を関数に切り出し、ユニットテストできるようにすることが保守性を高めます。条件が誤っていた場合でもテストで検知しやすくなります。
まとめ
JavaScriptでif構文を使い複数条件を扱う際は、AND および OR の論理演算子、括弧を用いた優先順位の明示、厳密等価演算子の活用、真偽値の理解、短絡評価の利用などが大切です。else if や switch を状況に応じて使い分け、ネストを減らし早期リターンスタイルを採用し、条件判定を関数に抽象化すると可読性と保守性が飛躍的に向上します。これらの実践例を取り入れて、複雑な分岐でも綺麗で信頼性のある JavaScript の if 構文を使いこなしましょう。
コメント