「==」を使うな。JavaScriptの等価演算子が引き起こす「負の遺産」と戦うために
現場でコードレビューをしていると、未だに「なぜここで `==` を使ったのか?」と問い詰めたくなるコードに出くわすことがある。
JavaScriptの `==`(等価演算子)は、一見すると寛容で親切なツールに見えるかもしれない。「型が違ってもよしなにやってくれる」というその優しさは、実は「予測不能なバグ」という地雷原への招待状だ。
今日は、なぜ世界中のシニアエンジニアが口を揃えて「`==` を捨てて `===` を使え」と叫ぶのか。その理由を、ブラウザの裏側で起きている泥臭い処理と共に解説しよう。
—
「==」が裏側で行っている「暗黙の型変換」という名の魔術
JavaScriptは動的型付け言語だ。`==` で比較を行う際、エンジン(V8など)は左右の型が異なると、どちらか一方をもう片方の型に合わせようと必死に「型変換」を試みる。これを Abstract Equality Comparison Algorithm と呼ぶ。
この仕様がどれほど厄介か、少しだけ裏側の動きを覗いてみよう。
// 現場で事故る典型例
console.log(0 == ”); // true (数値の0と空文字列が等価?)
console.log(false == ‘0’); // true (真偽値と文字列が等価?)
console.log(null == undefined); // true (これは仕様だが、混乱の元)
/
- なぜこうなるのか?
- 1. 比較対象に文字列や真偽値が混ざると、JSエンジンはそれらを「数値」に変換しようとする。
- 2. Number(”) は 0 になり、Number(false) は 0 になる。
- 3. 結果、意図せぬ一致が生まれる。
/
この「型を変換してまで一致させようとする」仕様は、デバッグ時に我々を地獄に突き落とす。データソースがAPIのレスポンスやローカルストレージから来た場合、型が微妙に揺れることは珍しくない。その時、`==` は平気でバグを隠蔽する。
—
「===」は信頼の証
対して `===`(厳密等価演算子)は、型変換を一切行わない。
「値」だけでなく「型」まで厳密にチェックする。もし型が異なれば、即座に `false` を返す。
実務において、これは「期待値通りの挙動を保証する」ための強力な武器になる。
// 実務で使うべき「厳密な比較」
const userInput = “100”; // APIから文字列として返ってきたと仮定
// 悪い例:== を使うと “100” == 100 が true になり、
// 意図せず処理が進んでしまう可能性がある
if (userInput == 100) {
console.log(“この条件は危険だ”);
}
// 良い例:型まで明確に判定する
// 明示的に型変換を行うことで、コードの意図が明確になる
if (Number(userInput) === 100) {
console.log(“これが正しいアプローチだ”);
}
—
現場で守るべき「3つの鉄則」
現場でフロントエンドのコードを堅牢に保つために、以下のルールをチームの憲法として掲げてほしい。
1. 原則として `==` は禁止する:
ESLintの `eqeqeq` ルールを強制しよう。`==` を使った瞬間にCIで落とす設定にするのが一番の近道だ。
2. `null` のチェックには例外的な配慮を:
`value == null` という書き方だけは、`value === null || value === undefined` の短縮系として許容する文化もある。ただし、これも「明確な意図」がある場合のみだ。
3. 比較の前には「型を揃える」:
`===` を使うと決めたなら、比較対象を自分で事前にキャスト(型変換)する意識を持つこと。それが「JavaScriptを正しく制御している」という感覚につながる。
/
- 実務で使える綺麗な比較のサンプル
/
const responseStatus = “200”; // 文字列で来る可能性がある
// 型をキャストしてから比較する、という「意志」をコードに残す
const isSuccess = Number(responseStatus) === 200;
if (isSuccess) {
console.log(“通信成功”);
} else {
console.log(“エラー発生”);
}
—
最後に:プロフェッショナルであるということ
「JavaScriptは柔軟だ」とよく言われるが、その柔軟さは、開発者が制御のハンドルを握っている時にのみ価値を持つ。`==` にハンドルを明け渡して、エンジンの気まぐれな型変換に運命を委ねるようなコードは、プロフェッショナルな仕事ではない。
`===` を使うということは、「自分はこのコードで何を比較しているのか」を言語化していることと同義だ。
コードはコンピュータのためではなく、次にそのコードを読む「自分やチームの仲間」のためにある。誰が見ても迷わない、潔いコードを書くことこそが、中級から上級へステップアップするための第一歩だ。
さあ、今すぐプロジェクト内の `==` を検索し、それを一つずつ `===` に書き換えていこう。それが君のフロントエンドエンジニアとしての、最初の浄化作業になるはずだ。

コメント