比較演算子と論理演算子:厳密比較(===)の重要性

比較演算子(VSCODE)
目次

比較演算子とは?(比較して true / false を作る道具)

プログラミングでは「今の状態に応じて処理を分ける」ことがよくあります。たとえば「点数が80点以上なら合格にする」のように、何かを基準に判断しますよね。この“判断の材料”を作るために使うのが比較演算子です。

比較演算子は、左側と右側の値を比べて、結果として必ず Boolean(真偽値)を返します。

  • true(条件に当てはまる)
  • false(条件に当てはまらない)

この true / false があるから、if文やwhile文で「実行する/しない」を決められます。

例)

  • score >= 90 が true なら「合格」処理を実行
  • false ならスキップ

比較演算子には大きく2種類あります。

(1) 等しいかどうかを比べる

  • ==, !=, ===, !==

(2) 大きい/小さいを比べる

  • , <, >=, <=

JavaScriptが特徴的なのは、「等しい」を表す演算子が2種類あることです。
== と === は見た目が似ていますが、動きがかなり違うため、初心者がつまずきやすいポイントになります。

また、比較結果(true/false)は変数に保存できます。

例)
const isPass = score >= 80;
→ scoreが80以上なら isPass は true、そうでなければ false

比較演算子は、値を「Yes/No」に変換してくれる装置だと考えると理解しやすいです。

==(等価演算子)の罠:勝手に型変換してしまう

== は「等しいか?」を調べる演算子ですが、JavaScriptでは比較する前に型を勝手にそろえることがあります。これが暗黙の型変換です。

例)
10 == ’10’ // true

左は数値の10、右は文字列の”10″です。本来は別物ですが、== は

「文字列の”10″を数値の10に変えたら同じだから、等しいことにしよう」

と判断して true を返します。

一見便利に見えます。たとえばフォーム入力は文字列で受け取るので、数値と比較するときに毎回変換しなくても動くからです。

しかし、この“ゆるさ”がバグの原因になります。

例)
let result = true + 1; // 2(trueが1として扱われる)

このように、想定外の型が混ざってもエラーになりにくく、間違いに気づきにくいのが問題です。
ユーザーIDなど「厳密に区別すべき値」で、数値と文字列が混ざっているのに == で通ってしまうと、データ不整合や安全面のリスクにもつながります。

そのため、現代のJavaScript開発では == を積極的に使う場面は少なく、次の === を使うのが基本になっています。

===(厳密等価演算子):値も型も同じときだけ true

=== は「厳密に等しいか?」を調べる演算子です。
最大のポイントは、型変換をしないことです。

例)
10 === ’10’ // false

中身の数字は同じに見えても、型が違うので false になります。
つまり、=== は「値が同じ」だけではなく「型も同じ」ことを要求します。

なぜこれが重要なのかというと、JavaScriptは動的型付けなので、思わぬ型のまま処理が進むことがあるからです。
=== を使っていれば、

「ここは数値が来るはずなのに、文字列が来ている」

という異常に気づきやすくなります。
結果として、コードの安全性(堅牢性)が上がります。

特に混乱しやすい組み合わせは次の通りです。

  • null === undefined // false(== だと true になる)
  • 0 === false // false(== だと true になる)
  • “” === 0 // false(== だと true になる)

=== を使うことで、「意味が違うもの」を明確に区別できます。
正しい条件分岐を作るために、基本は === を選ぶのが鉄則です。

!= と !==:否定の比較も「厳密」を選ぶ

「等しい」があるなら「等しくない」もあります。

  • != (ゆるい不等価:型変換あり)
  • !== (厳密な不等価:型変換なし)

!= は == と同じく、比較前に型変換をします。

例)
10 != ’10’ // false
(型変換して同じと判断されるため)

直感に反しやすく、バグの原因になります。

一方 !== は型変換しません。

例)
10 !== ’10’ // true

「否定(〜ではない)」はそれだけで読み間違えやすいので、暗黙の型変換まで入ると一気に分かりづらくなります。
そのため、不等価の比較でも !== を使うのが安全です。

大小比較(> < >= <=):数値は直感通り、文字列は注意

大小比較は次の演算子を使います。

  • より大きい
  • < より小さい
  • = 以上
  • <= 以下

数値同士なら直感通りです。

  • 10 > 5 → true
  • 10 <= 5 → false
  • 10 >= 10 → true

よくあるのは点数などの判定です。

例)
if (score >= 90) { … }

ただし、文字列の比較は注意が必要です。
文字列は「長さ」ではなく、基本的に辞書順(文字コード順)で比較されます。

例)
“10” < “2” // true
(”1″ が “2” より前に来るため)

また、数値と文字列を比較するとき、JavaScriptは暗黙の型変換をすることがあります。

例)
10 > ‘5’ // true(’5’が数値に変換される)

便利に見えますが、変換できない文字列だと結果が分かりにくくなるため、比較する前に型をそろえる意識が大切です。

論理演算子:条件を組み合わせる(AND: &&)

複数の条件を同時に満たす必要があるときは論理演算子を使います。

&& は「両方 true なら true」です(AND)

  • true && true → true
  • true && false → false
  • false && false → false

例)
x >= 10 && y < 10
→ 「xが10以上」かつ「yが10未満」

ログイン処理のように、

「IDが入力されている」かつ「パスワードが正しい」

のような判定に使われます。

また && にはショートサーキット(短絡評価)があります。
左が false の時点で、右は評価されません。
(左がfalseなら、どう頑張っても全体はtrueにならないため)

この性質は、フレームワークでも「データがあるときだけ表示する」などでよく使われます。

論理和(OR: ||):どちらかが true ならOK+デフォルト値に便利

|| は「どちらかが true なら true」です(OR)

  • true || false → true
  • false || false → false

JavaScriptの || は、true/false を返すだけでなく、「評価結果を決めた値そのもの」を返す特徴があります。
これを使うとデフォルト値(初期値)を簡単に書けます。

例)
let name = inputName || “名無しさん”;

inputName に値が入っていればそれを使い、空文字や null など(Falsy)なら “名無しさん” を使う、という動きです。

!(NOT):真偽の反転と、Boolean化(!!)

! は真偽を反転させます。

  • !true → false
  • !false → true

例)
if (!isLogin) { … }
→ 「ログインしていないなら」の意味

さらに、! は対象の値をいったん true/false に変換してから反転します。
この性質を利用して、!! と2回付けると「Boolean型に変換」できます。

例)

  • !!10 → true
  • !!0 → false
  • !!null → false

「この値が条件式として true 扱いなのか?」を明確にしたいときに便利です。

Truthy / Falsy:true/false じゃないのに条件で判定される

JavaScriptでは、if文などの条件に true/false 以外を入れても判定されます。
このとき「false扱いされる値」が Falsy です。

代表的な Falsy は以下の6つです。

  1. false
  2. 0
  3. “”(空文字)
  4. null
  5. undefined
  6. NaN

それ以外は基本的に Truthy(true扱い)です。

注意したい例)

  • “0”(文字列のゼロ)は Truthy
  • [](空配列)も Truthy
  • {}(空オブジェクト)も Truthy

フォーム入力などは文字列になりやすいので、「0を入力したつもり」が “0” になって条件をすり抜ける、というミスが起こりやすいです。

複雑な条件分岐:優先順位より「カッコ」と「読みやすさ」

実務では条件が複雑になります。

例)
if (user.age >= 18 && (user.hasTicket || user.isMember)) { … }

これは
「18歳以上」かつ「チケットを持っている、または会員」
という意味です。

論理演算子にも優先順位があり(! > && > ||)、慣れないうちはミスのもとです。
そのため、意図を明確にするために ( ) でグループ化するのが推奨されます。

さらに、条件が長くなるなら、変数に分けると読みやすくなります。

例)
const isAdult = user.age >= 18;
const canEnter = user.hasTicket || user.isMember;

if (isAdult && canEnter) { … }

こうするとコードが文章のように読めて、バグにも気づきやすくなります。

まとめ

  • 比較は true/false を作るための基本
  • == や != は暗黙の型変換で事故りやすい
  • 基本は === と !== を使う
  • 論理演算子(&&, ||, !)で条件を組み合わせる
  • 複雑になったら ( ) と変数分割で読みやすくする

厳密比較(===)を基本にしておくと、「JavaScriptのゆるさ」に振り回されにくくなり、意図通りに動くコードを書きやすくなります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次