JavaScriptの世界へようこそ！チーフアーキテクトの私です。
フロントエンドの現場で日々コードを書いていると、避けて通れないのが「データのやり取り」ですよね。APIから取得した数値、ユーザーがフォームに入力した年齢、計算結果……。そんなとき、JavaScriptの「型」や「判定」で頭を悩ませた経験、ありませんか？
「ちゃんと数字を入れたはずなのに、なぜか計算がおかしくなる」
「エラーにならないから、どこがバグなのか見つけにくい……」
そんなJavaScriptの迷宮で、多くの開発者が最初にハマるのが、今回取り上げる「NaN（ナーン）」という存在、そしてその判定方法です。
大丈夫ですよ、安心してください。今日ここで、そのモヤモヤをきれいさっぱり解消しちゃいましょう！
—
1. そもそも「NaN」ってなんだろう？（お買い物のレジに例えてみよう）
JavaScriptにおける `NaN` とは、「Not-a-Number（非数）」 の略です。名前の通り、「これは数字ではありませんよ」というエラー状態を表す特別な値なんですね。
身近な例で考えてみましょう。
近所のスーパーで、りんごの値段（数字）と個数（数字）を掛け算して、合計金額を計算するレジシステムを作るとします。
- 正しいデータ：「100円」×「3個」＝ 300円（数字として計算できる！）
- おかしなデータ：「100円」×「りんご（文字）」＝ ？？？（計算できない！）
この「？？？」になってしまった状態が、JavaScriptでいう `NaN` です。数字として扱えない演算（例えば、文字から文字を引いたり、「文字 × 数字」をしたり）をした結果、JavaScriptが「うわっ、これ計算できないよ！」と音を上げて返すのがこの `NaN` なのです。
ここで一つ、JavaScriptのちょっとユニーク（というか、意地悪な）仕様を教えちゃいましょう。なんと、「NaNは、自分自身を含めて、どんなものとも等しくない」 という性質を持っています。
console.log(NaN === NaN); // ええっ！？ false（等しくない）になる！
自分の鏡写しすら認識できない、ちょっとお騒がせなやつ、それが `NaN` なんです。だからこそ、普通の `===` 演算子で「これってNaNかな？」とチェックすることができないんですね。ここに、判定の難しさがあります。
—
2. 昔からある「グローバルな isNaN()」の落とし穴
「じゃあ、NaNを判定するにはどうすればいいの？」
そう思ってJavaScriptの歴史を振り返ると、昔から用意されていたのが `isNaN()` という関数です。
使い方はシンプルで、カッコの中に調べたい値を入れるだけ。
console.log(isNaN(NaN)); // true (NaNだよ！)
console.log(isNaN(123)); // false (数字だよ)
「お、これでバッチリじゃん！」……と言いたいところなのですが、ここに実務で一番やってしまいがちな罠があります。
この古い `isNaN()` さん、実は「数字じゃないもの（文字列など）を渡されたら、まず自分が頑張って『無理やり数字に変換（暗黙の型変換）』してから判定する」というお節介な性格を持っています。
お買い物の例えで言うと、「りんご」という文字を渡されたときに、「ええっと、これを無理やり無理やり数字に直すと……うーん、やっぱり無理！」というプロセスを踏むんです。そのため、こんな現象が起きます。
// 数字として解釈できる文字
console.log(isNaN(“123”)); // false (おっ、「123」は数字に変換できるからセーフ！)
// 数字として解釈できない文字
console.log(isNaN(“こんにちは”)); // true (「こんにちは」は数字に直せないから NaN 扱い！)
console.log(isNaN(undefined)); // true (undefinedも無理やり変換すると NaN になっちゃう！)
どうでしょう？
私たちが本当に知りたいのは、「純粋にこのデータは `NaN` という値なのかどうか」なのに、古い `isNaN()` は「数字に変換できるかどうか」まで勝手に判定してしまっています。これでは、文字の入力チェックなどをしたいときに、思わぬ誤作動の原因になってしまいますよね。
—
3. 救世主登場！ ES6の「Number.isNaN()」
そんな「昔の `isNaN` じゃ信用できないよ！」という現場の声に応えるべく、モダンなJavaScript（ES6）で登場したのが `Number.isNaN()` です。
この新しい子、本当に優秀で、余計なことは一切しません。「型変換をしない（厳密なチェック）」 という強いポリシーを持っています。
お買い物のレジに例えるなら、古い `isNaN()` が「お客さん、その服、無理やり着たら入るかな……？」とお節介を焼く店員さんだとすれば、`Number.isNaN()` は「お客さん、それ、サイズが書いてあるタグそのものが違います（キリッ）」と正確に一刀両断してくれる優秀な店員さんです。
実際にコードで動きを見比べてみましょう。
// 1. 本物の NaN を渡した場合
console.log(Number.isNaN(NaN)); // true (もちろん正解！)
console.log(isNaN(NaN)); // true (これも正解)
// 2. 「数値ではない文字列」を渡した場合
console.log(Number.isNaN(“こんにちは”)); // false (ここが重要！)
// ↑ 「文字」を渡したのであって、「NaNという特別な値」ではないから false になる！
console.log(isNaN(“こんにちは”)); // true (文字だからという理由でtrueになってしまう)
// 3. 普通の数値を渡した場合
console.log(Number.isNaN(123)); // false (セーフ)
console.log(Number.isNaN(“123”)); // false (型変換しないので、文字列の「123」を渡しても false になる！)
お分かりいただけたでしょうか？
`Number.isNaN()` は、「渡された値が本当に `NaN` であり、かつ、そのデータ型もちゃんと数値（Number型）であるときだけ」 `true` を返してくれます。
これこそが、私たちが実務の現場で求めていた、信頼できる判定手法なのです。
—
4. 実務での使い分けと、明日から使えるベストプラクティス
それでは最後に、実際のWeb制作やアプリケーション開発の現場で、どうコードを書くべきかの指針をお伝えしますね。
結論から言いましょう。
迷ったら、必ず `Number.isNaN()` を使ってください。
フォームの入力値バリデーションや、APIから受け取ったデータの計算前チェックなど、現代のJavaScript開発において、古いグローバルな `isNaN()` をあえて選ぶ理由はほとんどありません。
もし、古いライブラリのコードなどで `isNaN()` を見かけても、「あ、これはお節介な型変換をする方のやつだな」と気づけるようになっていればバッチリです。
実践的な入力チェックのサンプルコード
読者の皆さんがそのままコピーして、ブラウザのコンソールやエディタで試せるサンプルを用意しました。ぜひ動かしてみてください。
/
- ユーザーが入力した値が、安全な数値かどうかをチェックする関数
- @param {any} input ユーザーからの入力値
/
function validateUserInput(input) {
// まず、空文字や null のチェック（実務ではよくあるケース）
if (input === “” || input === null) {
console.log(“値が入力されていません。”);
return;
}
// 文字列として入ってきた数字を、明示的に数値に変換する（Number()を使う）
const numericValue = Number(input);
// Number.isNaN を使って、純粋に計算不能（NaN）になっていないかチェック！
if (Number.isNaN(numericValue)) {
console.error(“【エラー】有効な数値ではありません。「” + input + “」は計算できませんよ！”);
} else {
console.log(“【成功】正しい数値として受け付けました。値は ” + numericValue + ” です。”);
}
}
// — テスト実行してみよう —
validateUserInput(100); // 成功: 有効な数値
validateUserInput(“50”); // 成功: 文字列だけど数値に変換できるのでセーフ
validateUserInput(“りんご”); // エラー: Number(“りんご”) は NaN になるので正しく検知できる！
validateUserInput(NaN); // エラー: 本物の NaN をしっかり検知！
—
まとめ
- `NaN` とは： 計算がうまくいかなかったときに現れる「非数（Not-a-Number）」のデータ。自分自身とも等しくならない厄介者。
- 古い `isNaN()`： 勝手に型変換（お節介）をするので、思わぬバグを生みやすい。
- 新しい `Number.isNaN()`： 型変換をせず、純粋に `NaN` だけを正確に見抜いてくれる。基本はこっちを使おう！
JavaScriptの仕様は時にちょっと気まぐれで、私たちを驚かせますが、一つひとつの理由や背景を知っていくと、とても論理的で愛おしい相棒に見えてきます。
「あ、ここでつまづいちゃったな」と思っても大丈夫。一つずつ、こうして知識をクリアにしていけば、あなたのコードは確実に強くなっていきますよ。
それでは、次回のフロントエンド・アーキテクチャの解説もお楽しみに！快適なJavaScriptライフを！
コメント