【実務・中級編】 等価演算子(==)と厳密等価演算子(===) – JavaScript実践ガイド

「==」を使うな。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は柔軟だ」とよく言われるが、その柔軟さは、開発者が制御のハンドルを握っている時にのみ価値を持つ。`==` にハンドルを明け渡して、エンジンの気まぐれな型変換に運命を委ねるようなコードは、プロフェッショナルな仕事ではない。

`===` を使うということは、「自分はこのコードで何を比較しているのか」を言語化していることと同義だ。

コードはコンピュータのためではなく、次にそのコードを読む「自分やチームの仲間」のためにある。誰が見ても迷わない、潔いコードを書くことこそが、中級から上級へステップアップするための第一歩だ。

さあ、今すぐプロジェクト内の `==` を検索し、それを一つずつ `===` に書き換えていこう。それが君のフロントエンドエンジニアとしての、最初の浄化作業になるはずだ。

コメント

タイトルとURLをコピーしました