JavaScript | 基礎構文：数値・演算 – isNaN

JavaScript JavaScript
2025.12.12
スポンサーリンク

isNaN を一言でいうと

isNaN は、
「その値を数値として扱えるか？　扱えないか？」をざっくり判定するための関数 です。

isNaN(値) が
true → 数値として扱えない（＝NaN 相当）
false → 数値として扱える（＝NaN ではない）

という意味になります。

ここが重要です。
isNaN は「その値そのものが NaN か？」ではなく、
「数値に変換してみた結果、NaN になるか？」を見ています。
この「変換してから判定」という動きをちゃんと理解しておくことが、とても大事です。

isNaN の基本的な動き

まずは直感に近いところから

単純な数値に対しては、素直に動きます。

console.log(isNaN(123));   // false（ちゃんとした数）
console.log(isNaN(-5));    // false
console.log(isNaN(3.14));  // false
console.log(isNaN(NaN));   // true（NaN そのもの）
JavaScript

数値として問題ないものには false。
NaN には true です。

ここまでは分かりやすいのですが、
isNaN が本領を発揮するのは「数値以外」を渡したときです。

数字っぽい文字列と、そうでない文字列

console.log(isNaN("123"));   // false
console.log(isNaN("3.14"));  // false
console.log(isNaN("abc"));   // true
console.log(isNaN("10px"));  // true
JavaScript

"123" や "3.14" は、Number に変換可能（数値として扱える）なので false。
"abc" や "10px" は、Number に変換できないので true です。

これは、isNaN の内部で
「Number(値) を計算して、その結果が NaN かどうか」
を見ているからです。

ここが重要です。
isNaN は「数値に変換できるかどうか」のチェック。
文字列であっても、数値に変換できるなら false、できなければ true。
「型」ではなく「変換結果」を見ている、という感覚を持ってください。

isNaN のクセ：思ったより「true」になりやすい

いろいろな値に対しての結果を見てみる

console.log(isNaN(""));         // false（空文字 → Number("") は 0）
console.log(isNaN(" "));        // false（空白 → 0）
console.log(isNaN(true));       // false（true → 1）
console.log(isNaN(false));      // false（false → 0）
console.log(isNaN(null));       // false（null → 0）
console.log(isNaN(undefined));  // true（undefined → NaN）
console.log(isNaN([]));         // false（[] → 0）
console.log(isNaN({}));         // true（{} → NaN）
JavaScript

「え、これも数値扱いになるの？」というものが、false を返したりします。

例えば、
空文字 "" や空白 " " は Number にすると 0。
true は 1、false や null は 0。
空配列 [] も 0 に変換されます。

その結果、
「一見数値とは思えない値」が isNaN では false になってしまうことがあります。

ここが重要です。
isNaN は「数値っぽさチェック」としては便利ですが、
JavaScript 特有の「暗黙の型変換」の影響を強く受けます。
そのため、厳密に NaN だけをチェックしたい場面には向きません。

NaN そのものをチェックしたいときは Number.isNaN

Number.isNaN の違い

Number.isNaN(value) は、
「value が“型として number で、中身が NaN である場合だけ true」 を返します。

比較すると、違いがよく見えます。

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

console.log(isNaN(NaN));             // true
console.log(Number.isNaN(NaN));      // true

console.log(isNaN(undefined));       // true
console.log(Number.isNaN(undefined)); // false

console.log(isNaN("123"));           // false
console.log(Number.isNaN("123"));    // false
JavaScript

Number.isNaN は、
「勝手に数値変換」したりせず、
その値が本当に NaN かどうかだけを、純粋にチェック します。

このため、
「既に number 型として扱っている値が NaN になってないか？」を確認する用途には、
Number.isNaN のほうが圧倒的に安全です。

ここが重要です。
実務的には、
「NaN そのものをチェックしたい」＝ Number.isNaN
「“数値にできるかどうか”をざっくりチェックしたい」＝ isNaN
と使い分ける、という整理にしておくと混乱しません。

実用シーン①：ユーザー入力が「数値として意味があるか」をざっくり調べる

テキスト入力を数値として扱いたい場合

ユーザーがフォームに入力した値は、最初は必ず文字列です。

たとえば、年齢を入力してもらう場合。

const input = "20"; // フォームから来た文字列だと思ってください

if (isNaN(input)) {
  console.log("数値として不正な入力です");
} else {
  console.log("数値として扱えます");
}
JavaScript

"20" は数値に変換できるので isNaN("20") は false。
"abc" や "20歳" なら true になります。

ただし、このままだと " "（空白）や ""（空文字）も数値 0 として通ってしまうので、
現実にはもう少し厳しくチェックします。

const input = "   "; // 空白だけの想定

if (input.trim() === "" || isNaN(input)) {
  console.log("実質的に数値とは言えない入力です");
} else {
  const num = Number(input);
  console.log("数値として受け付けました:", num);
}
JavaScript

ここがポイントです。
isNaN だけに丸投げせず、
「空文字・空白だけ」を先に弾いた上で
「残ったものが数値に変換できるか」を isNaN で見る
という組み合わせにすると、入力チェックとして使いやすくなります。

実用シーン②：Number に変換した結果が NaN かどうか確認する

変換タイミングで Number.isNaN を使う

次のようなコードを書いたとします。

const input = "abc";
const num = Number(input); // NaN

console.log(num * 2); // NaN（以降の計算が全部 NaN）
JavaScript

この場合、「変換した直後」にチェックするのがベストです。

const input = "abc";
const num = Number(input);

if (Number.isNaN(num)) {
  console.log("数値変換に失敗しました");
} else {
  console.log(num * 2);
}
JavaScript

こうしておけば、
「NaN が後ろの計算に流れ込んで、突然結果が全部 NaN」という事故を防げます。

ここが重要です。
「文字列 → 数値」の変換は、“入口”ですべて決着をつける。
その入口で Number.isNaN を使って NG を弾いておけば、
後ろのロジックは「ちゃんとした number だけが入ってくる」前提で書けるようになります。

isNaN に関するよくある勘違いと落とし穴

勘違い①：NaN かどうかを value === NaN で判定できると思ってしまう

これは完全に罠です。

console.log(NaN === NaN); // false
console.log(NaN == NaN);  // false
JavaScript

NaN は「自分自身とすら等しくない」ので、
=== NaN では絶対に true になりません。

NaN チェックをしたいときは、必ず
Number.isNaN(value) を使います。

勘違い②：isNaN は「NaN だけ」に true を返すと思い込む

さきほど見た通り、isNaN は

isNaN("abc");    // true
isNaN(undefined); // true
isNaN({});       // true
JavaScript

のように、「数値に変換できないもの全般」に true を返します。

「NaN そのものを判定する関数」ではない
ということを忘れずに。

ここが重要です。
isNaN は「雑に数値チェックしたいときのフィルタ」に近いものであって、
「NaN をピンポイントに見つける検査キット」ではありません。
NaN のピンポイント検出には常に Number.isNaN を選ぶクセをつけてください。

isNaN を使うときのおすすめスタイル

入力チェックの「前処理＋isNaN」セット

ユーザー入力に対しては、だいたいこんな流れが安定します。

  1. trim() して前後の空白を削る
  2. 空文字かどうかをチェック
  3. それでも値が残っているなら、isNaN で数値化チェック
  4. 問題なければ Number で数値に変換して使う

コード例はこうなります。

function parseUserNumber(raw) {
  const s = raw.trim();

  if (s === "") {
    return { ok: false, reason: "空文字" };
  }

  if (isNaN(s)) {
    return { ok: false, reason: "数値に変換できない" };
  }

  return { ok: true, value: Number(s) };
}

console.log(parseUserNumber(" 123 "));  // ok: true, value: 123
console.log(parseUserNumber(" abc "));  // ok: false, reason: "数値に変換できない"
console.log(parseUserNumber("   "));    // ok: false, reason: "空文字"
JavaScript

ここが重要です。
isNaN は、単体で「正しいかどうか」を決めるのではなく、
trim や空文字チェックと組み合わせて使うことで、
「人間が期待する意味での“数値入力”」を判断する道具になります。

初心者として isNaN で本当に押さえておきたいポイント

isNaN(value) は、「value を数値に変換してみて NaN になるか？」を見ている。
数値に変換できないもの全般に true を返す。

「NaN そのもの」をチェックしたいときは
Number.isNaN(value) を使うべき。
value === NaN では判定できない。

ユーザー入力のような「最初は文字列」の値に対して、
数字として扱えるかどうかをざっくり調べるには isNaN が便利。
ただし、空文字や空白などは別途チェックしてから使うとよい。

ここが重要です。
「NaN 判定」なのか「数値として妥当か判定」なのか、自分が何をしたいのかを毎回はっきりさせること。
前者なら Number.isNaN、後者なら isNaN（＋前処理）という選び方ができるようになると、
NaN や型変換まわりのバグに振り回されにくくなります。

最後に、isNaN と Number.isNaN の違いを体感する小さな練習を置いておきます。

const values = [
  123,
  "123",
  "123abc",
  "",
  " ",
  true,
  false,
  null,
  undefined,
  NaN,
  {},
  [],
];

for (const v of values) {
  console.log(
    "value:", JSON.stringify(v),
    "| isNaN:", isNaN(v),
    "| Number.isNaN:", Number.isNaN(v)
  );
}
JavaScript

実行してみて、「自分の感覚」と「実際の結果」のズレを観察してみてください。
そのズレこそが、JavaScript の isNaN と Number.isNaN を使い分けるときに、あなたを守ってくれる大事な感覚になります。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました