Day5 前半のゴール
Day5 のテーマは「条件分岐」です。
ここから一気に「プログラムが考えて動く」感じが強くなります。
前半では、まず if / else / else if の基本形 をしっかり押さえ、
「条件によって処理を変える」という感覚をつかむことをゴールにします。
条件分岐とは何か
「もし〜なら、〜する」をコードで書く
条件分岐は、人間が普段やっている判断をコードにする仕組みです。
「もし雨なら傘を持っていく」
「もし 18 歳以上なら大人料金」
こういった「もし〜なら〜する」を、JavaScript では if を使って書きます。
const age = 20;
if (age >= 18) {
console.log("大人です");
}
このコードは、「age が 18 以上なら ‘大人です’ と表示する」という意味です。
条件が true のときだけ、波かっこ { } の中が実行されます。
if の基本形
if の書き方
最もシンプルな形はこうです。
if (条件) {
実行したい処理;
}
具体例で見てみましょう。
const score = 80;
if (score >= 70) {
console.log("合格です");
}
ここでは、score >= 70 が true のときだけconsole.log("合格です"); が実行されます。
条件には「true / false になる式」を書く
if (ここ) の中には、
true か false になる式を書く必要があります。
age >= 18
score === 100
isStudent === true
Day4 で学んだ「比較演算」「論理演算」が、
ここでそのまま活きてきます。
else で「それ以外」の場合を書く
if だけだと「true のとき」しか書けない
たとえば、次のような状況を考えます。
「18 歳以上なら大人、それ以外は子ども」
if だけだと「大人」の場合しか書けません。
const age = 15;
if (age >= 18) {
console.log("大人です");
}
このコードでは、age が 18 未満のときは何も起きません。
else を使って「それ以外」を書く
そこで登場するのが else です。
const age = 15;
if (age >= 18) {
console.log("大人です");
} else {
console.log("子どもです");
}
このように書くと、
条件が true → if の中が実行される
条件が false → else の中が実行される
という「どちらか一方は必ず実行される」形になります。
深掘り：if と else はセットで読む
if と else は「セット」で読むとわかりやすいです。
「もし〜なら A、そうでなければ B」
という日本語に対応しています。
else if で条件を増やす
「3パターン以上」のときに使う
次のような判定をしたいとします。
「90 点以上なら 優」
「70 点以上なら 良」
「それ以外は 可」
この場合、if と else だけでは足りません。
そこで else if を使います。
const score = 75;
if (score >= 90) {
console.log("優");
} else if (score >= 70) {
console.log("良");
} else {
console.log("可");
}
このように、
上から順番に条件が評価されていき、
最初に true になったところだけが実行されます。
上から順番に評価されることが重要
たとえば、次のように書くとどうなるでしょう。
const score = 95;
if (score >= 70) {
console.log("良");
} else if (score >= 90) {
console.log("優");
}
score は 95 なので、本来は「優」と表示したいところですが、
最初の score >= 70 が true になった時点で、
そこで処理が止まり、「良」だけが表示されます。
条件分岐は「上から順番にチェックされる」という性質があるので、
より厳しい条件（範囲が狭い条件）を上に書く のが基本です。
実例で if / else / else if を体感する
例1：ログイン状態でメッセージを変える
const isLoggedIn = true;
if (isLoggedIn) {
console.log("ようこそ！");
} else {
console.log("ログインしてください");
}
boolean 型（true / false）をそのまま条件に使うパターンです。
Day3・Day4 で学んだ boolean が、ここで活きてきます。
例2：年齢で料金を変える
const age = 12;
if (age >= 18) {
console.log("大人料金です");
} else {
console.log("子ども料金です");
}
比較演算（>=）と組み合わせた、典型的な条件分岐の例です。
例3：スコアでランクをつける
const score = 88;
if (score >= 90) {
console.log("ランクA");
} else if (score >= 70) {
console.log("ランクB");
} else {
console.log("ランクC");
}
ここでは、
「上から順番に条件をチェックする」
「最初に true になったところだけが実行される」
という else if の性質を体験できます。
セキュリティの視点から見る条件分岐
条件分岐は「守るかどうか」を決めるゲート
実際のシステムでは、条件分岐はこんなところで使われます。
「ログインしているユーザーだけが見られるページ」
「管理者だけが押せるボタン」
「メール認証が済んでいる人だけが使える機能」
これらはすべて、if / else で制御されています。
if (isLoggedIn && isAdmin) {
console.log("管理画面にアクセスできます");
} else {
console.log("アクセス権限がありません");
}
条件分岐の書き方を間違えると、
本来アクセスできない人に機能を開放してしまうことがあります。
だからこそ、
「条件を正しく書く」
「true / false の意味を正しく理解する」
というのは、セキュリティの観点でも非常に重要です。
Day5 前半のまとめ
今日の前半で押さえておきたいポイント
if は「もし〜なら〜する」
else は「それ以外の場合」
else if は「条件が3つ以上あるときの中間の選択肢」
条件は必ず true / false になる式で書く。
上から順番に評価され、最初に true になったところだけが実行される。
ここまで理解できていれば、
後半では「もう少し複雑な条件」や「ネスト（入れ子）」、
そして簡単な練習問題で、条件分岐の感覚をさらに強くしていきます。