こんにちは!フロントエンドの世界へようこそ。
コードを書いていると、ふとした瞬間に「なんだこれ?」と頭を抱えたくなるような不思議な現象に出会うことがありますよね。その代表格が、今回紹介する「NaN(ナン)」という存在です。
名前からして「Not-a-Number(数じゃないよ)」なんて言われていて、なんだか突き放されているような気分になりますが、大丈夫。実はこれ、JavaScriptという言語の「優しさ」が生んだちょっと不器用なやつなんです。
今日は、この不思議な存在の正体と、正しい付き合い方を紐解いていきましょう。
—
1. 「NaN」ってそもそも何者?
例えば、お買い物で「100円のりんご」を3個買ったとします。合計は300円ですよね。これはコンピュータも計算できます。
では、「りんご」に「3」を掛け算しようとしたらどうなるでしょう?
人間なら「えっ、りんごの数は数値じゃないから計算できないよ!」と突っ込みますが、JavaScriptはエラーで止まるのではなく、こう言います。
「ごめん、計算しようとしたけど、答えが数値にならないよ……(NaN)」
これが `NaN` です。
NaNは、数値型(Number)の仲間なのに「数ではない」という、矛盾を抱えた非常にトリッキーなデータ型なんです。
2. NaNの「困った」性質:自分自身と仲が悪い?
ここが一番の落とし穴なのですが、NaNには「自分自身と一致しない」という、とんでもない性格があります。
通常、プログラミングでは「AとAは同じだよね」と確認しますよね。でも、NaNは違います。
let result = “りんご” 3; // 数値ではない計算を試みる
console.log(result); // コンソールには “NaN” と表示される
console.log(result === NaN); // これを試すと、なんと “false” が返ってくる!
「えっ、NaNなのにNaNとイコールじゃないの!?」と驚きますよね。そうなんです。JavaScriptの世界では、「NaNかどうかを `===` で判定することは不可能」と覚えておいてください。これは初心者が必ず一度は踏む罠です。
3. どうやって正しく「NaN」を見つけるの?
「じゃあ、どうやってこいつがNaNかどうかを確認すればいいの?」という疑問が湧きますよね。ここで登場するのが、JavaScriptが用意してくれた「専用の道具」たちです。
道具その1:`Number.isNaN()`(おすすめ!)
これが一番の正解です。「この値は、間違いなくNaNですか?」とストレートに聞くメソッドです。
let value = “バナナ” / 2;
// Number.isNaN は、値が本当にNaNのときだけ true を返してくれる
if (Number.isNaN(value)) {
console.log(“これは計算できませんでした!”);
}
道具その2:`Object.is()`
これは少し高度ですが、「二つの値が完全に同じかどうか」を厳密にチェックする最強の道具です。NaN同士の比較も、これなら `true` になります。
console.log(Object.is(NaN, NaN)); // true が返る!
—
現場の知恵:昔の `isNaN()` には気をつけて
ネットで検索していると、ただの `isNaN()` という関数も見かけるかもしれません。でも、これには注意が必要です。
昔からある `isNaN()` は、「数字に変換できるか?」までチェックしてしまうおせっかいな機能があります。「10」という文字列を渡すと「あ、これ数字に変換できるからNaNじゃないね(false)」と判断してしまい、予期せぬバグの温床になりがちです。
現場のプロとしてのアドバイスは一つ。「迷ったら `Number.isNaN()` を使え」です。これだけで、多くのトラブルを未然に防げます。
—
まとめ
今日覚えて帰ってほしいのは、この3点だけです。
- NaNは「計算に失敗したよ」というサイン。
- NaNは自分自身(NaN)とも一致しない不思議な奴。
- 判定には必ず `Number.isNaN()` を使うこと。
プログラミングをしていると、うまく動かなくて「自分はダメだ」なんて落ち込むこともあるかもしれません。でも大丈夫、NaNという「数じゃないもの」が混ざってしまうのは、どんなベテランでも経験することです。
「お、NaNが出たな。よし、どこで計算が狂ったか一緒に探そうか」と、肩の力を抜いて付き合ってみてください。その先に、きっと楽しい開発ライフが待っていますよ!
また何か詰まったら、いつでも聞きに来てくださいね。応援しています!

コメント