JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript:JavaScript文法の基礎 - Day4:演算子

JavaScript JavaScript
スポンサーリンク

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
JavaScript

AND は「厳しめの条件」、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);
JavaScript

AND(&&)は 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 をひっくり返す」

比較演算と論理演算を組み合わせることで、
「現実の条件」をコードとして表現できるようになります。

そして、条件の書き方を間違えると、
本来通してはいけないケースを通してしまうことがある、
というセキュリティ的な怖さも、少しだけ意識しておいてください。

タイトルとURLをコピーしました