導入：なぜisNaNが必要なのか
フロントエンド開発では、ユーザーが入力フォームに入力した値や、外部APIから取得したデータが「本当に数値なのか」を確認する場面が頻繁にあります。もし、計算すべき場所で文字列が混入していると、プログラムが予期せぬ動作（NaNの発生など）を引き起こし、バグの原因になります。JavaScriptの「isNaN」は、値が数値として扱えない場合に判定を行うための重要な関数です。
基礎知識：NaNとisNaNとは？
まず「NaN」とは「Not-a-Number（非数）」の略で、数値として計算できない状態を指す特別な値です。例えば、「10 / “あいうえお”」のような計算を行うと、結果はNaNになります。
「isNaN」関数は、引数として渡された値が「NaNであるかどうか」をチェックします。この関数を使うことで、その値が「数値として計算可能なものかどうか」を判断することができます。
実装と解決策：isNaNの仕組み
isNaNは、渡された値が数値に変換できない場合に「true」を返します。ただし、一つ注意が必要です。isNaNは「渡された値を一度数値に変換してから判定する」という性質を持っています。そのため、空文字や真偽値が渡された場合、特殊な挙動を示すことがあります。
より厳密に「その値が数値型かつNaNではない」ことを判定したい場合は、ES6で導入された「Number.isNaN」を使用するのが現代のフロントエンド開発におけるベストプラクティスです。
サンプルプログラム：isNaNの活用例
以下のコードをブラウザのコンソールなどに貼り付けて、挙動を確認してみてください。
// 判定したい値の例
const value1 = "100"; // 文字列の数値
const value2 = "こんにちは"; // 数値ではない文字列
// isNaNを使った判定
function checkValue(val) {
// isNaNは数値を変換してからチェックするため、"100"はfalse(数値とみなす)になる
if (isNaN(val)) {
console.log(val + " は数値ではありません");
} else {
console.log(val + " は数値として扱えます");
}
}
checkValue(value1); // 「100 は数値として扱えます」と表示
checkValue(value2); // 「こんにちは は数値ではありません」と表示
// 【推奨】より厳密な判定方法
const result = Number.isNaN(100);
console.log("厳密なチェック結果: " + result); // false（数値なのでNaNではない）
応用・注意点：現場での使い分け
現場で最も陥りやすい罠が「空文字(”)」の判定です。
実は、isNaN(”) は「0」に変換されるため、「false（数値である）」と判定されてしまいます。ユーザー入力のチェックを行う際は、単にisNaNを使うのではなく、以下のように工夫するのが安全です。
1. 空文字チェックを併用する
値が空ではないことを確認してからisNaNを通すようにしましょう。
2. Number.isNaNを優先する
前述の通り、Number.isNaNは変換を行わずに判定するため、予期せぬ挙動を防げます。特別な理由がない限り、新しく書くコードには「Number.isNaN」を採用することをおすすめします。
これらを意識するだけで、入力フォームのバリデーションや計算処理の信頼性がグッと高まりますよ！