JavaScript | 基礎構文：条件分岐 – ネストした条件

「ネストした条件」を一言でいうと

ネストした条件（ネストした if 文）は、
「ある条件の中で、さらに条件を分けたいときに、if の中に if を入れ子にする書き方」 です。

日本語にすると、

もし A なら
　　その中で、さらに B かどうかを見て
　　　　B ならこう、B でなければこう

という、「条件の中に条件がある」状態です。

ここが重要です。
ネストした条件は便利ですが、深くなりすぎると一気に読みにくくなります。
「本当にネストが必要なのか？」「もっと平らに書けないか？」を常に意識することが、大事なポイントになります。

ネストした if の基本形

if の中に if を書く

一番単純な形は、if の中にもう一つ if を書く、これだけです。

const age = 20;
const hasTicket = true;

if (age >= 18) {
  console.log("年齢条件はOK");

  if (hasTicket) {
    console.log("チケットも持っているので入場できます");
  }
}

const age = 20;
const hasTicket = true;

if (age >= 18) {
  console.log("年齢条件はOK");

  if (hasTicket) {
    console.log("チケットも持っているので入場できます");
  }
}

流れを言葉にすると、

1. 「年齢が 18 以上か？」をチェック
2. OK だった場合だけ、その中で「チケットを持っているか？」をチェック
3. 両方を満たしたときだけ、「入場できます」が出る

という「二段階チェック」になっています。

もし age が 16 だった場合、

• 最初の if (age >= 18) が false なので、その中身は一切実行されず
• 2 つ目の if にも到達しません

このように、「外側の条件を通らない限り、内側の条件は評価すらされない」のが、ネストした条件の基本です。

条件を二段階に分けて考えるイメージ

もう少し別の例でイメージしてみます。

「会員で、かつプレミアム会員かどうか」を判定したいとき。

const isMember = true;
const isPremium = false;

if (isMember) {
  console.log("会員です");

  if (isPremium) {
    console.log("プレミアム会員です");
  } else {
    console.log("通常会員です");
  }
} else {
  console.log("非会員です");
}

const isMember = true;
const isPremium = false;

if (isMember) {
  console.log("会員です");

  if (isPremium) {
    console.log("プレミアム会員です");
  } else {
    console.log("通常会員です");
  }
} else {
  console.log("非会員です");
}

流れを言葉で追うと、

1. 会員かどうかをまず判定（isMember）
2. 会員なら、その中で「プレミアムかどうか」（isPremium）をさらに判定
3. 非会員なら、そもそもプレミアムかどうかを見る必要はないので、外側の else だけ

というふうに、「大きな分類 → 小さな分類」の順で分岐を作れます。

ここが重要です。
ネストした if は、「まず大枠で分類して、その中でさらに細かく分ける」 という、人間の考え方に近い形で条件を組み立てられます。
ただし、段が増えるほど読みにくくなるので、使いどころを見極めるのがコツです。

ネストした条件でよくあるパターン

条件が両方満たされたときだけ実行したい

例えば、「年齢が 18 歳以上、かつ会員」のときだけ特別なメッセージを出したい場面。

ネストした if で書くと、こうなります。

const age = 20;
const isMember = true;

if (age >= 18) {
  if (isMember) {
    console.log("18歳以上の会員です（特典あり）");
  }
}

const age = 20;
const isMember = true;

if (age >= 18) {
  if (isMember) {
    console.log("18歳以上の会員です（特典あり）");
  }
}

これは「二段階チェック」で、
外側で年齢、内側で会員かどうかを見ています。

これと同じ意味を、論理演算子 && を使って 1 つの if にまとめることもできます。

if (age >= 18 && isMember) {
  console.log("18歳以上の会員です（特典あり）");
}

if (age >= 18 && isMember) {
  console.log("18歳以上の会員です（特典あり）");
}

どちらも正解ですが、
「まず年齢、そのあと会員」という考え方を強調したいときはネスト、
「2 つの条件が同時に必要」とだけ言いたいときは && のほうがスッキリします。

ここが重要です。
ネストした if は、「条件同士の関係」を考えるための“途中の形”としてとても役立ちます。
最初はネストで書き、慣れてきたら && などで 1 行にまとめる、という流れで練習すると理解が深まります。

状態ごとに、さらに別の情報で分けたい

例えば、ログイン状態と、さらにそのユーザーの権限で画面を出し分ける例です。

const isLoggedIn = true;
const role = "admin";

if (isLoggedIn) {
  console.log("ようこそ");

  if (role === "admin") {
    console.log("管理者メニューを表示");
  } else {
    console.log("一般ユーザーメニューを表示");
  }
} else {
  console.log("ログインしてください");
}

const isLoggedIn = true;
const role = "admin";

if (isLoggedIn) {
  console.log("ようこそ");

  if (role === "admin") {
    console.log("管理者メニューを表示");
  } else {
    console.log("一般ユーザーメニューを表示");
  }
} else {
  console.log("ログインしてください");
}

「ログインしているかどうか」という大きな条件が最初の if です。
その中で、「管理者かどうか」という別の条件でさらに分岐しています。

こういう「大きな状況 → 状態の種類」という二段構えの判断は、
ネストした if で書くと頭の中のイメージと近くなります。

ネストが深くなりすぎるときの危険信号

ネストが 3 段、4 段になってきたら要注意

例えば、こんなコードを想像してみてください。

if (isLoggedIn) {
  if (hasPermission) {
    if (!isBanned) {
      if (isEmailVerified) {
        console.log("アクセス許可");
      } else {
        console.log("メール未確認");
      }
    } else {
      console.log("凍結されています");
    }
  } else {
    console.log("権限がありません");
  }
} else {
  console.log("ログインしてください");
}

if (isLoggedIn) {
  if (hasPermission) {
    if (!isBanned) {
      if (isEmailVerified) {
        console.log("アクセス許可");
      } else {
        console.log("メール未確認");
      }
    } else {
      console.log("凍結されています");
    }
  } else {
    console.log("権限がありません");
  }
} else {
  console.log("ログインしてください");
}

正直、かなり読みづらいですよね。
波かっこも増えて、どの else がどの if に対応しているのか、一瞬で分かりにくくなります。

こういう状態になったら、それは 「ネストしすぎのサイン」 です。

フラグチェックをまとめられないか考える

上の例は、条件を少しずつまとめていくことで、ネストを浅くできます。

例えば、

if (!isLoggedIn) {
  console.log("ログインしてください");
} else if (!hasPermission) {
  console.log("権限がありません");
} else if (isBanned) {
  console.log("凍結されています");
} else if (!isEmailVerified) {
  console.log("メール未確認");
} else {
  console.log("アクセス許可");
}

if (!isLoggedIn) {
  console.log("ログインしてください");
} else if (!hasPermission) {
  console.log("権限がありません");
} else if (isBanned) {
  console.log("凍結されています");
} else if (!isEmailVerified) {
  console.log("メール未確認");
} else {
  console.log("アクセス許可");
}

このように、「ダメなパターンから順に早めに抜ける」書き方にすると、
ネストを使わずに書き表せます。

ここが重要です。
ネストが深くなって読みにくいと感じたら、
「条件をまとめる」「早期リターン（ダメなときに先に処理を終わらせる）」などを考えるタイミングです。
“ネストを減らす工夫をする” という発想を、ぜひ頭の片隅に置いておいてください。

ネストした if を書くときの考え方

まず「日本語」で段階を分けてみる

いきなりコードにしようとすると、
条件がぐちゃぐちゃに混ざってネストだらけになりがちです。

そういうときは、日本語で段階を分けて考えると整理しやすいです。

例えば、アクセス許可の例なら：

1. まずログインしているか？
2. ログインしているなら、権限は持っているか？
3. 権限もあるなら、凍結されていないか？
4. それも問題ないなら、メールは確認済みか？
5. 全部 OK なら、アクセス許可

と自然な順番を文章で書き出します。

それをそのままネストした if で表現してみて、
「読みにくいな」と感じたら、先ほどのように else if で平らに書き直す、という流れです。

「ネストで一旦書いてから、平らに整える」練習

たとえば、「年齢と会員区分で料金を決める」処理を考えてみます。

• 会員で、18 歳以上 → 1000 円
• 会員で、18 歳未満 → 500 円
• 非会員で、18 歳以上 → 1500 円
• 非会員で、18 歳未満 → 800 円

まずは素直にネストで書いてみます。

const isMember = true;
const age = 16;
let price;

if (isMember) {
  if (age >= 18) {
    price = 1000;
  } else {
    price = 500;
  }
} else {
  if (age >= 18) {
    price = 1500;
  } else {
    price = 800;
  }
}

console.log(price);

const isMember = true;
const age = 16;
let price;

if (isMember) {
  if (age >= 18) {
    price = 1000;
  } else {
    price = 500;
  }
} else {
  if (age >= 18) {
    price = 1500;
  } else {
    price = 800;
  }
}

console.log(price);

これは十分読みやすいネストです。
条件が 2 段階で、どちらも必要だからです。

ただ、この処理を別の書き方に変えることもできます。
例えば、全部 if / else if で平らにしてしまうなど。

if (isMember && age >= 18) {
  price = 1000;
} else if (isMember && age < 18) {
  price = 500;
} else if (!isMember && age >= 18) {
  price = 1500;
} else {
  price = 800;
}

if (isMember && age >= 18) {
  price = 1000;
} else if (isMember && age < 18) {
  price = 500;
} else if (!isMember && age >= 18) {
  price = 1500;
} else {
  price = 800;
}

どちらが読みやすいかは、チーム・自分の好み・条件の複雑さによります。
こうやって「ネスト版」と「平らな版」を書き比べてみると、
自分なりの感覚が育っていきます。

ここが重要です。
ネストした条件は、「考えを段階的に分けるための一時的な足場」としても使えます。
「まずネストで頭を整理 → そのあと、必要ならもっと読みやすい形にリファクタリング」という流れを、ぜひ試してみてください。

初心者として「ネストした条件」で本当に押さえてほしいこと

ネストした条件は、「if の中に if」を書いて、
「大きな条件の中で、さらに条件を分ける」ためのもの。

外側の if が false のとき、内側の if は評価されない。
つまり、条件を「段階的にチェックする」イメージになる。

ネストを使いすぎると、波かっこが増えて一気に読みにくくなる。
2〜3 段階までならまだしも、それ以上深くなったら書き方を見直すサイン。

同じ意味を、「論理演算子（&& や ||）」や「else if」で平らに書けないかを、常に一度考えてみる。

ここが重要です。
ネストした条件は強力ですが、「たくさん使えば偉い」わけではありません。
“段階的な思考” を支えてくれる道具 だと捉えて、
「自分や他人が読んだとき、条件の流れがスッと頭に入るか？」を基準に、
ネストを増やしたり、逆に減らしたりしてみてください。

最後に、練習のヒントをいくつか置いておきます。

年齢 age が 18 以上かどうか、さらに hasIdCard（身分証の有無）を見て、
「入場OK」「身分証が必要」「未成年で入場不可」を適切に表示するネスト if。

ログイン状態 isLoggedIn と、ユーザーの権限 role（”admin” / “user”）を見て、
「管理者ページ」「ユーザーページ」「ログインしてください」を出し分けるネスト if。

まずは日本語で場合分けを書き出してから、
それをネストした if に落とし込んでみてください。
「自分の思考の段階」が、そのままコードの段階として表現される感覚がつかめてきます。