タイトル: 比較演算子
SEOタイトル: JavaScript 比較演算子 完全ガイド(== / === / != / !== / 大小比較 / 型変換ルール)
| この記事の要点 |
|
JavaScript の比較演算子とは
比較演算子は 2 つの値を比較して true または false を返す演算子です。if 文や三項演算子の条件などで頻繁に使われます。
比較演算子 一覧
| 演算子 | 意味 | 例 (x = 3 のとき) |
|---|---|---|
== | 等価 (型変換あり) | x == "3" → true |
=== | 厳密等価 (型まで比較) | x === "3" → false |
!= | 不等 (型変換あり) | x != "4" → true |
!== | 厳密不等 | x !== "3" → true |
< | より小さい | x < 5 → true |
<= | 以下 | x <= 3 → true |
> | より大きい | x > 1 → true |
>= | 以上 | x >= 3 → true |
基本例
const x = 3;
const y = 3;
console.log(x == y); // true
console.log(x === y); // true
// 大小比較
console.log(x < 5); // true
console.log(x <= 3); // true
console.log(x > 10); // false
// if 文での利用
if (x === 3) {
console.log("x は 3");
}
== と === の違い
JavaScript には等価比較 (==) と厳密等価比較 (===) の 2 種類があります。
| 演算子 | 型変換 | 挙動 |
|---|---|---|
== | あり | 異なる型でも変換して比較 |
=== | なし | 型まで一致しないと false |
console.log(0 == "0"); // true (文字列を数値に変換)
console.log(0 === "0"); // false (型が違う)
console.log(0 == false); // true
console.log(0 === false); // false
console.log(null == undefined); // true (特例)
console.log(null === undefined); // false
console.log("" == 0); // true
console.log("" === 0); // false
// 配列やオブジェクトでも変換が起きる (混乱の原因)
console.log([] == 0); // true
console.log([] == ""); // true
console.log([1] == 1); // true
結論: === と !== を使うのがベストプラクティス。型変換による思わぬバグを防げます。ESLint の eqeqeq ルールでも推奨されています。
== の型変換ルール (参考)
| 左 / 右 | 挙動 |
|---|---|
| 同じ型 | そのまま比較 (=== と同じ) |
null と undefined | true (特例) |
| 数値 と 文字列 | 文字列を数値に変換 |
| 真偽値 | 数値 (true=1, false=0) に変換 |
| オブジェクトと プリミティブ | オブジェクトを valueOf / toString でプリミティブに変換 |
NaN | すべて false |
NaN の比較
NaN は他のどんな値とも (NaN 自身とも) 等しくないという特殊仕様。
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
// 判定は専用関数を使う
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("hello")); // false (型まで見る)
console.log(isNaN("hello")); // true (型変換あり、罠)
// Object.is は NaN を等しいと判定
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(+0, -0)); // false (=== とは違う挙動)
オブジェクトの比較
オブジェクト同士の === は参照が同じかを見ます。中身が同じでも参照が違えば false。
const a = { x: 1 };
const b = { x: 1 };
const c = a;
console.log(a === b); // false (別オブジェクト)
console.log(a === c); // true (同じ参照)
// 中身の比較は手動で
function shallowEqual(o1, o2) {
const k1 = Object.keys(o1);
const k2 = Object.keys(o2);
if (k1.length !== k2.length) return false;
return k1.every(k => o1[k] === o2[k]);
}
console.log(shallowEqual(a, b)); // true
// 深い比較は lodash の _.isEqual や JSON.stringify (制限あり)
JSON.stringify(a) === JSON.stringify(b); // true (キー順依存)
大小比較の詳細
// 数値同士は普通の比較
console.log(3 < 5); // true
// 文字列同士は辞書順 (Unicode コードポイント順)
console.log("apple" < "banana"); // true
console.log("Z" < "a"); // true (大文字は ASCII で小さい)
// 数値と文字列は数値に変換して比較 (NaN 含むと false)
console.log("10" < 20); // true
console.log("foo" < 20); // false (NaN)
console.log("foo" >= 20); // false (NaN)
// 日付の比較
const d1 = new Date("2026-01-01");
const d2 = new Date("2026-12-31");
console.log(d1 < d2); // true (内部で数値変換)
console.log(d1 === d2); // false (オブジェクト参照)
三項演算子との組み合わせ
const age = 20;
const status = age >= 18 ? "成人" : "未成年";
const score = 85;
const grade =
score >= 90 ? "A" :
score >= 80 ? "B" :
score >= 70 ? "C" : "D";
console.log(grade); // B
FAQ
Q: == と === どっちを使う?
A: 原則 ===。== を使うのは value == null で null/undefined を同時にチェックしたいときくらい。
Q: 0 == false が true なのは?
A: == は真偽値を数値に変換するため。false → 0 で 0 == 0 となり true。
Q: 配列やオブジェクトの内容比較は?
A: 標準 API はない。lodash の _.isEqual を使うか、自作する。簡易には JSON.stringify 比較 (キー順依存で完全ではない)。
関連記事
- 論理演算子 (
&&||!) - 算術演算子 / 代入演算子
- 条件演算子 (三項演算子) / Nullish coalescing (
??)