Day4 前半のゴール
Day4 のテーマは「演算子」です。
演算子は、値と値のあいだで「計算する」「比べる」「組み合わせる」といった操作をするための記号です。
前半では、次の3つをしっかり押さえることを目標にします。
Day4 前半で目指すこと
四則演算で「数値を計算する」感覚をつかむ
比較演算で「大きい・小さい・等しい」を表現できるようになる
論理演算の入り口として true / false を組み合わせるイメージを持つ
四則演算の基本
足し算・引き算・掛け算・割り算
まずは一番イメージしやすい「数の計算」からいきます。
JavaScript では、次の記号を使って四則演算を行います。
console.log(10 + 5); // 足し算 → 15
console.log(10 - 5); // 引き算 → 5
console.log(10 * 5); // 掛け算 → 50
console.log(10 / 5); // 割り算 → 2
+、-、*、/ は、数学とほぼ同じ意味です。
変数と組み合わせて使う
Day2・Day3 で学んだ「変数」と組み合わせると、
より実用的な計算ができます。
const price = 1200;
const tax = 120;
const total = price + tax;
console.log(total); // 1320
ここでは、price と tax を number 型として扱い、+ で合計金額を計算しています。
文字列との違いを再確認
Day3 でも触れましたが、
四則演算は number 型 に対して行うのが基本です。
console.log("10" + "5"); // "105"（文字列の結合）
console.log(10 + 5); // 15（数値の足し算）
クォーテーションをつけた瞬間、それは string になります。
「計算したいのか」「文字として扱いたいのか」を意識して書き分けることが大事です。
比較演算の基本
「大きい・小さい・等しい」をコードで表す
比較演算子は、値と値を比べて true か false を返す 演算子です。
結果は必ず boolean 型になります。
console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(10 >= 10); // true
console.log(10 <= 9); // false
> は「より大きい」、< は「より小さい」、>= は「以上」、<= は「以下」を表します。
等しい・等しくないを表す
「等しい」「等しくない」を表す演算子もあります。
console.log(10 === 10); // true
console.log(10 === 5); // false
console.log(10 !== 5); // true
console.log(10 !== 10); // false
=== は「等しい」、!== は「等しくない」です。
ここで重要なのは、= は「代入」、=== は「比較」 という違いがあることです。
const a = 10; // これは「a に 10 を代入」
a === 10; // これは「a が 10 と等しいかどうかを比較」
初心者がよくやるミスは、
「比較したいのに = を使ってしまう」ことです。= は「右の値を左に入れる」記号であって、
「等しい」という意味ではありません。
比較演算の結果は boolean
比較演算の結果は、必ず true か false になります。
const age = 20;
const isAdult = age >= 18;
console.log(isAdult); // true
このように、比較の結果を変数に入れておくと、
後で条件分岐（if 文）に使いやすくなります。
論理演算の入り口
true / false を組み合わせる
論理演算子は、
true / false（boolean）同士を組み合わせて、
新しい true / false を作るための演算子です。
まずは代表的な &&（AND）から見てみましょう。
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
&& は「両方とも true のときだけ true」になります。
それ以外はすべて false です。
例：条件を2つ満たしているかどうか
const age = 20;
const isStudent = true;
const canUseStudentDiscount = age >= 18 && isStudent;
console.log(canUseStudentDiscount); // true
ここでは、
- 年齢が 18 歳以上
- かつ 学生である
という2つの条件を && でつないでいます。
両方とも true のときだけ、結果が true になります。
セキュリティ視点での論理演算
実際のシステムでは、
- ログインしているか
- 権限があるか
- アカウントが有効か
といった条件を && や ||（OR）で組み合わせて、
「この操作を許可していいかどうか」を判断します。
論理演算の理解があいまいだと、
本来アクセスできない人に機能を開放してしまうなど、
重大なセキュリティ事故につながることがあります。
Day4 前半では && のイメージだけで十分ですが、
「true / false を組み合わせて条件を作る」という感覚は
早めに持っておくと、この先がかなり楽になります。
実践コード：Day4 前半のサンプル
サンプル1：四則演算をまとめて試す
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day4 演算子</title>
</head>
<body>
<h1>Day4: 四則演算の基本</h1>
<script>
console.log("10 + 5 =", 10 + 5);
console.log("10 - 5 =", 10 - 5);
console.log("10 * 5 =", 10 * 5);
console.log("10 / 5 =", 10 / 5);
</script>
</body>
</html>
コンソールにそれぞれの結果が表示されることを確認してみてください。
サンプル2：比較演算と boolean
<script>
const a = 10;
const b = 5;
console.log("a > b:", a > b); // true
console.log("a < b:", a < b); // false
console.log("a === b:", a === b); // false
console.log("a !== b:", a !== b); // true
</script>
「比較の結果は true / false になる」という感覚を、
実際に目で見て確認しておきましょう。
サンプル3：論理演算の入り口
<script>
const age = 20;
const isStudent = true;
const canUseDiscount = age >= 18 && isStudent;
console.log("学生割引を使えるか:", canUseDiscount);
</script>
ここでは、
「条件を2つ組み合わせて判断する」という論理演算の基本的な使い方を体験できます。
Day4 前半の重点理解
今日の前半で特に大事なポイント
四則演算は number 型に対して使う
比較演算の結果は必ず boolean（true / false）になる
= は代入、=== は比較というまったく別の意味
論理演算は true / false を組み合わせて条件を作るためのもの
後半では、
論理演算子をもう少し深掘りしつつ、
実際の条件分岐につながるような練習問題を扱っていきます。