レッスン3：条件分岐

⏱ 約25分やってみよう 1 クイズ 1

🎯 このレッスンで学ぶこと

if文で条件によって処理を変えられます。
else ifとelseを使って複数の条件を書けます。
比較演算子（===・!==・>・<・>=・<=）を使えます。
&&（かつ）と||（または）で条件を組み合わせられます。

📖 前回の復習（レッスン2）

変数はデータを入れておく「名前付きの箱」。let で変更可能、const で変更不可
データの種類（型）には文字列・数値・真偽値などがある
変数を使うと同じ値を何度も書かずに済む

📖 導入 — 「もし〜なら」を表現しよう

「もし雨なら傘を持っていく、そうでなければ持っていかない」のように、条件によって行動を変えることがありますよね。プログラムも同じです。条件によって処理を変えるのが 条件分岐 です。

ゲームなら「HPが0になったらゲームオーバー」、ショッピングサイトなら「在庫が0なら売り切れ表示」。条件分岐はあらゆるプログラムで使われる、最も基本的な仕組みの一つです。

📝 条件分岐の書き方

/ /

まずは if だけの最小例:

const age = 16;

if (age >= 18) {
  console.log("成人です");
}
// age が 18 未満なら何も表示されない

↑ 条件が false のときは何も起きません。「条件を満たしたときだけ実行する」のが if の基本です。else を書かなければ、条件に合わないときは何もしません。

else if / else で複数の条件を書く:

const score = 70;

if (score >= 80) {
  console.log("優");
} else if (score >= 60) {
  console.log("良");
} else {
  console.log("可");
}

条件は上から順番に判定されます。最初に true になった処理だけが実行されます。それ以降の else if / else はスキップされます。

💡 if 文の構造:
if (条件1) { 処理1 } — 条件1が true なら処理1を実行
else if (条件2) { 処理2 } — 条件1が false で条件2が true なら処理2
else { 処理3 } — どの条件にも当てはまらないとき処理3
else if と else は省略可能です。

比較演算子

演算子	意味	例
`===`	等しい	`age === 15`
`!==`	等しくない	`name !== "ゲスト"`
`>`	より大きい	`score > 80`
`<`	より小さい	`score < 60`
`>=`	以上	`age >= 13`
`<=`	以下	`age <= 18`

💡 等しいかどうかの比較は = ではなく === を使います。= は変数に値を代入するときの記号なので混同しないようにしましょう。

⚠️ === と == の違い
== は型変換してから比較するため、予期しない結果になりやすいです。
例: "5" == 5 → true（文字列の"5"が数値に変換される）
例: "5" === 5 → false（型が違うので不一致）
初心者は常に === を使いましょう！

論理演算子

複数の条件を組み合わせるときに使います。

演算子	意味	例
`&&`	かつ（両方 true のとき）	`age >= 13 && age <= 15`
`\|\|`	または（どちらか true のとき）	`score < 0 \|\| score > 100`
`!`	ではない（true を false に反転）	`!isLoggedIn`

でユーザー入力を受け取る

prompt() の戻り値は必ず文字列です。数値として使いたいときは Number() で変換します。

💡 prompt() は学習用の簡易的な方法です。
実際のウェブアプリでは、HTMLの <input> タグを使って入力を受け取ります。レッスン7で学びます。

const input = prompt("年齢を入力してください");
const age = Number(input);  // 文字列 → 数値に変換

▶ プレビュー

▼ 点数を変えて試してみよう:

▶ プレビュー

📝 条件を組み合わせる — 論理演算子

「13歳以上かつ15歳以下」のように、複数の条件を組み合わせたいときに使います。

const age = 14;

// && (かつ): 両方の条件を満たすとき
if (age >= 13 && age <= 15) {
  console.log("中学生です");
}

// || (または): どちらかの条件を満たすとき
const day = "土曜";
if (day === "土曜" || day === "日曜") {
  console.log("休みです！");
}

💻 やってみよう！

VS Codeで my-practice フォルダの index.html を開き、<script> タグの中を以下のように書き換えてください。書き終えたら index.html をダブルクリックしてブラウザで確認しましょう。（prompt() はパソコンのブラウザで動作します。スマートフォンでは動かない場合があります）

⚠️ 注意：ページを開いた瞬間に「年齢を入力してください」という入力ダイアログが表示されます。数字を入力して「OK」を押してください。

script.js

const input = prompt("年齢を入力してください");
const age = Number(input);

if (age >= 13 && age <= 15) {
  alert("中学生ですね！");
} else if (age >= 16 && age <= 18) {
  alert("高校生ですね！");
} else {
  alert("中学生・高校生以外ですね！");
}

💡 && は「かつ」を意味します。age >= 13 && age <= 15 は「13以上かつ15以下」という条件です。いろいろな年齢を入力して試してみましょう！

💡 発展: 三項演算子
短い条件分岐は1行で書けます:
const msg = age >= 18 ? "成人" : "未成年";
条件 ? trueの値 : falseの値 の形です。慣れてきたら使ってみましょう。

自作課題に挑戦！

以下のプログラムを自分で書いてみましょう。

// 1. おみくじ: ランダムな数で運勢を表示
const num = Math.floor(Math.random() * 3);
// num が 0 なら "大吉"、1 なら "中吉"、2 なら "小吉" を表示しよう

// 2. 入場料計算: 年齢で料金を変える
// 6歳未満: 無料、6-12歳: 500円、13歳以上: 1000円

💡 ヒント:
おみくじは if (num === 0) / else if (num === 1) / else で書けます。
入場料は if (age < 6) から始めて、条件を狭い順に書きましょう。

💡 Math.random() とは:
Math.random() は 0〜1 未満のランダムな小数を返します。
Math.floor(Math.random() * 3) で 0, 1, 2 のいずれかの整数になります。

⚠️ よくあるミス

= と === を間違える：if (score = 80) は代入になってしまい、常に true と判定されます。比較するときは === を使いましょう。
else if の条件順序を間違える：広い条件を先に書くと、後の条件に到達しません。例えば score >= 60 を先に書くと、80点以上の人も「良」になってしまいます。厳しい条件（score >= 80）を先に書きましょう。
prompt() の戻り値が文字列なのを忘れる：prompt() で受け取った値はすべて文字列です。数値として比較したいときは Number() で変換しないと、正しく判定されません。