こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。
JavaScriptを触り始めてすぐの頃、画面に表示される数字や文字列を並べて「あれ、これとこれはどっちが大きいんだ？」と比べようとしたとき、なんだか思わぬ結果になって頭を抱えた経験はありませんか？
「えっ、なんでこの文字列が数字より大きい判定になるの！？」なんて夜を過ごした方も、きっと多いはずです。大丈夫ですよ、その泥臭いつまずきは誰もが通る道ですし、JavaScriptという相棒の「ちょっとおせっかいな性格」を知ってしまえば、もう怖いものはありません。
今回は、JavaScriptの比較演算子（ `<` や `>` ）が裏側でやっている「お買い物のときのちょっとしたお節介な計算」について、優しく紐解いていきましょう！
—
1. 比較演算子って、実は「お会計のレジ」みたいなものなんです
私たちが普段使っている `<`（より小さい）や `>`（より大きい）という記号。これらは、JavaScriptくんに「どっちの数字が大きいか教えて！」とお願いする魔法の言葉です。
たとえば、お財布の中に「500円」があって、買いたいお菓子が「300円」だったとします。
`500 > 300` ならば、もちろん「おっ、お財布の中身の方が大きいから買えるね！（`true`）」となりますよね。これは人間にとっても直感的です。
でも、JavaScriptの世界では、ときに「数字じゃないもの（文字列など）」がレジに持ち込まれることがあります。
「りんご」とか「みかん」とか、あるいは「100」という数字に見えるけどクォーテーションで囲まれた文字列とか。
そんなとき、JavaScriptくんはパニックにならず、心の中でこうつぶやきます。
「うーん、そのままじゃ比べられないから、とりあえず両方とも『数字（数値）』に両替しちゃおう！」
この「勝手に数字に両替しちゃうお節介」こそが、JavaScriptの比較における最大のポイントなんです。
—
2. 文字列がレジにやってきた！「暗黙の型変換」の裏側
JavaScriptくんが裏側でこっそり行っている両替のルール、これを専門用語で「暗黙の型変換（強制的にお金の種類を変えられちゃうこと）」と呼びます。
百聞は一見にしかず、実際にコードを書いてその挙動を覗いてみましょう。
// 【実例1】数字の文字列と、本物の数字の比較
console.log(“10” > 5); // 結果は…？ 実は true（本当です！）
// 【裏側のストーリー】
// JavaScriptくん：「おっ、『10』っていう文字列くんが来たぞ。でも比べる相手は数字の5だ。
// じゃあ公平にするために、文字列の『10』を、数字の 10 に両替しちゃおっと！」
// 結果： 10 > 5 になり、もちろん 「true（正しい）」 になります。
おぉ、これならまだ「文字列の見た目が数字だから、気を利かせてくれたんだな」と納得がいきますよね。
では、次のようなケースはどうでしょう？ ここからがちょっと泥臭くて面白いところです。
// 【実例2】まったく数字に見えない文字の比較
console.log(“apple” > 3); // 結果は…？ 実は false（あれっ？）
// 【裏側のストーリー】
// JavaScriptくん：「うわっ、『apple』って文字が来たぞ！ これをどうやって数字に両替すればいいんだ……？
// ……うーん、困ったから、とりあえず『NaN（ナン / Not-a-Number＝数字じゃないよ！）』っていう特殊なエラー札に替えちゃえ！」
// 結果： apple は NaN になり、 NaN > 3 という比較になり……結果は false になります。
ここで登場した `NaN` こそが、今回の冒険のボスキャラクターです。
—
3. 最強のトラブルメーカー「NaN」の正体を知ろう
`NaN` とは、「Not-a-Number」の略で、日本語に訳すなら「数字になれなかった悲しきモンスター」です。
この `NaN` が比較演算子の世界に紛れ込むと、JavaScriptくんは一気にポンコツになってしまいます。なぜなら、`NaN` が絡む大小比較は、相手が誰であれ、絶対にすべて「`false`（嘘・間違い）」になってしまうという残酷なルールがあるからです。
// NaN が絡んだときの悲劇を見てみましょう
console.log(NaN > 5); // false （5より大きくない）
console.log(NaN < 5); // false （5より小さくない）
console.log(NaN === 5); // false （そもそも等しくもない。自分自身である NaN と比べても false になります！）
「えっ、じゃあどうやって `NaN` かどうか見分ければいいの！？」って思いますよね。
大丈夫です、そんなときは JavaScript に標準で用意されている救世主、`Number.isNaN()` 関数を使いましょう。
// 安全な NaN の見つけ方
const 謎の入力 = "apple";
const 変換された数字 = Number(謎の入力);
if (Number.isNaN(変換された数字)) {
console.log("おっと！それは数字に変換できない文字ですよ！");
}
実務の現場でも、ユーザーが入力フォームに「あいうえお」と打ち込んだのに、プログラム側でそのまま計算や大小比較を走らせてしまい、予期せぬバグを生む……というのは本当によくある失敗談です。だからこそ、数字に変換する処理（バリデーション）は、Web制作における命綱なんです。
---
4. チーフアーキテクトからの実務アドバイス
最後に、現場で明日から使えるちょっとした知見をシェアしますね。
JavaScriptの `<` や `>` は、親切心から勝手に型を変換してくれますが、この「勝手にやってくれる」という仕様（暗黙の型変換）は、コードが大きくなったときに「あれ、なんでここでエラーになるんだ？」というバグの温床になりがちです。
だからこそ、私たちプロの現場では、次のような心がけを大切にしています。
1. 比較する前に、あらかじめ自分で明示的に数字に変換しておく
（`Number()` や `parseInt()` を使って、あらかじめ「これは数字だよ！」と綺麗に整えてからレジに並ばせる）
2. `NaN` が混ざる可能性を常に疑う
（ユーザーの入力値や、外部のAPIから飛んできたデータは「信用するな、検証しろ」の精神で！）
JavaScriptは、私たちがちょっとしたコツ（仕組み）さえ掴んであげれば、とっても素直で頼りになる相棒です。
「あ、今裏側で勝手に両替してるな？」と頭の中でイメージできるようになれば、もうあなたも立派なフロントエンド・エンジニアの仲間入りですよ。
今日の学びが、あなたの毎日のコード書きを少しでも楽しく、ワクワクするものに変えられますように。
それでは、また次の現場でお会いしましょう！
コメント