カテゴリ: JavaScript 更新日: 2025/12/06

JavaScriptのisNaN()とNumber.isNaN()の違いを理解しよう

JavaScriptのisNaN()とNumber.isNaN()の違いを理解しよう
JavaScriptのisNaN()とNumber.isNaN()の違いを理解しよう

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで『数値じゃないかどうか』を調べる関数ってありますか?」

先生

「ありますよ!isNaN()という関数があり、さらにNumber.isNaN()という似た関数もあるんです。」

生徒

「えっ? 2つもあるんですか?どう違うんでしょうか?」

先生

「とても混乱しやすいところです。では、この2つの違いを丁寧に見ていきましょう。」

1. NaNとは何かを理解しよう

1. NaNとは何かを理解しよう
1. NaNとは何かを理解しよう

まず、NaN(Not a Number)とは、「数値ではない値」を表す特別な値です。たとえば、文字列を無理やり数値に変換しようとしたときなどに登場します。


console.log(0 / 0);        // NaN
console.log(Number("abc")); // NaN

NaN
NaN

JavaScriptでは「NaN」も数値型(number型)に分類されますが、その値自体は「数値ではない」という非常に不思議な存在です。

しかも、NaN === NaNfalseになります。これは、「NaNは自分自身とも等しくない」というルールがあるためです。


console.log(NaN === NaN); 

false

つまり、「値がNaNかどうか」を判定するには、特別な方法が必要なのです。

2. isNaN()関数とは?

2. isNaN()関数とは?
2. isNaN()関数とは?

isNaN()関数は、与えられた値を一度「数値に変換」してから、その結果がNaNかどうかを判定します。


console.log(isNaN(NaN));       // true
console.log(isNaN("abc"));     // true
console.log(isNaN(123));       // false
console.log(isNaN("123"));     // false

true
true
false
false

ここで注目してほしいのは、"abc"のような文字列もtrueを返す点です。なぜなら、"abc"を数値に変換するとNaNになるからです。

つまり、isNaN()は内部で暗黙的な型変換を行います。そのため、「見た目は文字列でも数値に変換できる場合(例:'123')」はfalseになり、「変換できない場合(例:'abc')」はtrueになります。

3. Number.isNaN()関数とは?

3. Number.isNaN()関数とは?
3. Number.isNaN()関数とは?

Number.isNaN()は、ES6(ECMAScript 2015)で追加された新しい判定方法です。こちらは、型変換を一切行わず、本当に値そのものがNaNであるかどうかだけをチェックします。


console.log(Number.isNaN(NaN));       // true
console.log(Number.isNaN("abc"));     // false
console.log(Number.isNaN(123));       // false
console.log(Number.isNaN("123"));     // false

true
false
false
false

先ほどと違って、"abc"などの文字列はfalseになります。なぜなら、"abc"はNaNという値そのものではないからです。

このように、Number.isNaN()は「厳密なNaN判定」を行うため、安全で信頼性が高い方法です。

4. isNaN()とNumber.isNaN()の違いを比較してみよう

4. isNaN()とNumber.isNaN()の違いを比較してみよう
4. isNaN()とNumber.isNaN()の違いを比較してみよう

2つの関数を並べて比較すると、違いが一目でわかります。

入力値isNaN()Number.isNaN()
NaNtruetrue
"abc"truefalse
"123"falsefalse
123falsefalse
undefinedtruefalse
{}truefalse

isNaN()は型変換を行うため、予想外のtrueが返ることがあります。一方、Number.isNaN()は変換をしないため、意図したとおりの結果になります。

5. 実際の使い方:数値チェックの例

5. 実際の使い方:数値チェックの例
5. 実際の使い方:数値チェックの例

たとえば、ユーザーが入力した値が「数値かどうか」を調べたいときに、この違いが大きく影響します。


let input = "abc";
if (isNaN(input)) {
  console.log("数値ではありません。");
}

数値ではありません。

このように、isNaN()でも文字列を弾くことができます。しかし、場合によっては"123"のような文字列も「数値として扱える」ので、注意が必要です。

より安全に判定したい場合は、まず数値に変換してからNumber.isNaN()でチェックする方法がおすすめです。


let input = "abc";
let value = Number(input);
if (Number.isNaN(value)) {
  console.log("数値変換できません。");
}

数値変換できません。

このように、Number.isNaN()は「変換後にNaNになるケース」を明確に判定できます。

6. どちらを使うべき?初心者へのおすすめ

6. どちらを使うべき?初心者へのおすすめ
6. どちらを使うべき?初心者へのおすすめ

結論として、基本的にはNumber.isNaN()を使うのがおすすめです。なぜなら、isNaN()は内部で自動的に型変換を行うため、思わぬ結果になることがあるからです。

一方、isNaN()は古くからある関数なので、古いコードではよく見かけます。既存のプログラムを読むときには、両者の違いを理解しておくと安心です。

もしあなたがこれから新しいコードを書くなら、次のように考えておきましょう。

  • isNaN() … 古いコードで使われている可能性あり(型変換あり)
  • Number.isNaN() … 新しい書き方、厳密で安全(型変換なし)

この違いを理解しておくことで、将来のエラーを防ぐことができます。

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】