では「ネストされた条件分岐(ifの中にif)」のステップ実行を丁寧に作ります。
初心者が「どの条件が評価されているか」「変数の状態がどう変化するか」を逐次追えるように解説します。
練習問題:ネストされた if
次のコードを読んで、出力がどうなるか考えてみましょう。
let age = 20;
let hasLicense = true;
let canDrive = "";
if (age >= 18) {
if (hasLicense) {
canDrive = "運転できます";
} else {
canDrive = "免許が必要です";
}
} else {
canDrive = "年齢制限で運転できません";
}
console.log(canDrive);
JavaScript出力
運転できます
ステップ実行(変数状態を逐次追跡)
| ステップ | 処理 | age | hasLicense | canDrive | 条件の評価 | 実行ブロック |
|---|---|---|---|---|---|---|
| ① | let age = 20; | 20 | true | “” | – | – |
| ② | let hasLicense = true; | 20 | true | “” | – | – |
| ③ | let canDrive = ""; | 20 | true | “” | – | – |
| ④ | if (age >= 18) を評価 | 20 | true | “” | true | 内部の if に進む |
| ⑤ | 内部 if (hasLicense) を評価 | 20 | true | “” | true | canDrive = “運転できます” |
| ⑥ | else はスキップ | 20 | true | “運転できます” | false | – |
| ⑦ | 外側 else はスキップ | 20 | true | “運転できます” | false | – |
| ⑧ | console.log(canDrive) 実行 | 20 | true | “運転できます” | – | 出力: “運転できます” |
解説ポイント
- 外側の if がまず評価される
age >= 18が true → 内側の if が実行される
- 内側の if が評価される
hasLicenseが true →"運転できます"が代入される- false の場合は else が実行され
"免許が必要です"になる
- 外側の else は無視される
- 外側条件が false なら、内側の if は評価されない
- ネストは深くなると追跡が難しくなる
- 逐次変数の状態をテーブルに書くと理解しやすい
応用例:三段階の条件
let age = 16;
let hasParentalPermission = true;
let hasLicense = false;
let canDrive = "";
if (age >= 18) {
if (hasLicense) {
canDrive = "運転できます";
} else {
canDrive = "免許が必要です";
}
} else {
if (hasParentalPermission) {
canDrive = "保護者同意で運転できます";
} else {
canDrive = "年齢制限で運転できません";
}
}
console.log(canDrive);
JavaScript出力
保護者同意で運転できます
ステップ実行
| ステップ | 処理 | age | hasParentalPermission | hasLicense | canDrive | 条件評価 | 実行ブロック |
|---|---|---|---|---|---|---|---|
| ① | age=16, hasParentalPermission=true, hasLicense=false | 16 | true | false | “” | – | – |
| ② | 外側 if (age >= 18) 評価 | 16 | true | false | “” | false | else に進む |
| ③ | 内側 if (hasParentalPermission) 評価 | 16 | true | false | “” | true | canDrive=”保護者同意で運転できます” |
| ④ | else(内側)スキップ | 16 | true | false | “保護者同意で運転できます” | false | – |
| ⑤ | console.log(canDrive) | 16 | true | false | “保護者同意で運転できます” | – | 出力 |
ポイントまとめ
- ネストされた条件分岐では 外側の条件がまず評価される
- 内側の if は 外側が true の場合にのみ評価される
- else が複数重なる場合、変数状態を逐次追跡すると理解が早い
- テーブル形式で「変数」「条件」「実行ブロック」を書き出すと可視化できる


