Day4 後半のゴール
Day4 後半では、前半で触れた「四則演算・比較演算・論理演算」を、
実際の“条件”に近い形で組み合わせて使えるようになることを目指します。
特に、論理演算(&&, ||, !)をしっかりイメージできるようになると、
この先の if 文や認証処理の理解が一気に楽になります。
論理演算をもう一歩深く理解する
AND(&&)と OR(||)のイメージ
AND(&&)は「両方とも条件を満たしているか?」
OR(||)は「どちらか一方でも条件を満たしているか?」
を判定するための演算子です。
console.log(true && true); // true
console.log(true && false); // false
console.log(false || true); // true
console.log(false || false); // false
JavaScriptAND は「厳しめの条件」、OR は「ゆるめの条件」とイメージするとわかりやすいです。
具体例:会員ランクと年齢で条件を作る
const isPremiumMember = true;
const age = 25;
const canEnterLounge = isPremiumMember && age >= 20;
console.log(canEnterLounge); // true
JavaScriptこの条件は「プレミアム会員 かつ 20歳以上」のときだけ true になります。
どちらか一方でも満たしていなければ false です。
逆に、「プレミアム会員 または 30歳以上なら OK」という条件なら OR を使います。
const canGetSpecialOffer = isPremiumMember || age >= 30;
console.log(canGetSpecialOffer);
JavaScriptこの場合、どちらか一方でも true なら結果は true です。
NOT(!)で true / false をひっくり返す
! の基本イメージ
! は「NOT(ノット)」と読み、
true を false に、false を true にひっくり返します。
console.log(!true); // false
console.log(!false); // true
JavaScript例:ログインしていない状態を表す
const isLoggedIn = true;
const isGuest = !isLoggedIn;
console.log(isLoggedIn); // true
console.log(isGuest); // false
JavaScript「ログインしていない = ゲスト」という関係を、! を使って表現しています。
セキュリティの観点では、
「ログインしていない人にはこのページを見せない」
「権限がない人にはこのボタンを表示しない」
といった制御に ! がよく使われます。
比較演算と論理演算を組み合わせる
条件を複数組み合わせた例
const age = 19;
const isStudent = true;
const canUseStudentDiscount = age >= 18 && age <= 25 && isStudent;
console.log(canUseStudentDiscount);
JavaScriptここでは、
年齢が 18 以上
かつ 25 以下
かつ 学生である
という3つの条件を AND でつないでいます。
すべて true のときだけ結果が true になります。
OR と AND を混ぜたときの注意(優先順位)
const isPremium = false;
const isStudent = true;
const age = 30;
const canUseService = isPremium || isStudent && age >= 20;
console.log(canUseService);
JavaScriptAND(&&)は OR(||)よりも優先されます。
この式は、実際には次のように解釈されます。
const canUseService = isPremium || (isStudent && age >= 20);
JavaScriptもし「プレミアム会員 か 学生、かつ 20歳以上」という意味にしたいなら、
かっこで明示的にグループ化する必要があります。
const canUseService = (isPremium || isStudent) && age >= 20;
JavaScript条件が複雑になってきたら、
「自分がどういう条件にしたいのか」を
かっこでハッキリ書いてあげるのが安全です。
四則演算+比較演算の実用的な例
合計金額で条件を判定する
const price = 1200;
const quantity = 3;
const total = price * quantity;
const isOverLimit = total > 3000;
console.log("合計金額:", total);
console.log("上限を超えているか:", isOverLimit);
JavaScriptここでは、
数値の計算(四則演算)
→ 結果を比較(比較演算)
→ true / false を得る
という流れを体験できます。
このパターンは、
「金額が一定以上かどうか」
「スコアが合格点を超えているかどうか」
など、現実のロジックで頻繁に登場します。
セキュリティの視点から見る演算子
条件の書き方ひとつで安全性が変わる
たとえば、管理画面へのアクセス条件を考えてみます。
const isLoggedIn = true;
const isAdmin = false;
const canAccessAdminPage = isLoggedIn && isAdmin;
console.log(canAccessAdminPage); // false
JavaScript「ログインしていて、かつ管理者である」という条件です。
もしここで、誤って OR を使ってしまうとどうなるでしょう。
const canAccessAdminPage = isLoggedIn || isAdmin;
console.log(canAccessAdminPage); // true
JavaScript「ログインしているだけで管理画面に入れてしまう」
という危険な状態になります。
演算子はただの記号ですが、
その選び方ひとつでシステムの安全性が大きく変わります。
だからこそ、「意味を理解して選ぶ」ことがとても大事です。
実践コード:Day4 後半のサンプル
サンプル1:AND / OR / NOT をまとめて試す
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day4 後半</title>
</head>
<body>
<h1>Day4: 論理演算の練習</h1>
<script>
console.log("true && false:", true && false);
console.log("true || false:", true || false);
console.log("!true:", !true);
console.log("!false:", !false);
</script>
</body>
</html>
コンソールに出てくる結果を見ながら、
「AND は厳しい条件」「OR はゆるい条件」「NOT はひっくり返す」
というイメージを固めていきましょう。
サンプル2:複数条件の判定
<script>
const age = 22;
const isStudent = true;
const hasCoupon = false;
const canUseDiscount =
(age >= 18 && age <= 25 && isStudent) || hasCoupon;
console.log("割引を使えるか:", canUseDiscount);
</script>
ここでは、
学生かつ 18〜25歳
または クーポンを持っている
という条件を表現しています。
かっこを使って「どこがセットの条件なのか」を
自分にも他人にもわかるように書いています。
Day4 後半の重点理解
今日の後半で特に大事なポイント
AND(&&)は「両方 true なら true」
OR(||)は「どちらかが true なら true」
NOT(!)は「true / false をひっくり返す」
比較演算と論理演算を組み合わせることで、
「現実の条件」をコードとして表現できるようになります。
そして、条件の書き方を間違えると、
本来通してはいけないケースを通してしまうことがある、
というセキュリティ的な怖さも、少しだけ意識しておいてください。
