実務型コーディング演習 / 約15分

バグ修正③: 比較演算子の誤用（=== vs ==）

なぜこれを学ぶか

`==`（緩い等値比較）と `===`（厳密等値比較）の違いは、JavaScriptの有名な落とし穴です。型変換が暗黙に起きる `==` は、予測不能な動作の温床です。

==（緩い等値比較）は、型が違っても自動的に型変換してから比較します。例えば 0 == false は true、"1" == 1 も true です。

===（厳密等値比較）は、型も値も同じ場合のみ true です。0 === false は false、"1" === 1 も false。これが推奨されます。

よくある落とし穴: ユーザー入力やAPIレスポンスは文字列になりがちです。input.value は常に文字列なので、input.value == 0 は予想外の動作をすることがあります。

JavaScriptでは === と !== を常に使う ことがベストプラクティスです。== を使う理由はほぼありません。ESLintルールの eqeqeq も同様のルールです。

重要ポイント

===（厳密比較）を常に使う。== は型変換が起きて予測不能
"1" == 1 は true だが "1" === 1 は false
ユーザー入力は常に文字列。数値比較前に Number() や parseInt() で変換

理解度チェック

選ぶと即座に解説が表示されます。

`"0" == false` の結果は？

ヒントを見る

`==` は型変換を行います。`"0"` → 数値 → `false` への変換が起きます。

コーディング演習実際に書く

以下の `checkStatus` 関数には比較演算子のバグがあります。`status` が文字列 `"1"` のとき active、`"0"` のとき inactive、それ以外は unknown を返すよう正しく修正してください。

function checkStatus(status)

模範解答（読んで理解したら、自力で書き直してみましょう）

function checkStatus(status) {
  // 修正: == → === に変更。型変換が起きず、文字列だけに一致する
  if (status === '1') {
    return 'active'
  } else if (status === '0') {
    return 'inactive'
  } else {
    return 'unknown'
  }
}

スキルセルフチェック

このレッスンの内容をどの程度理解できましたか？

弱点マップで全体を確認する

前のレッスン次のレッスン