JavaScriptの「===」はなぜ存在する？―型と値の厳密な比較の意味
山崎講師
こんにちは。ゆうせいです。
今回は、JavaScriptを学んでいる人がよくつまずく「===」というちょっと変わった演算子について解説していきます。
「なんで == があるのに、わざわざ === なんてものがあるの？」と疑問に思ったこと、ありませんか？実はこれ、とても大事な理由があるんです。
JavaScriptにおける「==」と「===」の違いとは？
「==」は緩い比較（ゆる～く比べる）
==（二重イコール）は、型が違っても値が同じなら「等しい」とみなす演算子です。
たとえば：
'5' == 5 // true
これは文字列と数値なのに「等しい」と判定されます。
なぜかというと、JavaScriptはこのとき暗黙的な型変換（Type Coercion）を行うからなんです。つまり、「'5' を数値に変換してから比較しよう」と勝手に解釈するのです。
まるで、「テストで90点とった人」と「点数90の紙を見せられた人」を、どちらも「90点の人」と扱ってしまうような感じですね。
「===」は厳密な比較（ぴったり合わないとダメ）
一方で、===（三重イコール）は型も値も完全に一致していないと「等しい」とは認めません。
'5' === 5 // false
この場合は、「文字列」と「数値」で型が違うので、たとえ見た目が同じでもNGになります。
どちらを使うべきか？―メリットとデメリット
== のメリットとデメリット
| 視点 | 内容 |
|---|---|
| メリット | 型が違っても比較できるため、コードが少し柔軟になる |
| デメリット | 想定外の型変換が起きることで、バグの原因になる |
たとえば：
false == 0 // true
null == undefined // true
「え、これが等しいの？」と驚きませんか？
=== のメリットとデメリット
| 視点 | 内容 |
|---|---|
| メリット | 型も一致しているかどうかまで見てくれるので、バグを防ぎやすい |
| デメリット | ある程度、型をきちんと意識しないと使いづらいと感じることもある |
どうしてJavaScriptに両方あるの？
JavaScriptは、元々「簡単に書ける言語」として作られた歴史があります。ですから、**初心者でも扱いやすいように型を自動で変換してくれる「==」**が導入されました。
しかし、後から「この自動変換が原因でバグが増える」と気づかれたため、型まで厳密に比較できる「===」が追加されたのです。
つまり、=== は バグを減らすためのセーフティ機能 なんです。
実際の使用例：こんなときは「===」を使おう
ユーザー入力をチェックする時
const userAge = '20';
if (userAge === 20) {
console.log('成人です');
} else {
console.log('未成年です');
}
これは表示されません。なぜなら、'20'（文字列）と 20（数値）は型が違うからです。
正しく動かすには型も揃える必要があります：
if (Number(userAge) === 20) {
console.log('成人です');
}
数式的に考えてみよう
もし数式で == を表すとしたら、次のように考えられます：
a == bは「型を無視して値だけ比較する」a === bは「型も値も両方比較する」
数式風に書くと：
a == b：型を合わせたa ＝ 型を合わせたba === b：型(a) = 型(b) かつ a = b
例え話で理解する「==」と「===」
「==」は、ある意味「見た目で判断するタイプ」。「あ、見た目が似てるからたぶん同じ人！」という感じです。
「===」は、「名前も誕生日も一致しないと本人とは認めない」みたいな、しっかり者の確認マン。
あなたなら、どちらを信用しますか？
まとめ：原則は「===」を使う！
- 型の違いがバグにつながりやすいため、基本的には
===を使うのがおすすめ ==を使うときは、意図的に型変換が起きることを理解しているときだけ- 実務では
===を使うスタイルが主流！
今後の学習のヒント
次に進むとしたら、以下のテーマもぜひチェックしてみてください！
- JavaScriptの型（プリミティブ型と参照型）とは？
- typeof演算子で型を確認する方法
- nullとundefinedの違い
- 型変換（Type Coercion）の詳しい仕組み
「なぜ？」を大事にしながら、一歩一歩理解を深めていきましょう！それが一番の近道です。
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール