比較演算子を一言でいうと
比較演算子は、
「2つの値を比べて、その結果を true / false（真偽値）で返すための記号」 です。
JavaScript でよく使うのは主にこのあたりです。
> より大きい< より小さい>= 以上<= 以下== 等しい（ゆるい比較）=== 厳密に等しい（おすすめ）
ここが重要です。
特に == と === の違い は、JavaScript でバグを生む定番ポイントです。
「基本的には === を使う」が鉄則だと思ってください。
大小を比べる演算子（> < >= <=）
数値同士の比較
まずは一番わかりやすい「数値の大小」から。
console.log(5 > 3); // true
console.log(5 < 3); // false
console.log(5 >= 5); // true
console.log(5 <= 5); // true
console.log(5 <= 4); // false
結果はすべて true か false です。
これが if 文や while 文の条件式として使われます。
const age = 20;
if (age >= 18) {
console.log("成人です");
} else {
console.log("未成年です");
}
文字列同士の比較（辞書順）
文字列も > < で比べることができます。
「辞書順（アルファベット順）」で比較されます。
console.log("apple" < "banana"); // true
console.log("cat" > "banana"); // true
比較は左から 1 文字ずつ、
文字コード（Unicode）で行われます。
大文字・小文字も区別されるため、
console.log("a" < "B"); // false（"a" のほうがコード的には大きい）
のような結果になり、「人間の感覚」と少しズレることがあります。
ここが重要です。
文字列比較で > < を使うときは、
「辞書順」「大文字小文字を区別する」 という前提を意識してください。
人間の感覚で「どっちが大きい」ではなく、あくまで「文字コード順」です。
等しい・等しくない：== と === の違い
==（ゆるい等価）とは何か
== は「ゆるい等価（抽象的等価）」で、
比較の前に、内部で“型の変換（暗黙の型変換）”を行います。
console.log(5 == 5); // true（同じ数）
console.log(5 == "5"); // true（文字列 "5" を数値 5 に変換してから比較）
console.log(0 == false); // true（false を 0 とみなす）
console.log("" == 0); // true（"" を 0 とみなす）
console.log(null == undefined); // true（特別ルール）
「なんとなくイコールっぽい」ところまで true にしてしまう、
かなり“お節介な” 演算子です。
===（厳密等価）は「型も値も両方同じか」を見る
=== は「厳密等価（strict equal）」で、
型も値も一致したときだけ true になります。
内部で勝手に型変換をしません。
console.log(5 === 5); // true
console.log(5 === "5"); // false（型が違う）
console.log(0 === false); // false
console.log("" === 0); // false
console.log(null === undefined); // false
「数値の 5」と「文字列の “5”」をきちんと区別してくれるので、
人間の感覚に近い比較になります。
!= と !== の関係
「等しくない」の比較も同じ関係です。
!= は == の逆（ゆるい比較で違う）!== は === の逆（厳密に違う）
console.log(5 != "5"); // false（== だと同じとみなされるので）
console.log(5 !== "5"); // true（型が違うので違う）
どちらを使うべきか
基本的に、
==/!=は使わない===/!==を使う
と決めてしまって構いません。
どうしても == が必要なケースはありますが、
初心者〜中級くらいまでは、
「== を使うときは本当に必要か 3 回自問する」くらいでちょうどいいです。
ここが重要です。== は「勝手に型変換する」ため、
“意図していない true / false” を返してバグの原因になります。=== は「素直に型も値も比べてくれるだけ」なので、ほぼ常に === を選ぶほうが安全です。
== の「危ない例」を体感する
0, “”, false, null, undefined まわり
次の結果が全部 true になることがあります。
console.log(0 == "0"); // true
console.log(0 == ""); // true
console.log(0 == false); // true
console.log("" == false); // true
console.log(null == undefined); // true
「空文字」と「0」が == だと等しい、false も色々と 0 っぽく扱われる、
これが非常にややこしい。
もしユーザー入力で、
const input = ""; // 未入力
として、こんなコードを書いたとします。
if (input == 0) {
console.log("0 が入力されたとみなす");
}
input が空文字でも、
この if が通ってしまいます。
NaN だけは別格（== でも === でも自分と等しくない）
NaN（Not a Number）は、
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
という特殊な値です。
これは比較演算子の話というより、NaN の性質ですが、
「== と === を使い分ければ NaN に対応できる」という話ではないので、
NaN かどうかを調べるには Number.isNaN(value) を使います。
ここが重要です。== は「なんでもかんでもいい感じに揃えてくれる」わけではなく、
“やたらと気まぐれなルールが詰め込まれた演算子” だと思ってください。
この気まぐれを完全に把握するのは大変なので、
基本的に === に寄せておくのが現実的な戦略です。
条件分岐で比較演算子をどう使うか
if 文での典型的な使い方
const score = 80;
if (score >= 90) {
console.log("A 評価");
} else if (score >= 70) {
console.log("B 評価");
} else {
console.log("C 評価");
}
ここでは >= を使って、
「90 以上なら A」「70 以上なら B」といった条件を作っています。
値の一致チェックでは必ず === を使う
たとえば、ログインフォームでメールアドレスをチェックする場合。
const inputEmail = "user@example.com";
const registeredEmail = "user@example.com";
if (inputEmail === registeredEmail) {
console.log("メールアドレスが一致しました");
}
== で書く必要は一切ありません。
文字列同士は「型が同じ」なので、=== でも == でも結果は同じですが、
「比較は ===」と決めておけば、
数値や真偽値でも同じスタイルで書けます。
「null か undefined なら」のチェックだけは == が有効なことも
null と undefined に限って、== には便利な特性があります。
const value = null;
if (value == null) {
console.log("value は null か undefined のどちらかです");
}
value が null でも undefined でも true になります。
この「null と undefined をまとめて扱う」という用途に限っては、== null を使うスタイルもあります。
とはいえ、初心者のうちはあまり使わず、
素直に
if (value === null || value === undefined) { ... }
と書いておいても問題ありません。
ここが重要です。
if の条件を書くときは、
「何を比べているのか」「どの値なら true にしたいのか」を
日本語で説明できるレベルまで噛み砕いてから、演算子を選ぶ習慣をつけてください。
それが自然と === 中心の、読みやすい条件式につながります。
比較演算子と「評価順」について少しだけ
比較は左から順に評価される
console.log(1 < 2 < 3); // ?
これを「1 < 2 で true、その true が 3 より小さいか？」
という順で評価します。
実際には、
1 < 2 // true
true < 3 // true が 1 に変換される → 1 < 3 → true
となるので、true です。
「1 < 2 < 3 だから true でしょ？」という直感とたまたま一致しますが、
意図して書くべきコードではありません。
逆に、
console.log(3 > 2 > 1); // ?
これは
3 > 2 // true
true > 1 // true → 1, 1 > 1 → false
となるので false です。
ここが重要です。
比較を連鎖させた書き方（1 < x < 10 など）は、
JavaScript では「数学の不等式」と同じ意味にはなりません。
必ず 1 < x && x < 10 のように、
比較を分けて論理演算子でつなぐようにしてください。
初心者として比較演算子で本当に押さえてほしいこと
> < >= <= は、数値や文字列の大小を比べて true / false を返す。
文字列の比較は「辞書順」「大文字小文字を区別する」なので、人間感覚とズレることもある。
== は「型を勝手に変換してから比べる」ゆるい等価。=== は「型も値も同じかどうか」を見る厳密等価。
基本的には === / !== を使い、== / != は原則封印してよい。
0 "" false null undefined まわりの == の挙動は特に危険。
「比較でおかしなことが起きたら、まず == を使ってないか疑う」くらいの意識を持つ。
NaN は == でも === でも自分と等しくならないので、
NaN 判定は Number.isNaN で行う。
ここが重要です。
比較演算子は if・while・三項演算子など、
あらゆる「条件付きの処理」の土台になります。
“どの値とどの値を、どの演算子で比べているのか” を意識して、
特に === を基本形にする習慣をつけると、
JavaScript らしい「型変換の罠」をかなり避けられるようになります。
最後に、小さな練習を一つ置いておきます。
以下の結果を、自分で予想してから実行してみてください。
console.log(5 == "5");
console.log(5 === "5");
console.log(0 == false);
console.log(0 === false);
console.log("" == 0);
console.log("" === 0);
console.log(null == undefined);
console.log(null === undefined);
const x = 7;
console.log(1 < x && x < 10); // これはどういう意味か？
予想と実際の結果のズレを観察することで、
「JavaScript の比較がどこで直感とズレるか」が、かなりクリアに見えてくるはずです。
