JavaScript | 基礎構文:比較・論理 – NOT

JavaScript JavaScript
スポンサーリンク

論理 NOT を一言でいうと

論理 NOT(ノット)は、
「true を false に、false を true にひっくり返す演算子」 です。

記号は !(びっくりマーク)を使います。

  • !truefalse
  • !falsetrue

日本語で言うと「〜ではない」「〜じゃない」という意味になります。

ここが重要です。
論理 NOT は単体で使うこともありますが、
本当に力を発揮するのは 「既にある条件を“反転して”使いたいとき」 です。
! を見るたびに、頭の中で「じゃない」と読み替えるクセをつけてください。


まずは true / false に対する NOT を押さえる

一番シンプルな動き

console.log(!true);   // false
console.log(!false);  // true
JavaScript

ただこれだけです。
「真」を「偽」に、「偽」を「真」にするスイッチだと思ってください。

if 文での基本的な使い方

「ログインしていないときだけ、ログイン画面を表示したい」とします。

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("ログイン画面を表示");
}
JavaScript

isLoggedIn が false のとき、

  • !isLoggedIn!falsetrue

なので、条件が true になって if の中が実行されます。

ここが重要です。
「条件そのもの」ではなく「その逆」を書きたいときに、NOT はものすごく役立ちます。
isLoggedIn(ログインしている)というフラグを、
!isLoggedIn(ログインしていない)として使い回すイメージです。


「〜ではない」という条件を自然に書いてみる

等しくない:!== と !=== は違うので注意

よくある間違いがこれです。

if (!=== 0) { ... } // これは文法エラー
JavaScript

!=== という演算子は存在しません。

「0 ではない」を書きたいときは、
!==(厳密に等しくない) を使います。

const n = 5;

if (n !== 0) {
  console.log("0 ではない");
}
JavaScript

条件全体をひっくり返すイメージ

「スコアが 70 未満なら不合格」という条件を書きたいとします。

ふつうに書くと:

const score = 65;

if (score < 70) {
  console.log("不合格");
}
JavaScript

これを、「合格ではない」として書き直すと:

const score = 65;

const isPass = score >= 70;

if (!isPass) {
  console.log("不合格");
}
JavaScript

ここで !isPass は「合格ではない」という意味になります。

ここが重要です。
NOT は「比較式」だけにかける必要はありません。
isPassisLoggedIn のような「条件の名前」をいったん作ってから、その否定 !isPass として使うと、コードの意味がものすごく読みやすくなります。


truthy / falsy と NOT(ここは少し深め)

JavaScript の if は「true / false 以外」も評価する

JavaScript の条件式は、
true / false 以外の値も「真っぽい / 偽っぽい」で評価します。

「偽っぽい値(falsy)」の代表例は:

  • false
  • 0
  • ""(空文字)
  • null
  • undefined
  • NaN

それ以外はだいたい「真っぽい値(truthy)」です。

if ("hello") { console.log("truthy"); }   // 実行される
if (123)     { console.log("truthy"); }   // 実行される
if ("")      { console.log("実行されない"); }
if (0)       { console.log("実行されない"); }
JavaScript

! は「truthy / falsy」をもとに反転する

console.log(!"hello");  // false ("hello" は truthy → !truthy = false)
console.log(!123);      // false

console.log(!"");       // true  (空文字は falsy → !falsy = true)
console.log(!0);        // true
console.log(!null);     // true
console.log(!undefined);// true
console.log(!NaN);      // true
JavaScript

つまり、!

  • truthy な値 → false
  • falsy な値 → true

に変換します。

ここが重要です。
「値が“空”かどうか」「“未設定”かどうか」を一気に判定したいとき、
条件式にその値を直接書いて !value とするパターンはよく使われます。
ただし「0 や空文字も falsy」なので、それを「有効な値」と見なしたい場面では注意が必要です。


二重 NOT(!!)で「きっちり真偽値にする」テクニック

!!value は「その値を true / false に変換する」

! を 2 回重ねた !!value は、
「value を“真偽値として評価した結果”を true / false に落とし込む」 テクニックです。

console.log(!!true);      // true
console.log(!!false);     // false

console.log(!!"hello");   // true  ("hello" は truthy)
console.log(!!"");        // false (空文字は falsy)

console.log(!!123);       // true
console.log(!!0);         // false

console.log(!!null);      // false
console.log(!!undefined); // false
console.log(!!NaN);       // false
JavaScript

1 回目の ! で値を「真偽反転」し、
2 回目の ! でさらに反転して、
「純粋な boolean(true / false)」だけを取り出すイメージ です。

型を揃えたいときに使える

例えば「この値が設定されているかどうか」を boolean にしたいとき。

const name = "太郎";

const hasName = !!name;
console.log(hasName); // true
JavaScript

name に空文字 "" が入っているときは false になります。

ここが重要です。
!! は、「ある値を“存在する・しない”の 2 値に落としたい」ときの小技です。
ただし、0"" も「ない」扱いになる点は常に意識してください。
初心者のうちは !! を多用せず、if 文の条件にそのまま書くところから慣れていけば十分です。


「読みにくい NOT」と「読みやすい NOT」

条件が複雑なときの ! は、かえって混乱を生む

次の 2 パターンを比べてみてください。

// パターンA
if (!(age >= 20 && country === "Japan")) {
  console.log("条件を満たしていない");
}

// パターンB
const isAdultJapanese = age >= 20 && country === "Japan";

if (!isAdultJapanese) {
  console.log("条件を満たしていない");
}
JavaScript

動きは同じですが、
パターンAは「年齢が20以上で国が日本であることの否定」と、頭の中で一度展開しないと意味が追いにくいです。

パターンBは、

  • isAdultJapanese という名前で条件をまとめる
  • !isAdultJapanese を「日本在住の成人ではない」と読む

というふうに、意味がスッと入ってきます。

「肯定形の条件+NOT」で考える癖をつける

例えば、

if (!isError) { ... }
JavaScript

より、

const isSuccess = !isError;

if (isSuccess) { ... }
JavaScript

と書いたほうが、その後のコードを読む人には親切です。

ここが重要です。
NOT を使うときは「条件をそのまま否定形で書く」のではなく、
まず肯定形の条件に名前を付けてから、それを ! で反転して使う。
この“ひと手間”が、コードの読みやすさを劇的に変えます。


NOT と AND / OR を組み合わせるときの注意

優先順位とカッコ

JavaScript では演算子に優先順位がありますが、
!&&|| が入り乱れてくると、
人間の頭では一瞬で理解しにくくなります。

例えば:

if (!isLoggedIn && !isGuest || isAdmin) {
  // ...
}
JavaScript

これは、

  • !isLoggedIn && !isGuest を先に評価してから
  • その結果と isAdmin|| でつなぐ

という順番で評価されますが、
ぱっと見て意味を取るのは難しいです。

カッコを使って意味をはっきりさせます。

if ((!isLoggedIn && !isGuest) || isAdmin) {
  // ログインもゲストもしていない、または管理者
}
JavaScript

さらに読みやすくするなら、条件に名前を付ける。

const isNormalUser = !isLoggedIn && !isGuest;

if (isNormalUser || isAdmin) {
  // ...
}
JavaScript

ここが重要です。
NOT と AND / OR を組み合わせた瞬間に、条件は途端に読みづらくなります。
「自分なら一発で意味が分かるか?」と自問して、
少しでも怪しいと思ったら、迷わずカッコと変数名を使って分解してください。


初心者として論理 NOT で本当に押さえてほしいこと

! は true / false をひっくり返す演算子。
「〜ではない」「〜じゃない」と頭の中で読む。

!condition と書くより、
const ok = condition; if (!ok) ... のように
いったん「肯定形」に名前をつけてから反転すると読みやすい。

!value は「truthy / falsy」をもとに反転する。
""0nullundefinedNaN などは falsy なので、! をつけると true になる。

!!value は「その値を boolean(true / false)に変換する」小技。
存在チェックやフラグ化に使えるが、0 や空文字も「false」になる点には注意が必要。

ここが重要です。
論理 NOT は、単に「逆にする記号」ではなく、
「条件をどう言い換えるか」「どの形にしておくと頭に入りやすいか」を考えるためのスイッチでもあります。
ただ ! をつけるだけでなく、
“どの条件をひっくり返すと一番読みやすいか” を意識しながら使っていくと、
あなたのコードはぐっと “意図が伝わるもの” に育っていきます。

最後に、小さな練習を置いておきます。
結果を予想してから実行してみてください。

console.log(!true);
console.log(!false);

console.log(!"hello");   // なぜこうなる?
console.log(!"");        // なぜこうなる?

console.log(!!"hello");
console.log(!!"");
console.log(!!0);
console.log(!!123);

const isLoggedIn = false;
if (!isLoggedIn) {
  console.log("ログインしていないときだけ、これが表示される");
}
JavaScript

それぞれについて「なぜそうなるのか」を日本語で説明できたとき、
論理 NOT はもうあなたの手足のように使いこなせる状態になっています。

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