Day5 後半のゴール
Day5 後半では、前半で学んだ
if / else / else if を「実際に使えるレベル」まで引き上げます。
少し複雑な条件、ネスト（if の中に if）、
そして「読みやすい条件分岐とは何か」を意識していきます。
条件を組み合わせた if の書き方
複数条件を AND / OR でつなぐ
前半では「1つの条件」で分岐しましたが、
現実のルールはたいてい「条件が2つ以上」です。
たとえば、
「18歳以上 かつ 会員」なら利用可能
「プレミアム会員 または 管理者」なら特別ページにアクセス可能
こういった条件は、論理演算子と組み合わせて書きます。
const age = 20;
const isMember = true;
if (age >= 18 && isMember) {
console.log("サービスを利用できます");
} else {
console.log("利用条件を満たしていません");
}
ここでは、
age >= 18 も isMember も両方 true のときだけ if が実行されます。
else if を使った「段階的な条件」
ランク分け・評価・料金などでよく使う形
前半でやったスコアの例を、もう少し整理して見てみます。
const score = 65;
if (score >= 90) {
console.log("Sランク");
} else if (score >= 70) {
console.log("Aランク");
} else if (score >= 50) {
console.log("Bランク");
} else {
console.log("Cランク");
}
ここで重要なのは「上から順番に評価される」ということです。
score が 65 の場合、
score >= 90 → false
score >= 70 → false
score >= 50 → true
となるので、「Bランク」だけが実行されます。
条件の順番を間違えるとバグになる
もし、次のように書いてしまうとどうなるでしょう。
const score = 95;
if (score >= 50) {
console.log("Bランク");
} else if (score >= 70) {
console.log("Aランク");
} else if (score >= 90) {
console.log("Sランク");
}
score は 95 ですが、
最初の score >= 50 が true になった時点で処理が止まり、
「Bランク」と表示されてしまいます。
「より厳しい条件（範囲が狭い条件）を上に書く」
これは else if を使うときの超重要ルールです。
if のネスト（入れ子）を理解する
if の中に if を書く
条件が複雑になると、
if の中にさらに if を書く「ネスト」が出てきます。
const age = 20;
const isMember = true;
if (age >= 18) {
if (isMember) {
console.log("会員としてサービスを利用できます");
} else {
console.log("会員登録が必要です");
}
} else {
console.log("18歳未満は利用できません");
}
このコードは、
まず「年齢」で分けてから、
その中で「会員かどうか」でさらに分けています。
ネストは強力だが、増やしすぎると読みにくい
ネストは便利ですが、
深くなりすぎると「何が何だかわからないコード」になります。
if (条件1) {
if (条件2) {
if (条件3) {
// もう読めない…
}
}
}
こうなってきたら、
条件を整理したり、論理演算子でまとめたりすることを考えます。
if (条件1 && 条件2 && 条件3) {
// こちらの方がスッキリする場合もある
}
「ネストにするか」「条件をまとめるか」は、
読みやすさを基準に選ぶのが良いです。
よくあるミスとその直し方
条件の書き方ミス：= と ===
初心者が必ず一度はやるのがこれです。
const age = 20;
if (age = 18) {
console.log("18歳です");
}
これは「age に 18 を代入する」という意味になってしまい、
条件としては常に true になります。
正しくは === を使います。
if (age === 18) {
console.log("18歳です");
}
= は代入、=== は比較。
この違いは条件分岐を書くうえで絶対に外せません。
条件が重なっている・意味がかぶっている
たとえば、次のようなコード。
const age = 20;
if (age >= 18) {
console.log("大人");
} else if (age >= 20) {
console.log("成人");
}
age が 20 のとき、
最初の age >= 18 が true になってしまうので、
「成人」には絶対に到達しません。
この場合は、条件を整理する必要があります。
if (age >= 20) {
console.log("成人");
} else if (age >= 18) {
console.log("大人");
}
「どの条件がどれを含んでいるか」を意識して、
上から順番に「より厳しい条件」を書く癖をつけましょう。
セキュリティの観点から見る「条件の漏れ」
条件を書き忘れると「穴」になる
たとえば、管理画面へのアクセスを制御するコードを考えます。
const isLoggedIn = true;
const isAdmin = false;
if (isLoggedIn) {
console.log("管理画面にアクセスできます");
}
これだと、「ログインしていれば誰でも管理画面に入れる」状態です。
本来は「ログインしていて、かつ管理者だけ」にしたいはずです。
if (isLoggedIn && isAdmin) {
console.log("管理画面にアクセスできます");
} else {
console.log("アクセス権限がありません");
}
条件分岐は「誰に何を許可するか」を決めるゲートです。
条件の書き漏れ・書き間違いは、そのままセキュリティホールになります。
実践コード：Day5 後半のサンプル
サンプル1：年齢と会員ステータスでメッセージを変える
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day5 後半</title>
</head>
<body>
<h1>Day5: 条件分岐の応用</h1>
<script>
const age = 17;
const isMember = true;
if (age >= 18 && isMember) {
console.log("大人会員として利用できます");
} else if (age >= 18 && !isMember) {
console.log("大人ですが、会員登録が必要です");
} else {
console.log("18歳未満は利用できません");
}
</script>
</body>
</html>
複数条件＋else if＋!（NOT）をまとめて体験できます。
サンプル2：スコアでメッセージを出し分ける
<script>
const score = 92;
if (score >= 90) {
console.log("素晴らしい！Sランクです");
} else if (score >= 70) {
console.log("よくできました！Aランクです");
} else if (score >= 50) {
console.log("合格です。Bランクです");
} else {
console.log("もう少しがんばりましょう");
}
</script>
ここでは、
「条件の順番」と「else if の流れ」を意識して読んでみてください。
Day5 後半のまとめ
今日の後半で押さえておきたいポイント
複数条件は AND / OR と組み合わせて書く
else if は「上から順番に評価される」
より厳しい条件を上に書くとバグを防げる
ネストは強力だが、深くしすぎると読みにくくなる
条件分岐は「誰に何を許可するか」を決める重要な場所
ここまで来ると、
「プログラムが状況に応じて動きを変える」感覚がかなりつかめてきているはずです。
次のステップでは、
この条件分岐と「繰り返し」や「関数」を組み合わせて、
より“プログラムらしい”動きを作っていきます。