JavaScript の if ステートメント内に複数の条件を指定する

JavaScript では、各条件を if ステートメントの丸括弧内に記述します。すべての条件が真である必要がある場合は &&、少なくとも1つが真であればよい場合は || で条件をつなぎます。両方の演算子を組み合わせるときは括弧で意図を明確にし、条件ごとに異なる処理を行う場合は if...else if チェーンを使います。

JavaScript の if ステートメントで && と || を使って条件を組み合わせる

if 条件では、&& は両方のオペランドが真と評価される値であることを要求し、|| は少なくとも一方のオペランドが真と評価される値であることを要求します。JavaScript の論理演算子は、必ずしも真偽値とは限らないオペランドの値そのものを返します。その結果を if ステートメントが真偽値として評価します。たとえば、age >= 18 && hasTicket なら、成人であり、かつチケットを持っている場合にだけ処理を実行できます。どちらか一方の条件が偽と評価される値なら、組み合わせた条件も偽と評価されます。

たとえば、isAdmin || isOwner なら、ユーザーが管理者であるか、対象の所有者であれば処理を実行できます。必要なルールに応じて演算子を選びましょう。「すべての条件を満たす」なら &&、「いずれかの条件を満たす」なら || を使います。

この例では、最初の条件は成人でチケットを持っている場合だけ成立します。2つ目の条件は、ユーザーが管理者または対象の所有者であれば成立します。

この例を実行します:

このセクションのコードと表示されるラベルや出力は英語のままです。

const visitors = [
  { name: "Ava", age: 20, hasTicket: true, isAdmin: false, isOwner: false },
  { name: "Ben", age: 16, hasTicket: true, isAdmin: false, isOwner: true },
  { name: "Cy", age: 30, hasTicket: false, isAdmin: true, isOwner: false }
];

for (const visitor of visitors) {
  if (visitor.age >= 18 && visitor.hasTicket) {
    console.log(`${visitor.name}: entry allowed`);
  }

  if (visitor.isAdmin || visitor.isOwner) {
    console.log(`${visitor.name}: can manage the item`);
  }
}

Ava: entry allowed
Ben: can manage the item
Cy: can manage the item

条件には真偽値のプロパティと数値の比較を使っているため、演算子で結果を組み合わせる前に各部分を個別に確認できます。実際のプログラムでは、サンプル値をアプリケーションで使う値に置き換えてください。

&& と || を優先順位と括弧で安全に組み合わせる

1つの条件式で両方の演算子を組み合わせられます。JavaScript では && が || より先に評価されるため、isMember || hasCoupon && cartTotal >= 50 は isMember || (hasCoupon && cartTotal >= 50) と同じ意味です。会員なら条件を満たし、会員でない場合はクーポンを持ち、かつカートの合計額が50以上なら条件を満たします。

ルールを別のまとまりとして評価したい場合や、意図を読み取りやすくしたい場合は括弧を付けます。たとえば、(isMember || hasCoupon) && cartTotal >= 50 は、会員とクーポン利用者のどちらにも最低購入額を要求します。この2つの式は同じ意味ではありません。JavaScript の演算子の優先順位については、MDN の演算子の優先順位に関するリファレンスを参照してください。

特定の数値や文字列と値を比較するときは、status === "ready" のように厳密等価演算子を使います。これにより、緩い等価演算子 (==) が行う型変換を避けられます。また、論理演算子は短絡評価を行います。&& は左のオペランドが偽と評価される値なら右側を評価せず、|| は左のオペランドが真と評価される値なら右側を評価しません。これは user !== null && user !== undefined && user.active のような、前提を確認してから値を調べる条件に役立ちます。

条件ごとに異なる処理を行う場合は if…else if を使う

1つの if 条件で組み合わせるチェックは、1つの処理を実行するためのものです。値に応じて複数の異なる処理から選ぶ場合は、if...else if...else チェーンを書きます。JavaScript は分岐を順番に評価し、最初に条件を満たした分岐を実行して、同じチェーンの残りの分岐は実行しません。最後の else は省略できます。記述した場合は、先行するどの条件にも一致しなかった値を処理します。

たとえば、score >= 90、score >= 70、score >= 50 のような条件でスコアをランク分けできます。高いランクから順に確認してください。スコアが95なら3つすべての比較を満たしますが、チェーンで実行されるのは最初に一致した分岐だけです。次の例では、ランクごとに異なる処理ラベルを割り当てます:

このセクションのコードと表示されるラベルや出力は英語のままです。

const score = 95;
let action;

if (score >= 90) {
  action = "excellent";
} else if (score >= 70) {
  action = "pass";
} else if (score >= 50) {
  action = "review";
} else {
  action = "retry";
}

score が95の場合、action は "excellent" になります。スコアは低いしきい値も満たしていますが、最初に一致した時点で JavaScript は残りの分岐をスキップします。if ステートメントを個別に並べた場合は、同じスコアに対して複数の処理が実行されることがあります。

各分岐の条件と処理が対応していることを確認してください。たとえば、高いランクを先に確認するため、score >= 70 の分岐が対象とする範囲は70以上90未満です。特定の値を比較するには === を使います。範囲を直接確認するには、score >= 70 && score < 90 のように比較を && で組み合わせます。