では「条件分岐」のテーマで、ステップ実行（変数の変化を逐次追う）付きの練習問題＋解答＋詳細解説を紹介します。
初心者が「if / else if / else」の流れや「条件評価の順序」を体感できるような例にします。
練習問題（条件分岐＋ステップ実行解説）
問題：点数によって評価を出すプログラムを作ろう
次のコードを読んで、コンソールにどのような結果が出るか考えてみましょう。
let score = 72;
let grade = "";
if (score >= 90) {
grade = "A";
} else if (score >= 70) {
grade = "B";
} else if (score >= 50) {
grade = "C";
} else {
grade = "D";
}
console.log("あなたの評価は " + grade + " です");
解答
あなたの評価は B です
ステップ実行（変数の状態を追跡）
| ステップ | 処理内容 | score | grade | 条件の評価 | 実行されたブロック |
|---|---|---|---|---|---|
| ① | let score = 72; | 72 | – | – | – |
| ② | let grade = ""; | 72 | “” | – | – |
| ③ | if (score >= 90) を評価 | 72 | “” | false | スキップ |
| ④ | else if (score >= 70) を評価 | 72 | “” | true | このブロックが実行される |
| ⑤ | grade = "B"; | 72 | “B” | – | grade に “B” 代入 |
| ⑥ | 残りの else if / else はスキップ | 72 | “B” | – | – |
| ⑦ | console.log(...) 実行 | 72 | “B” | – | 出力：「あなたの評価は B です」 |
解説
if → else if → elseは上から順に評価され、最初にtrueになったブロックだけ実行されます。- 今回
score = 72なので、score >= 90→ ❌score >= 70→ ✅（ここで止まる）
→ 以降の条件は無視されます。
応用問題（もう1問）
let temp = 5;
let message = "";
if (temp >= 30) {
message = "暑い！";
} else if (temp >= 15) {
message = "ちょうどいい";
} else if (temp >= 0) {
message = "少し寒い";
} else {
message = "とても寒い！";
}
console.log(message);
解答
少し寒い
ステップ実行解説
| ステップ | 条件式 | 結果 | 実行ブロック | message の値 |
|---|---|---|---|---|
| 1 | temp >= 30 | false | – | “” |
| 2 | temp >= 15 | false | – | “” |
| 3 | temp >= 0 | true | このブロックが実行される | “少し寒い” |
| 4 | else はスキップ | – | – | “少し寒い” |
| 5 | 出力 | – | – | "少し寒い" |
💬 補足解説
- JavaScript では
ifは 最初に true になった時点で処理を終了 します。 - つまり「範囲がかぶる条件」を書くと、上の方の条件が優先されることに注意！
例：
if (temp >= 0) { ... }
else if (temp >= 15) { ... }
と書くと、15 のときに本来「ちょうどいい」と出したくても、上の if が先に true になってしまいます。
まとめ
- 条件は上から順に評価される。
- 最初に true になったブロックだけ実行される。
- ステップ実行で変数の値と条件評価の順を追うと理解が深まる。
