JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 3日目

2日目のゴールとテーマ

2日目のテーマは「条件分岐で“判断できるコード”にする」です。
今日は、コンピュータに「状況を見て、自分で選ばせる」感覚を身につけます。

もし〜なら、こうする
そうでなければ、別のことをする

この“分かれ道”を書けるようになると、一気に「ただの計算」から「アプリっぽい動き」に変わります。

if文の正体をつかむ

「質問して、答えがYESなら実行する」

いちばん基本の形はこれです。

if (条件) {
  // 条件が true（YES）のときだけ実行される
}

if (条件) {
  // 条件が true（YES）のときだけ実行される
}

例えば、「年齢が20歳以上なら“成人です”と表示する」はこう書けます。

let age = 22;

if (age >= 20) {
  console.log("成人です");
}

let age = 22;

if (age >= 20) {
  console.log("成人です");
}

ここで大事なのは、「条件」は“質問”だということです。

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とは等しくない）

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とは等しくない）

ポイントは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("未成年です");
}

let age = 17;

if (age >= 20) {
  console.log("成人です");
} else {
  console.log("未成年です");
}

age が 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");
}

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");
}

ここで重要なのは「上から順番にチェックされる」ことです。

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 + " 円です。");

let priceText = prompt("商品の単価を入力してください（円）：");
let countText = prompt("個数を入力してください：");

let price = Number(priceText);
let count = Number(countText);

let total = price * count;

console.log("合計金額は " + total + " 円です。");

ここに、「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 + " 円です。");

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 + " 円です。");

ここで深掘りしたいのは、「変数 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円以上なので、特別割引！");
}

let total = 2800;
let isMember = true;

if (total >= 3000 && isMember === true) {
  console.log("会員かつ3000円以上なので、特別割引！");
}

&& は「かつ」です。
両方 true のときだけ、全体が true になります。

今度は OR（または）の例です。

let total = 2800;
let hasCoupon = true;

if (total >= 3000 || hasCoupon === true) {
  console.log("送料無料になります");
} else {
  console.log("送料がかかります");
}

let total = 2800;
let hasCoupon = true;

if (total >= 3000 || hasCoupon === true) {
  console.log("送料無料になります");
} else {
  console.log("送料がかかります");
}

|| は「どちらかが 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("まだ成人ではありません");
}

let isMember = true;
let isAdult = false;

if (isMember) {
  console.log("会員です");
}

if (!isAdult) {
  console.log("まだ成人ではありません");
}

ここで新しく出てきた ! は「反対にする」演算子です。
!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("大人ですね！");
}

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("大人ですね！");
}

ここでの重要ポイントを整理します。

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倍」など、
自分なりのルールを足して遊んでみてください。
それを考える時間そのものが、もう“設計者の時間”です。