JavaScript | if文で複数条件を扱う

JavaScript

2020.07.192025.10.25

JavaScriptのif文で複数条件を扱う基礎

JavaScriptのif文で複数条件を扱う基礎

はじめての分岐でも心配いりません。ここでは「順番に条件をチェックする」「当てはまったらそこで止まる」「当てはまらなければ次へ進む」という流れを、例題つきでわかりやすく説明します。

if / else if / else の基本形

if (条件1) {
  // 条件1がtrueならここが実行される
} else if (条件2) {
  // 条件1がfalseで、条件2がtrueならここが実行される
} else {
  // どの条件もfalseならここが実行される（任意）
}

if (条件1) {
  // 条件1がtrueならここが実行される
} else if (条件2) {
  // 条件1がfalseで、条件2がtrueならここが実行される
} else {
  // どの条件もfalseならここが実行される（任意）
}

JavaScript

評価の順番: 上から順番にチェックします。最初にtrueになった部分だけが実行され、それ以降は無視されます。
elseの役割: どれにも当てはまらなかったときの「まとめて受け皿」。なくても動きますが、想定外の入力に備えて用意すると安全です。
条件の数: else if は必要なだけ増やせます。

例題1：点数で評価を分ける

目的: テストの点数に応じてメッセージを表示する。

const score = 86;

if (score >= 90) {
  console.log("S評価：素晴らしい！");
} else if (score >= 80) {
  console.log("A評価：よくできました");
} else if (score >= 70) {
  console.log("B評価：合格です");
} else if (score >= 60) {
  console.log("C評価：もう少し！");
} else {
  console.log("不合格：次はがんばろう");
}

const score = 86;

if (score >= 90) {
  console.log("S評価：素晴らしい！");
} else if (score >= 80) {
  console.log("A評価：よくできました");
} else if (score >= 70) {
  console.log("B評価：合格です");
} else if (score >= 60) {
  console.log("C評価：もう少し！");
} else {
  console.log("不合格：次はがんばろう");
}

JavaScript

範囲の重なりに注意: 上からチェックするので、90以上は最初で止まります。80以上の条件は「90以上が除外された80〜89」に自然に限定されます。
ポイント: 大きい（厳しい）条件を先に書くと、重なりを安全に処理できます。

例題2：複数条件を組み合わせる（AND / OR）

目的: 会員の状態に応じて割引を適用する。

const isMember = true;     // 会員かどうか
const hasCoupon = false;   // クーポンを持っているか
const isBirthday = true;   // 誕生日かどうか

if (isMember && hasCoupon) {
  console.log("会員＋クーポン：20%割引");
} else if (isMember && isBirthday) {
  console.log("会員＋誕生日：15%割引");
} else if (isMember || hasCoupon) {
  console.log("会員またはクーポン：10%割引");
} else {
  console.log("割引なし");
}

const isMember = true;     // 会員かどうか
const hasCoupon = false;   // クーポンを持っているか
const isBirthday = true;   // 誕生日かどうか

if (isMember && hasCoupon) {
  console.log("会員＋クーポン：20%割引");
} else if (isMember && isBirthday) {
  console.log("会員＋誕生日：15%割引");
} else if (isMember || hasCoupon) {
  console.log("会員またはクーポン：10%割引");
} else {
  console.log("割引なし");
}

JavaScript

AND（&&）: 両方がtrueの場合にtrue。条件を「絞る」イメージ。
OR（||）: どちらかがtrueならtrue。条件を「広げる」イメージ。
順番の工夫: 強い割引（条件が厳しい）を先に書くと、重複ケースも正しく判定できます。

例題3：ネスト（入れ子）で細かく分岐

目的: ログイン後の状態でさらに条件を分ける。

const loggedIn = true;
const isAdmin = false;
const has2FA = true;

if (loggedIn) {
  if (isAdmin) {
    console.log("管理画面へ");
  } else {
    if (has2FA) {
      console.log("一般ユーザー（2段階認証あり）");
    } else {
      console.log("一般ユーザー（2段階認証なし）");
    }
  }
} else {
  console.log("ログインしてください");
}

const loggedIn = true;
const isAdmin = false;
const has2FA = true;

if (loggedIn) {
  if (isAdmin) {
    console.log("管理画面へ");
  } else {
    if (has2FA) {
      console.log("一般ユーザー（2段階認証あり）");
    } else {
      console.log("一般ユーザー（2段階認証なし）");
    }
  }
} else {
  console.log("ログインしてください");
}

JavaScript

使いどころ: 大きな条件（ログイン済みか）で大枠を分け、内部でさらに詳細条件を判断します。
注意点: ネストが深くなると読みにくいので、関数化や早期return（上級）で整理するとよいです。

よくあるつまずきと回避策

ラベルの順番が逆:
対策: 「厳しい条件を先、ゆるい条件を後」に並べる。
範囲の抜け漏れ:
対策: else を用意して想定外を捕まえる。ログ出力で確認する。
比較演算子の勘違い:
対策: 数値の範囲は「>= を上から降順」で並べると安全。
例）90以上 → 80以上 → 70以上 … の順。
条件の重複:
対策: 先の条件で除外されることを意識して、後ろの条件はシンプルに書く。

練習問題と解答例

練習1：送料の判定

条件:
- 注文金額が5000円以上なら「送料無料」
- 3000円以上5000円未満なら「送料200円」
- 3000円未満なら「送料500円」

const amount = 4200;

if (amount >= 5000) {
  console.log("送料無料");
} else if (amount >= 3000) {
  console.log("送料200円");
} else {
  console.log("送料500円");
}

const amount = 4200;

if (amount >= 5000) {
  console.log("送料無料");
} else if (amount >= 3000) {
  console.log("送料200円");
} else {
  console.log("送料500円");
}

JavaScript

練習2：天気と持ち物

条件:
- 雨かつ風が強いなら「レインコート」
- 雨なら「傘」
- 晴れなら「帽子」
- それ以外は「特になし」

const isRain = true;
const isWindy = false;
const isSunny = false;

if (isRain && isWindy) {
  console.log("レインコート");
} else if (isRain) {
  console.log("傘");
} else if (isSunny) {
  console.log("帽子");
} else {
  console.log("特になし");
}

const isRain = true;
const isWindy = false;
const isSunny = false;

if (isRain && isWindy) {
  console.log("レインコート");
} else if (isRain) {
  console.log("傘");
} else if (isSunny) {
  console.log("帽子");
} else {
  console.log("特になし");
}

JavaScript

練習3：時間帯のメッセージ

条件:
- 5:00〜11:59 → 「おはよう」
- 12:00〜17:59 → 「こんにちは」
- 18:00〜22:59 → 「こんばんは」
- その他 → 「夜更かしですね」

const hour = 22; // 0〜23の整数

if (hour >= 5 && hour <= 11) {
  console.log("おはよう");
} else if (hour >= 12 && hour <= 17) {
  console.log("こんにちは");
} else if (hour >= 18 && hour <= 22) {
  console.log("こんばんは");
} else {
  console.log("夜更かしですね");
}

const hour = 22; // 0〜23の整数

if (hour >= 5 && hour <= 11) {
  console.log("おはよう");
} else if (hour >= 12 && hour <= 17) {
  console.log("こんにちは");
} else if (hour >= 18 && hour <= 22) {
  console.log("こんばんは");
} else {
  console.log("夜更かしですね");
}

JavaScript

次の一歩

ラベル: 条件に「意味のある名前」をつけると読みやすくなります。

const isHighScore = score >= 90;
const isPass = score >= 60;

if (isHighScore) {
  console.log("トップクラス");
} else if (isPass) {
  console.log("合格");
} else {
  console.log("不合格");
}

const isHighScore = score >= 90;
const isPass = score >= 60;

if (isHighScore) {
  console.log("トップクラス");
} else if (isPass) {
  console.log("合格");
} else {
  console.log("不合格");
}