if文の分岐を
ゼロから復習しよう
プログラムは「条件によって処理を変える」ことができます。この教材では if 文の基本、比較演算子、論理演算子を順番に学び、最後に練習問題と理解度テストで確認します。
if文の基本
if文は「条件が true(真)のときだけ、決まった処理を実行する」ための構文です。日常生活の「もし雨が降ったら、傘を持っていく」という考え方と同じです。
基本の書き方
if (条件) { // 条件が true のときに実行される処理 }
条件の部分には、true か false のどちらかになる式を書きます。条件が true なら { } の中身が実行され、false なら実行されずに読み飛ばされます。
具体例
let score = 85; if (score >= 60) { console.log("合格です"); }
score が 60 以上なら「合格です」と表示されます。今回は 85 なので条件は true となり、メッセージが表示されます。
else / else if で分岐を増やす
let score = 45; if (score >= 80) { console.log("よくできました"); } else if (score >= 60) { console.log("合格です"); } else { console.log("もう一度挑戦しよう"); }
else if を使うと条件を追加でき、どれにも当てはまらない場合の処理は最後の else に書きます。条件は上から順番にチェックされ、最初に true になったブロックだけが実行されます。
条件は必ずどこかひとつだけが実行されます。「score が80以上」で true になったら、それ以降の else if や else はチェックされません。
例題
let temperature = 32; if (temperature >= 30) { console.log("暑い日です"); } else { console.log("過ごしやすい日です"); }
比較演算子
比較演算子は、2つの値を比べて true か false を返す演算子です。if文の条件でよく使われます。
| 演算子 | 意味 | 例 | 結果 |
|---|---|---|---|
=== | 値と型が両方等しい | 5 === 5 | true |
=== | 値と型が両方等しい | 5 === "5" | false |
!== | 値または型が異なる | 5 !== "5" | true |
> | 左が右より大きい | 10 > 3 | true |
< | 左が右より小さい | 10 < 3 | false |
>= | 左が右以上 | 5 >= 5 | true |
<= | 左が右以下 | 4 <= 5 | true |
JavaScriptには == という演算子もありますが、これは型を変換してから比較するため、5 == "5" は true になってしまいます。意図しないバグの原因になりやすいので、基本的には型まで厳密に比較する ===(・!==)を使うようにしましょう。
例題
console.log(5 == "5"); console.log(5 === "5"); console.log(10 > 7);
論理演算子
論理演算子は、複数の条件を組み合わせるときに使います。
| 演算子 | 意味 | true になる条件 |
|---|---|---|
&&(AND) | かつ | 両方の条件が true のとき |
||(OR) | または | どちらか一方でも true のとき |
!(NOT) | 否定 | true と false を入れ替える |
&& (AND) の例
let age = 20; let hasTicket = true; if (age >= 18 && hasTicket) { console.log("入場できます"); }
「18歳以上」かつ「チケットを持っている」の両方が true のときだけ、入場できます。
|| (OR) の例
let isWeekend = false; let isHoliday = true; if (isWeekend || isHoliday) { console.log("今日は休みです"); }
「週末」または「祝日」のどちらか一方が true であれば、条件は true になります。
! は条件をひっくり返します。!true は false になり、!(age >= 18) は「18歳以上ではない」という意味になります。
例題
let age = 20; let hasLicense = true; if (age >= 18 && hasLicense) { console.log("運転できます"); } else { console.log("運転できません"); }
練習問題
コードの続きをノートに書いてみましょう。解答は最後の「06 解答・解説」で確認できます。
let temperature = 33; // ここにif文を書いてみよう
let score = 72; // ここにif文を書いてみよう
let age = 16; let hasLicense = false; // ここにif文を書いてみよう
理解度テスト
全6問です。正しいと思う選択肢に丸をつけましょう。解答は「06 解答・解説」にあります。
{ } の中の処理が実行されるのは、条件がどうなったときですか？- A. 条件が
falseのとき - B. 条件が
trueのとき - C. 条件が数値のとき
5 === "5" の実行結果はどれですか？- A. true
- B. false
10 !== 5 の実行結果はどれですか？- A. true
- B. false
A && B が true になるのはどんなときですか？- A. A と B が両方とも true のとき
- B. A と B のどちらか一方が true のとき
- C. A と B が両方とも false のとき
let x = 15; if (x > 10 && x < 20) { console.log("A"); } else { console.log("B"); }- A. A
- B. B
!(true) の実行結果はどれですか？- A. true
- B. false
解答・解説
練習問題の解答
if (temperature >= 30) {
console.log("暑い");
} else {
console.log("普通");
}
比較演算子 >= を使って「30以上」を表現し、それ以外の場合は else で受け取ります。
if (score >= 80) {
console.log("A");
} else if (score >= 60) {
console.log("B");
} else {
console.log("C");
}
条件は上から順にチェックされるので、「80以上」を先に書き、次に「60以上」を書くのがポイントです。
if (age >= 18 && hasLicense) {
console.log("運転できます");
} else {
console.log("運転できません");
}
&& を使うことで、「両方の条件を満たす」ときだけtrueになる式が作れます。
理解度テストの解答
if文は条件が true のときだけ { } の中身を実行します。
=== は型まで比較します。数値の5と文字列の”5″は型が異なるため false になります。
!== は「等しくない」を判定します。10と5は異なる値なので true です。
&& (AND) は両方の条件が true のときだけ true になります。
x は 15 なので、x > 10 と x < 20 の両方が true になり、&& 全体も true です。よって “A” が表示されます。
! は条件を反転させます。true を反転させると false になります。