JavaScriptでNaNを徹底解説！10の使い方＆対処法

●NaNとは？
- ○NaNが生じる原因とは？
- ○サンプルコード1：型の自動変換によるNaN
●JavaScriptにおけるNaNの検出方法
●実践！NaNを避けるプログラミング技術
●よくあるエラーと対処法
●NaNの応用例とサンプルコード
まとめ

●NaNとは？

プログラミングをしていると、時折「NaN」という見慣れない値に遭遇することがあります。

NaNとは一体何なのでしょうか？

NaNは「Not-a-Number」の略で、数値ではないことを表す特殊な値です。

JavaScriptをはじめとする多くのプログラミング言語で使用されており、数値として表現できない計算結果や不適切な数値変換が行われた場合に現れます。

例えば、数値と文字列の割り算を行った場合、結果はNaNになります。

console.log(10 / "hello"); // 出力: NaN

このように、数値として解釈できない計算や変換が行われるとNaNが発生するのです。

○NaNが生じる原因とは？

NaNが生じる主な原因は次の3つです。

数値として解釈できない計算を行った場合
例 -> 数値と文字列の割り算、ルートに負の数を指定した場合など
文字列を数値に変換しようとしたが、変換できなかった場合
例 -> parseInt(“hello”) のように、数値として解釈できない文字列を変換しようとした場合
未定義の数学的操作を行った場合
例 -> 0を0で割る、無限大から無限大を引くなど

これらのケースでNaNが発生します。

NaNは数値ではないため、通常の数値として扱うことができません。

そのため、NaNが現れた場合は適切な処理を行う必要があります。

○サンプルコード1：型の自動変換によるNaN

JavaScriptでは、異なる型の値を操作すると自動的に型変換が行われます。

この自動変換によってNaNが発生することがあります。

const result1 = 100 - "10";   // 数値 - 文字列 => 90 (文字列が数値に変換される)
const result2 = 100 - "hello"; // 数値 - 文字列 => NaN (文字列が数値に変換できない)

console.log(result1);  // 出力: 90
console.log(result2);  // 出力: NaN

上記のコードでは、数値から文字列を減算しています。

result1の場合、文字列 “10” が数値に変換されるため、正常に計算が行われ、結果は90になります。

しかし、result2の場合、文字列 “hello” は数値に変換できないため、結果はNaNになってしまいます。

●JavaScriptにおけるNaNの検出方法

さて、NaNの基本的な概念と発生原因について理解が深まったところで、次はNaNをどのように検出するかについて見ていきましょう。

JavaScriptには、NaNを判定するための便利な方法がいくつか用意されています。

○isNaN関数の使い方

JavaScriptでNaNを検出する最も一般的な方法は、isNaN関数を使用することです。

isNaN関数は、引数が数値であるかどうかを判定し、数値でない場合にtrueを返します。

const value1 = 100;
const value2 = "hello";
const value3 = NaN;

console.log(isNaN(value1)); // 出力: false
console.log(isNaN(value2)); // 出力: true
console.log(isNaN(value3)); // 出力: true

上記の例では、value1は数値なのでisNaN(value1)はfalseを返し、value2は文字列なのでisNaN(value2)はtrueを返します。

また、value3はNaNなので、isNaN(value3)もtrueを返します。

○サンプルコード2：isNaNを使ったNaNのチェック

それでは、実際にisNaN関数を使ってNaNをチェックするサンプルコードを見てみましょう。

function calculateAverage(a, b) {
  const result = (a + b) / 2;

  if (isNaN(result)) {
    console.log("計算結果がNaNになりました。");
  } else {
    console.log("平均値は " + result + " です。");
  }
}

calculateAverage(10, 20);  // 出力: 平均値は 15 です。
calculateAverage(10, "hello");  // 出力: 計算結果がNaNになりました。

上記のコードでは、calculateAverage関数で2つの引数の平均値を計算しています。

計算結果をisNaN関数でチェックし、NaNの場合はエラーメッセージを表示し、そうでない場合は平均値を表示します。

calculateAverage(10, 20)を呼び出すと、計算結果は数値なので「平均値は 15 です。」と表示されます。

一方、calculateAverage(10, “hello”)を呼び出すと、計算結果はNaNになるため、「計算結果がNaNになりました。」というエラーメッセージが表示されます。

このように、isNaN関数を使えば、簡単にNaNをチェックすることができます。

○サンプルコード3：条件演算子を使用したNaNの判定

isNaN関数を使う以外にも、条件演算子を使ってNaNを判定する方法があります。

条件演算子は、条件式の結果に基づいて値を返す演算子です。

function checkNaN(value) {
  return value !== value ? "NaNです" : "NaNではありません";
}

console.log(checkNaN(100));  // 出力: NaNではありません
console.log(checkNaN("hello"));  // 出力: NaNではありません
console.log(checkNaN(NaN));  // 出力: NaNです

上記のコードでは、checkNaN関数で引数がNaNかどうかを判定しています。条件演算子value !== valueを使っています。

これは、NaNは自分自身と等しくないという特性を利用しています。

valueがNaNの場合、value !== valueはtrueになり、”NaNです”が返されます。そうでない場合は、”NaNではありません”が返されます。

checkNaN(100)とcheckNaN(“hello”)を呼び出すと、引数はNaNではないため、”NaNではありません”が出力されます。

一方、checkNaN(NaN)を呼び出すと、引数はNaNなので、”NaNです”が出力されます。

○Number.isNaNとの違い

JavaScriptには、isNaN関数とよく似た Number.isNaN メソッドがあります。

両者の違いは、引数のチェック方法にあります。

isNaN関数は、引数を数値に変換してからNaNかどうかを判定します。

そのため、文字列や undefined なども数値に変換され、NaNと判定されます。

一方、Number.isNaNメソッドは、引数が厳密にNaNであるかどうかを判定します。

引数がNaNの場合にのみtrueを返し、それ以外の値の場合はfalseを返します。

const value1 = NaN;
const value2 = "NaN";
const value3 = undefined;

console.log(isNaN(value1)); // 出力: true
console.log(isNaN(value2)); // 出力: true
console.log(isNaN(value3)); // 出力: true

console.log(Number.isNaN(value1)); // 出力: true
console.log(Number.isNaN(value2)); // 出力: false
console.log(Number.isNaN(value3)); // 出力: false

上記の例では、isNaN関数は value1、value2、value3 のすべてに対してtrueを返しています。

これは、文字列 “NaN” や undefined も数値に変換されるためです。

対照的に、Number.isNaNメソッドは、value1に対してのみtrueを返し、value2とvalue3に対してはfalseを返しています。

これは、Number.isNaNメソッドが引数の型を厳密にチェックし、NaNのみを判定するためです。

●実践！NaNを避けるプログラミング技術

NaNの検出方法について理解が深まったところで、いよいよNaNを避けるためのプログラミングテクニックを見ていきましょう。

日常のコーディングの中でNaNによるエラーを最小限に抑えるには、いくつかの実践的なアプローチが有効です。

○サンプルコード4：安全な数値変換のテクニック

NaNが発生する主な原因の1つは、文字列から数値への変換が失敗することです。

この問題を回避するために、安全な数値変換のテクニックを使うことが重要です。

function safeParseFloat(str) {
  const parsed = parseFloat(str);
  return isNaN(parsed) ? 0 : parsed;
}

console.log(safeParseFloat("10.5"));  // 出力: 10.5
console.log(safeParseFloat("hello"));  // 出力: 0

上記のコードでは、safeParseFloat関数を定義しています。

この関数はparseFloat関数を使って文字列を浮動小数点数に変換しますが、変換に失敗した場合はデフォルト値の0を返します。

safeParseFloat(“10.5”)を呼び出すと、文字列 “10.5” が正常に数値に変換されるので、10.5が返されます。

一方、safeParseFloat(“hello”)を呼び出すと、文字列 “hello” は数値に変換できないためNaNになりますが、関数内でisNaNでチェックしているので、デフォルト値の0が返されます。

このように、数値変換が失敗した場合にデフォルト値を返すことで、NaNによるエラーを防ぐことができます。

状況に応じて適切なデフォルト値を設定することが大切ですね。

○サンプルコード5：エラーハンドリングを使ったアプローチ

NaNが発生する可能性がある箇所では、try…catch文を使ったエラーハンドリングを行うことで、エラーを適切に処理できます。

function calculateRatio(a, b) {
  try {
    if (isNaN(a) || isNaN(b)) {
      throw new Error("Invalid input");
    }
    return a / b;
  } catch (error) {
    console.error("Error:", error.message);
    return null;
  }
}

console.log(calculateRatio(10, 5));  // 出力: 2
console.log(calculateRatio(10, "hello"));  // 出力: Error: Invalid input, null

上記のコードでは、calculateRatio関数で2つの数値の比率を計算しています。

関数内ではまず、isNaNを使って引数がNaNかどうかをチェックし、NaNの場合はエラーをthrowしています。

try…catch文を使って、エラーが発生した場合はcatch節でエラーメッセージを出力し、nullを返しています。

これにより、NaNによるエラーを適切にハンドリングし、予期しない動作を防ぐことができます。

calculateRatio(10, 5)を呼び出すと、両方の引数が数値なので、正常に計算が行われ、2が返されます。

一方、calculateRatio(10, “hello”)を呼び出すと、第2引数が文字列なのでNaNになり、エラーがthrowされます。

catch節でエラーメッセージが出力され、nullが返されます。

エラーハンドリングを適切に行うことで、NaNによるエラーが発生してもプログラムが突然停止することを防ぎ、エラーを適切に処理できます。

○サンプルコード6：データ検証によるNaNの事前防止

NaNを避けるもう1つの方法は、データ検証を行うことです。

ユーザー入力や外部からのデータを受け取る際に、事前にデータの妥当性をチェックし、不正な値を排除することでNaNの発生を防ぐことができます。

function validateAge(age) {
  if (typeof age !== "number" || isNaN(age) || age < 0) {
    console.error("Invalid age");
    return null;
  }
  return age;
}

function calculateDiscount(age) {
  const validatedAge = validateAge(age);
  if (validatedAge === null) {
    return null;
  }
  if (validatedAge < 18) {
    return 0.1;
  } else if (validatedAge < 60) {
    return 0.05;
  } else {
    return 0.15;
  }
}

console.log(calculateDiscount(25));  // 出力: 0.05
console.log(calculateDiscount("30"));  // 出力: Invalid age, null
console.log(calculateDiscount(-10));  // 出力: Invalid age, null

上記のコードでは、validateAge関数でage引数の妥当性をチェックしています。

typeof演算子を使って引数がnumber型であることを確認し、isNaNでNaNでないことをチェックしています。

また、ageが0以上であることも確認しています。

validateAge関数で検証を行い、不正な値の場合はエラーメッセージを出力し、nullを返します。

calculateDiscount関数では、まずvalidateAge関数を呼び出して年齢の検証を行います。

検証に失敗した場合はnullを返し、検証に成功した場合は割引率を計算して返します。

calculateDiscount(25)を呼び出すと、年齢が25なので0.05（5%割引）が返されます。

calculateDiscount(“30”)を呼び出すと、年齢が文字列なので検証に失敗し、エラーメッセージとnullが返されます。

同様に、calculateDiscount(-10)を呼び出すと、年齢が負の数なので検証に失敗します。

●よくあるエラーと対処法

NaNに関するプログラミングテクニックを学んだところで、実際のコーディングでよく遭遇するNaN関連のエラーとその対処法について見ていきましょう。

NaNは予期しない場所で発生することがあり、デバッグに苦労することもあるかもしれません。

ここでは、一緒にエラーの原因と解決方法を探っていきましょう。

○”NaN is not defined”エラーとその解決方法

JavaScriptでコードを書いていると、”NaN is not defined”というエラーに遭遇することがあります。

このエラーは、NaNが変数として定義されていないことを表しています。

// エラーが発生するコード例
if (value === NaN) {
  console.log("値はNaNです");
}

上記のコードでは、NaNを変数のように扱おうとしているため、”NaN is not defined”エラーが発生します。

このエラーを解決するには、isNaN関数を使って値がNaNかどうかを判定する必要があります。

// 修正後のコード
if (isNaN(value)) {
  console.log("値はNaNです");
}

修正後のコードでは、isNaN関数を使ってvalueがNaNかどうかを判定しています。

これにより、エラーが解消され、正しく動作するようになります。

NaNは特殊な値なので、通常の比較演算子（===）では正しく判定できません。

NaNかどうかを判定する際は、必ずisNaN関数を使うようにしましょう。

○”Cannot read property ‘x’ of NaN”エラーとその対処法

もう1つのよくあるエラーが、”Cannot read property ‘x’ of NaN”です。

このエラーは、NaNに対してプロパティやメソッドにアクセスしようとしたときに発生します。

// エラーが発生するコード例
const value = NaN;
console.log(value.toFixed(2));

上記のコードでは、NaNに対してtoFixed()メソッドを呼び出そうとしているため、”Cannot read property ‘toFixed’ of NaN”エラーが発生します。

このエラーを回避するには、事前にNaNかどうかを判定し、NaNでない場合にのみプロパティやメソッドにアクセスするようにします。

// 修正後のコード
const value = NaN;
if (!isNaN(value)) {
  console.log(value.toFixed(2));
}

修正後のコードでは、isNaN関数を使ってvalueがNaNでないことを確認してから、toFixed()メソッドを呼び出しています。

これにより、エラーを回避できます。

NaNに対して直接プロパティやメソッドにアクセスすることはできないので、必ず事前にNaNかどうかを判定するようにしましょう。

○”Invalid number”エラーとNaNとの関係

最後に、”Invalid number”エラーとNaNの関係について触れておきましょう。

“Invalid number”エラーは、数値に変換できない文字列をNumber()関数やparseInt()関数などで変換しようとしたときに発生します。

// エラーが発生するコード例
const value = Number("hello");
console.log(value);  // 出力: NaN

上記のコードでは、文字列 “hello” をNumber()関数で数値に変換しようとしています。

しかし、”hello”は有効な数値ではないため、変換結果はNaNになります。

このように、”Invalid number”エラーが発生する状況では、結果としてNaNが生成されることが多いです。

NaNは無効な数値を表す特殊な値なので、無効な文字列を数値に変換しようとするとNaNになるわけですね。

“Invalid number”エラーを回避するには、事前に文字列が有効な数値かどうかを判定し、有効な場合にのみ変換を行うようにします。

正規表現を使って数値パターンにマッチするかどうかをチェックするのも良い方法です。

// 修正後のコード
const value = "hello";
if (/^\d+$/.test(value)) {
  const number = Number(value);
  console.log(number);
} else {
  console.log("無効な数値形式です");
}

修正後のコードでは、正規表現/^\d+$/を使ってvalueが数値パターンにマッチするかどうかを判定しています。

マッチする場合にのみNumber()関数で変換を行い、そうでない場合はエラーメッセージを出力します。

“Invalid number”エラーとNaNは密接に関係しているので、文字列を数値に変換する際は注意が必要です。

事前のチェックを怠ると、予期しないNaNが発生する可能性があります。

●NaNの応用例とサンプルコード

これまでNaNの基本的な概念から、検出方法、回避テクニックまで幅広く解説してきました。

最後に、NaNを実際のプログラミングでどのように応用できるのか、いくつかのサンプルコードを交えながら探ってみましょう。

NaNの特性を理解し、うまく活用することで、より堅牢で効率的なコードを書くことができるはずです。

○サンプルコード7：ユーザー入力値のバリデーション

Webアプリケーションでユーザー入力を受け取る際、入力値のバリデーションは欠かせません。

NaNを使って、入力値が数値かどうかを判定することができます。

function validateAge(input) {
  const age = Number(input);
  if (isNaN(age) || age < 0 || age > 120) {
    console.log("無効な年齢です");
  } else {
    console.log("年齢は " + age + " です");
  }
}

validateAge("25");  // 出力: 年齢は 25 です
validateAge("abc");  // 出力: 無効な年齢です
validateAge("-10");  // 出力: 無効な年齢です

上記のコードでは、validateAge関数でユーザーの年齢入力をバリデーションしています。

入力値をNumber()関数で数値に変換し、isNaN関数でNaNかどうかを判定しています。

また、年齢の有効範囲（0以上120以下）もチェックしています。

validateAge(“25”)を呼び出すと、入力値 “25” は有効な年齢なので、”年齢は 25 です”と出力されます。

validateAge(“abc”)を呼び出すと、入力値 “abc” は数値ではないためNaNになり、”無効な年齢です”と出力されます。

同様に、validateAge(“-10”)を呼び出すと、入力値 “-10” は有効な年齢の範囲外なので、”無効な年齢です”と出力されます。

このように、NaNを使ってユーザー入力値のバリデーションを行うことで、アプリケーションの信頼性を高めることができます。

○サンプルコード8：数値計算結果の妥当性チェック

数値計算を行う際、計算結果がNaNになることがあります。

NaNを使って計算結果の妥当性をチェックし、エラーハンドリングを行うことができます。

function calculateAverage(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  const average = sum / numbers.length;
  if (isNaN(average)) {
    console.log("計算エラーが発生しました");
    return null;
  }
  return average;
}

const result1 = calculateAverage([10, 20, 30]);
console.log(result1);  // 出力: 20

const result2 = calculateAverage([10, "hello", 30]);
console.log(result2);  // 出力: 計算エラーが発生しました, null

上記のコードでは、calculateAverage関数で数値の平均値を計算しています。

numbers配列の要素を合計し、要素数で割って平均値を求めています。

計算結果をisNaN関数でチェックし、NaNの場合は “計算エラーが発生しました”というメッセージを出力し、nullを返しています。

calculateAverage([10, 20, 30])を呼び出すと、すべての要素が数値なので正常に計算が行われ、平均値の20が返されます。

一方、calculateAverage([10, “hello”, 30])を呼び出すと、要素の中に文字列 “hello” が含まれているため、計算結果がNaNになります。エラーメッセージが出力され、nullが返されます。

このように、NaNを使って計算結果の妥当性をチェックすることで、予期しないエラーを検出し、適切に処理することができます。

○サンプルコード9：NaNを使った条件分岐

NaNは特殊な値なので、条件分岐に使うことができます。

NaNを使って、値が数値かどうかに応じて処理を切り替えることができます。

function processValue(value) {
  if (isNaN(value)) {
    console.log("値は数値ではありません");
  } else {
    console.log("値は数値です");
    // 数値に対する処理を行う
  }
}

processValue(10);  // 出力: 値は数値です
processValue("hello");  // 出力: 値は数値ではありません

上記のコードでは、processValue関数で引数valueが数値かどうかを判定しています。

isNaN関数を使ってvalueがNaNかどうかをチェックし、NaNの場合は “値は数値ではありません”と出力し、そうでない場合は “値は数値です”と出力しています。

processValue(10)を呼び出すと、引数は数値なので “値は数値です”と出力されます。

processValue(“hello”)を呼び出すと、引数は文字列なのでNaNと判定され、”値は数値ではありません”と出力されます。

このように、NaNを使った条件分岐によって、値のタイプに応じて適切な処理を行うことができます。

○サンプルコード10：NaNを使ったエラーハンドリング

NaNは予期しない結果を表す値なので、エラーハンドリングに使うことができます。

NaNを使って、関数の引数や計算結果が有効かどうかをチェックし、エラーを適切に処理することができます。

function divide(a, b) {
  if (isNaN(a) || isNaN(b)) {
    throw new Error("引数が数値ではありません");
  }
  if (b === 0) {
    return NaN;
  }
  return a / b;
}

try {
  const result1 = divide(10, 5);
  console.log(result1);  // 出力: 2

  const result2 = divide(10, 0);
  console.log(result2);  // 出力: NaN

  const result3 = divide(10, "hello");
  console.log(result3);  // エラーがスローされる
} catch (error) {
  console.log("エラーが発生しました:", error.message);
}

上記のコードでは、divide関数で2つの数値を割り算しています。

関数内では、まずisNaN関数を使って引数a, bが数値かどうかをチェックし、数値でない場合はエラーをスローしています。

また、bが0の場合は、0除算エラーを避けるためにNaNを返しています。

try…catch文を使って、divide関数を呼び出しています。divide(10, 5)を呼び出すと、正常に計算が行われ、結果の2が出力されます。

divide(10, 0)を呼び出すと、0除算が発生するためNaNが返され、出力されます。

divide(10, “hello”)を呼び出すと、引数が数値ではないためエラーがスローされ、catch節でエラーメッセージが出力されます。