2日目のゴールとテーマ
2日目のテーマは「条件分岐で“判断できるコード”にする」です。
今日は、コンピュータに「状況を見て、自分で選ばせる」感覚を身につけます。
もし〜なら、こうする
そうでなければ、別のことをする
この“分かれ道”を書けるようになると、一気に「ただの計算」から「アプリっぽい動き」に変わります。
if文の正体をつかむ
「質問して、答えがYESなら実行する」
いちばん基本の形はこれです。
if (条件) {
// 条件が true(YES)のときだけ実行される
}
JavaScript例えば、「年齢が20歳以上なら“成人です”と表示する」はこう書けます。
let age = 22;
if (age >= 20) {
console.log("成人です");
}
JavaScriptここで大事なのは、「条件」は“質問”だということです。
age >= 20
これは「age は 20 以上ですか?」という質問で、
答えは true(はい)か false(いいえ)のどちらかです。
if は、その答えが true のときだけ中の { ... } を実行します。
false のときは、何もせずに通り過ぎます。
比較演算子を体で覚える
「大きい・小さい・等しい」をどう書くか
条件を書くときに使う“記号”を押さえましょう。
let x = 10;
console.log(x > 5); // true (5より大きい)
console.log(x >= 10); // true (10以上)
console.log(x < 3); // false (3より小さくない)
console.log(x <= 10); // true (10以下)
console.log(x === 10); // true (10と等しい)
console.log(x !== 8); // true (8とは等しくない)
JavaScriptポイントは2つです。
1つ目、「===」は「等しい」です。
「=」は「代入(入れる)」なので、条件には使いません。
2つ目、これらは全部「true か false を返す“質問”」です。
if のカッコの中には、「true/false に評価できるもの」が入る、と覚えておくとスッキリします。
if と else で「どっちか一方」を選ぶ
「〜ならA、そうでなければB」
よくあるのは、「条件を満たすときはA、そうでないときはB」というパターンです。
let age = 17;
if (age >= 20) {
console.log("成人です");
} else {
console.log("未成年です");
}
JavaScriptage が 17 のとき、age >= 20 は false なので、
if の中はスキップされ、else の中だけが実行されます。
ここでのキモは、「if と else のどちらか一方だけが必ず実行される」ということです。
両方は絶対に動きません。
else if で「3つ以上の分かれ道」を作る
成績判定を例にする
「90点以上ならA、80以上ならB、70以上ならC、それ以外はD」
こういう段階的な分岐は、else if を使います。
let score = 83;
if (score >= 90) {
console.log("評価: A");
} else if (score >= 80) {
console.log("評価: B");
} else if (score >= 70) {
console.log("評価: C");
} else {
console.log("評価: D");
}
JavaScriptここで重要なのは「上から順番にチェックされる」ことです。
score が 83 のとき、
score >= 90 → false
score >= 80 → true(ここで決定)
なので、その下の score >= 70 はもう見られません。
だからこそ、「より厳しい条件(範囲が狭いもの)を上に書く」が鉄則です。
90以上 → 80以上 → 70以上 → それ以外
という順番にすることで、きれいに分かれます。
1日目の「お会計ミニアプリ」に条件を足す
合計3000円以上なら「送料無料」にする
昨日のコードを思い出します。
let priceText = prompt("商品の単価を入力してください(円):");
let countText = prompt("個数を入力してください:");
let price = Number(priceText);
let count = Number(countText);
let total = price * count;
console.log("合計金額は " + total + " 円です。");
JavaScriptここに、「3000円以上なら送料0円、それ以外は送料500円」というルールを足します。
let priceText = prompt("商品の単価を入力してください(円):");
let countText = prompt("個数を入力してください:");
let price = Number(priceText);
let count = Number(countText);
let total = price * count;
let shipping;
if (total >= 3000) {
shipping = 0;
console.log("3000円以上なので、送料は無料です。");
} else {
shipping = 500;
console.log("送料は500円です。");
}
let finalTotal = total + shipping;
console.log("お支払い金額は " + finalTotal + " 円です。");
JavaScriptここで深掘りしたいのは、「変数 shipping の使い方」です。
先に let shipping; だけ宣言しておく
if の中で、条件に応じて shipping に 0 または 500 を入れる
最後に total + shipping で最終金額を出す
「条件によって変わる値を、変数に一度“受け止める”」
このパターンは、現実のアプリでもめちゃくちゃよく出てきます。
条件を組み合わせる:&& と ||
「両方満たす」「どちらか満たす」
現実の条件は、1つだけとは限りません。
合計3000円以上 かつ 会員
合計3000円以上 または クーポンあり
こういうときに使うのが、論理演算子です。
let total = 2800;
let isMember = true;
if (total >= 3000 && isMember === true) {
console.log("会員かつ3000円以上なので、特別割引!");
}
JavaScript&& は「かつ」です。
両方 true のときだけ、全体が true になります。
今度は OR(または)の例です。
let total = 2800;
let hasCoupon = true;
if (total >= 3000 || hasCoupon === true) {
console.log("送料無料になります");
} else {
console.log("送料がかかります");
}
JavaScript|| は「どちらかが true ならOK」です。
total は 3000 未満ですが、hasCoupon が true なので、
条件全体は true になり、「送料無料になります」が実行されます。
2日目の段階では、
&& は「両方必要」
|| は「どちらかでOK」
このイメージだけ持っていれば十分です。
真偽値(boolean)を“状態”として持つ
「はい/いいえ」も立派なデータ
条件式の結果は true / false でした。
これは boolean(ブーリアン)という型の値です。
let isMember = true;
let isAdult = false;
if (isMember) {
console.log("会員です");
}
if (!isAdult) {
console.log("まだ成人ではありません");
}
JavaScriptここで新しく出てきた ! は「反対にする」演算子です。
!true は false、!false は true になります。
ポイントは、「if のカッコの中には boolean そのものを置いてもいい」ということです。if (isMember) は、「isMember が true なら」という意味になります。
年齢でメッセージを変えるミニアプリ
入力チェックも含めて書いてみる
仕様を決めます。
年齢を入力してもらう
数字でない場合は「数字で入力してください」
0未満なら「正しい年齢を入力してください」
0〜12歳なら「子どもですね!」
13〜19歳なら「ティーンですね!」
20歳以上なら「大人ですね!」
コードはこうです。
let ageText = prompt("あなたの年齢を入力してください:");
let age = Number(ageText);
if (Number.isNaN(age)) {
console.log("数字で入力してください。");
} else if (age < 0) {
console.log("正しい年齢を入力してください。");
} else if (age <= 12) {
console.log("子どもですね!");
} else if (age <= 19) {
console.log("ティーンですね!");
} else {
console.log("大人ですね!");
}
JavaScriptここでの重要ポイントを整理します。
Number.isNaN(age) で、「数字としておかしいか」を最初にチェックしている
マイナスの年齢も先に弾いている
そのあと、「小さい順」に条件を書いている(<=12 → <=19 → それ以外)
この順番がきれいだと、バグが入りにくくなります。
条件分岐は「順番」と「抜け漏れ」が命です。
2日目で身につけてほしい“感覚”
「コードに“ルール”を書き込めるようになった」
今日あなたがやったのは、
「現実のルールを、そのままJavaScriptに翻訳する」ことです。
3000円以上なら送料無料
年齢が20以上なら成人
会員かつ3000円以上なら特別割引
こういう“日本語の条件”を、
if / else / else if と比較演算子で表現できるようになりました。
これはもう、「ただの計算機」から一歩抜け出して、
「ルールを持った小さなアプリ」を作れる段階に入った、ということです。
2日目のまとめ
今日のキーポイントを短くまとめると、
if / else / else if で「状況に応じて処理を変えられる」
比較演算子(>=、===、!== など)は「質問を作る道具」
論理演算子(&&、||)で「条件を組み合わせられる」
boolean(true / false)も変数に入れて扱える
1日目のお会計アプリに「送料無料」のルールを追加できた
次の3日目では、「同じ処理を何度も繰り返す」ための仕組み、
つまり「ループ(繰り返し)」を扱っていきます。
もし余裕があれば、
今日のお会計アプリに「会員ならさらに10%引き」や
「合計1万円以上ならポイント2倍」など、
自分なりのルールを足して遊んでみてください。
それを考える時間そのものが、もう“設計者の時間”です。
