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

JavaScript 未分類
スポンサーリンク

2日目のゴールとテーマ

2日目のテーマは「条件分岐で“状況に応じて動きを変える”」です。
昨日は「入力して、計算して、表示する」まで行きましたが、
今日はそこに「もし〜なら、こうする」という“分かれ道”を加えます。

人間は当たり前にやっていることです。

もし雨なら傘を持っていく
もし合計が3000円以上なら送料を無料にする
もし年齢が20歳以上なら「成人」と表示する

これをJavaScriptで表現できるようになるのが、2日目のゴールです。

条件分岐の基本形 if 文を知る

「もし〜なら〜する」をコードにする

JavaScriptの条件分岐の基本は if 文です。
形はとてもシンプルです。

if (条件) {
  // 条件が「真（true）」のときに実行されるコード
}
JavaScript

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

let age = 22;

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

ここでの重要ポイントをかみ砕きます。

age >= 20 は「age が 20 以上か？」という質問です。
この質問の答えは true（真）か false（偽）のどちらかです。
if は、その答えが true のときだけ中のブロック { ... } を実行します。

age が 18 なら、age >= 20 は false なので、
中の console.log は実行されません。

比較演算子をまとめて押さえる

「〜より大きい」「等しい」をどう書くか

条件を書くときに使う「比較演算子」をいくつか覚えます。
全部一気に暗記しなくてよくて、「よく使うものから慣れる」でOKです。

> は「より大きい」
>= は「以上」
< は「より小さい」
<= は「以下」
=== は「等しい」
!== は「等しくない」

例えば、

let score = 80;

console.log(score > 70);   // true
console.log(score < 50);   // false
console.log(score === 80); // true
console.log(score !== 100);// true
JavaScript

コンソールで実際に打ってみると、
true / false が返ってくるのが分かります。

ここで大事なのは、「条件は“質問”であり、その答えは true か false」という感覚です。
if は、その true / false を見て「やるか・やらないか」を決めています。

if と else で「どちらか一方」を選ぶ

「〜ならA、そうでなければB」

よくあるパターンは、「条件を満たすときはA、満たさないときはB」という分岐です。
これは if と else を使います。

let age = 17;

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

age が 17 のときは、age >= 20 が false なので、
if の中はスキップされ、else の中が実行されます。

ここでの重要ポイントは、「どちらか一方だけが実行される」ということです。
if の条件が true なら if ブロックだけ、
false なら 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。
この時点で B が決まり、以降の条件はもうチェックされません。

二つ目は、「条件の順番が大事」ということです。
もし最初に score >= 70 を書いてしまうと、
80点でも90点でも最初の条件で止まってしまい、
全部 C になってしまいます。

「より厳しい条件（範囲が狭いもの）を上に書く」というのがコツです。

1日目の「お会計ミニアプリ」に条件を足す

合計3000円以上なら「送料無料」にしてみる

昨日作った「お会計ミニアプリ」に、
「合計が3000円以上なら送料0円、それ以外は送料500円」という条件を足してみます。

まずは、送料なしバージョンを思い出します。

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

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

let total = price * count;

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

ここに条件分岐を足します。

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 という変数を先に宣言しておく（中身はまだ決めない）。
if の中で「条件に応じて shipping に値を入れる」。
最後に total + shipping で最終金額を計算する。

このように、「条件によって変わる値」を変数に入れておくと、
後の計算がとても書きやすくなります。

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

「かつ」「または」を表現する

現実の条件は、1つだけとは限りません。

年齢が20歳以上 かつ 会員である
合計が3000円以上 または クーポンを持っている

こういう「条件の組み合わせ」は、論理演算子で書きます。

&& は「かつ（AND）」
|| は「または（OR）」

例を見てみます。

let age = 25;
let isMember = true;

if (age >= 20 && isMember === true) {
  console.log("会員の成人です");
}
JavaScript

age が 25 で isMember が true なので、
age >= 20 && isMember === true は true になり、メッセージが表示されます。

今度は OR の例です。

let total = 2800;
let hasCoupon = true;

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

ここでの重要ポイントは、「どちらか一方でも true なら OR 全体が true」ということです。
total は 3000 未満ですが、hasCoupon が true なので、
条件全体は true になり、「送料無料になります」が表示されます。

2日目の時点では、「&& は“両方必要”、|| は“どちらかでOK”」
このイメージだけ持っておけば十分です。

真偽値（boolean）という“はい/いいえ”の型

true と false も「値」である

条件式の結果は true か false でした。
実はこれも「値の一種」で、型の名前は boolean（ブーリアン）です。

let isAdult = true;
let isMember = false;

console.log(isAdult);   // true
console.log(isMember);  // false
JavaScript

boolean を変数に入れておくと、
if の条件にそのまま使えます。

let isAdult = true;

if (isAdult) {
  console.log("成人です");
}
JavaScript

ここでのポイントは、「if のカッコの中には“true/falseに評価できるもの”が来る」ということです。
比較式（age >= 20）でもいいし、
boolean 変数（isAdult）でもいい。

「条件式は true/false を作る工場」
「if は true/false を見て分岐する門番」
このイメージを持っておくと、だいぶスッキリします。

ちょっとだけ“アプリっぽく”：年齢でメッセージを変える

年齢に応じて挨拶を変えるミニアプリ

ユーザーに年齢を入力してもらい、
年齢に応じてメッセージを変えるミニアプリを書いてみます。

仕様はこうします。

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) で、「age が数字としておかしいかどうか」をチェックしている。
prompt の入力が “abc” などだった場合、Number(“abc”) は NaN になるので、
最初の if で弾けます。

条件を「小さい方から順に」書いている。
age <= 12 → age <= 19 → それ以外
という順番にすることで、
0〜12、13〜19、20以上ときれいに分かれます。

「おかしな値（マイナス）」を最初にチェックしている。
これにより、後ろの条件が変な値を拾わないようにしています。

こういう「入力チェック＋条件分岐」は、
現実のアプリでも頻繁に出てきます。

2日目で一番大事な感覚

「コードに“もし〜なら”を埋め込めるようになった」

今日やったことを一言で言うと、
「状況に応じて動きを変える力を手に入れた」です。

if（もし〜なら）
else（そうでなければ）
else if（さらに別の条件）
比較演算子（>=、=== など）
論理演算子（&&、||）

これらを組み合わせることで、

合計がいくら以上なら
年齢がいくつ以上なら
会員かどうかによって

といった“現実の条件”を、コードの中にそのまま持ち込めるようになりました。

2日目のまとめ

今日のポイントを短く整理すると、

if / else / else if で「条件に応じて処理を分ける」ことができるようになった
比較演算子（>、>=、===、!== など）で「質問」を作り、その答えは true / false になる
論理演算子（&&、||）で「条件を組み合わせる」ことができる
prompt で受け取った文字列を Number に変換し、条件分岐に使える
1日目の「お会計ミニアプリ」に「3000円以上なら送料無料」というルールを追加できた

次のステップ（3日目）では、
「同じ処理を何度も繰り返す」ための仕組み、
つまり「繰り返し（ループ）」を扱っていきます。

もし余裕があれば、
今日のお会計アプリに「会員ならさらに10%引き」などの条件を足してみると、
条件分岐の感覚が一気に自分のものになります。

スポンサーリンク
タイトルとURLをコピーしました