式と演算子の実践練習
「式と演算子の実践練習」をやっていきます。
超初心者でも「なるほど！」ってなるように、段階的にやります。
ステップ1：算術演算子（＋−×÷）の基本
🧩 例題1：足し算・引き算・掛け算・割り算
let a = 10;
let b = 3;
console.log(a + b); // 足し算
console.log(a - b); // 引き算
console.log(a * b); // 掛け算
console.log(a / b); // 割り算
console.log(a % b); // 割り算の余り
🧠 解説：
| 式 | 結果 | 説明 |
|---|---|---|
10 + 3 | 13 | 足し算 |
10 - 3 | 7 | 引き算 |
10 * 3 | 30 | 掛け算 |
10 / 3 | 3.333… | 割り算（小数OK） |
10 % 3 | 1 | 余り |
ステップ2：代入演算子で省略しよう
🧩 例題2：+= などの複合代入
let x = 5;
x += 3; // x = x + 3
x -= 2; // x = x - 2
x *= 4; // x = x * 4
x /= 2; // x = x / 2
console.log(x);
🧠 流れ：
1️⃣ 最初 x = 5
2️⃣ x += 3 → 8
3️⃣ x -= 2 → 6
4️⃣ x *= 4 → 24
5️⃣ x /= 2 → 12
➡️ 最後の x は 12 になります。
ステップ3：比較演算子で条件を調べる
🧩 例題3：== と === の違い
console.log(3 == "3"); // true
console.log(3 === "3"); // false
🧠 ポイント：
==は「見た目が同じならOK」（型変換あり）===は「型まで同じならOK」（厳密比較）
👉 なので "3" は文字列、3 は数値。
型が違うため、=== は false になります。
ステップ4：論理演算子（&&, ||, !）の動き
🧩 例題4：AND（&&）と OR（||）
let age = 20;
let hasTicket = true;
console.log(age >= 18 && hasTicket); // 両方trueならtrue
console.log(age >= 18 || hasTicket); // どちらかtrueならtrue
🧠 結果：
&&→ true（20歳だしチケットも持ってる）||→ true（どちらもtrue）
🧩 例題5：NOT（!）で反転
let loggedIn = false;
console.log(!loggedIn); // true
🧠 ! は「真偽を逆転」する。false → true、true → false。
ステップ5：条件（三項）演算子
🧩 例題6：短く書ける if の代わり
let score = 80;
let result = (score >= 70) ? "合格" : "不合格";
console.log(result); // "合格"
🧠 解説：
?の前の条件（score >= 70）をチェック。- true なら
?の後の値を返す。 - false なら
:の後の値を返す。
ステップ6：ヌル合体演算子（??）
🧩 例題7：値が「null/undefined」のときの代替
let name = null;
let displayName = name ?? "ゲスト";
console.log(displayName); // "ゲスト"
🧠 ?? は、「左が null または undefined のときだけ」右を使います。
似てるけど、|| は「falsy（0, ”, false）」も右を使ってしまう点が違います。
ステップ7：演算子の優先順位
🧩 例題8：順番を確認
let result = 2 + 3 * 4;
console.log(result); // 14
🧠 掛け算のほうが優先なので (2 + 3) * 4 ではなく 2 + (3 * 4)。
👇括弧をつけて変えると結果が変わります：
let result2 = (2 + 3) * 4;
console.log(result2); // 20
ステップ8：まとめ表（よく使うもの）
| 種類 | 代表演算子 | 意味 |
|---|---|---|
| 算術 | + - * / % ** | 数値計算 |
| 代入 | = += -= *= /= | 値を入れる・更新する |
| 比較 | === !== > < >= <= | 条件を調べる |
| 論理 | `&& | |
| 条件（三項） | ?: | if の省略形 |
| その他 | typeof, delete | 型確認・削除など |
練習問題（挑戦！）
初級
let a = 10;
let b = 5;
console.log(a / b + a % b);
👉 結果は？（ヒント：10 ÷ 5 = 2、余り = 0）
中級
let x = 0;
let y = x || 10;
let z = x ?? 20;
console.log(y, z);
👉 || は falsy 判定、?? は null/undefined 判定。
結果は？（0は falsy だけど null じゃない）
上級
let a = 1;
let b = 2;
let result = (a > b) ? a++ : ++b;
console.log(a, b, result);
👉 どの順に実行されるか考えてみよう。