【JavaScript】数値チェックの正しい方法！isNaN・正規表現・文字列判定

Webアプリケーションのフォーム入力やAPIから取得したデータの処理において、その値が「有効な数値であるか」を判定する数値チェックは非常に重要な工程です。

しかし、JavaScriptにおける数値判定には、古くからある isNaN() 関数や、より厳密な Number.isNaN()、さらには正規表現を用いた手法など複数のやり方が存在し、状況に応じて適切に使い分けないと予期せぬバグを引き起こします。

こうした現場の悩みを解決するために、この記事ではJavaScriptにおける数値チェックのベストプラクティスを網羅的に解説します。

パフォーマンスと安全性を両立したコードをマスターしましょう。

数値チェックの基本：組み込み関数による判定

JavaScriptには標準で数値を判定するための関数がいくつか用意されています。

しかし、関数によって「数値として評価できるか」を判定するものと、「型が数値であるか」を判定するものが混在しているため、その挙動の違いを理解することが不可欠です。

最も推奨される Number.isFinite() によるチェック

現代のJavaScript開発において、最も汎用性が高く推奨されるのが Number.isFinite() メソッドです。

このメソッドは、引数が「数値型」であり、かつ「有限の数値（InfinityやNaNではない）」である場合のみ true を返します。

const value1 = 123;
const value2 = "123";
const value3 = NaN;
const value4 = Infinity;

console.log(Number.isFinite(value1));
console.log(Number.isFinite(value2));
console.log(Number.isFinite(value3));
console.log(Number.isFinite(value4));

実行結果

true
false
false
false

このソースコードの内容を紐解くと、Number.isFinite は非常に厳格な判定を行っていることがわかります。

まず value1 は数値型なので当然 true となりますが、注目すべきは value2 です。通常の isFinite() 関数であれば文字列の “123” を数値に自動変換して true と判定してしまいますが、Number.isFinite は型変換を行わないため、文字列を確実に弾いてくれます。

また、計算不能な状態を示す NaN や無限大を示す Infinity も偽として処理されるため、後続の計算処理を安全に進めるためのガードとして最適だと言えます。

isNaN() と Number.isNaN() の決定的な違い

「数値ではないこと」を確認する isNaN() は、その挙動にクセがあることで有名です。

特に古いグローバル関数の isNaN() と、ES2015で追加された Number.isNaN() は全く別物と考えたほうが良いでしょう。

const str = "apple";

// グローバル関数の isNaN
console.log(isNaN(str));

// Number.isNaN
console.log(Number.isNaN(str));

実行結果

true
false

このコードが何を意味しているのかを詳しく解説します。

グローバルな isNaN(str) は、まず引数を数値に変換しようと試みます。
“apple” は数値に変換できないため NaN になり、結果として true（数値ではない）が返ります。

一方、Number.isNaN(str) は、「型が数値であり、かつ値がNaNであること」を条件とします。

引数の str は文字列型であるため、その時点で条件から外れ false を返します。

名前に反して、単なる「数値チェック」としては不十分なケースが多いため、用途を間違えないよう注意が必要です。

文字列を数値としてチェックするテクニック

フォームの入力値など、データが「文字列」として渡される場面では、その中身が数字として正しいかを判定する必要があります。

ここでは、文字列に対する数値チェックの手法を見ていきましょう。

算術演算子を利用した簡潔な判定

プログラムの中で最も手軽に行われる手法の一つに、単項プラス演算子や減算を利用したチェックがあります。

function isNumeric(val) {
    // 文字列を数値に変換し、有限数かどうかを判定
    return val !== "" && !isNaN(val - 0);
}

console.log(isNumeric("123.45"));
console.log(isNumeric("  "));
console.log(isNumeric("1,000"));

実行結果

true
false
false

この処理ロジックの仕組みについて詳しく見ていきます。

val - 0 という計算を行うことで、JavaScriptの暗黙的な型変換を利用して文字列を数値に変換しようと試みています。
もし文字列が数字として成立していれば計算が成功し、成立していなければ NaN になります。

ただし、この方法には罠があり、空文字やスペースだけの文字列が 0 として評価されてしまうため、コードの冒頭で val !== "" という空文字チェックを組み合わせることで精度を高めています。

カンマが含まれる文字列は数値として認識されないため、false となっている点も実務上重要な挙動です。

正規表現による高度な数値チェック

「整数のみ許可したい」「特定の桁数の小数のみ認めたい」といった詳細なバリデーションが必要な場合は、正規表現（RegExp）が最も強力な手段となります。

サジェストキーワードでも頻出する、正規表現を用いたパターン別の実装方法を紹介します。

整数・小数・マイナス記号の判定

用途に合わせて正規表現のパターンを使い分けることで、ユーザーの入力ミスを厳密に防ぐことが可能になります。

// 1. 正の整数のみ
const integerRegex = /^[0-9]+$/;

// 2. 小数点を含む正の数値
const decimalRegex = /^[0-9]+(\.[0-9]+)?$/;

// 3. マイナス記号を許容する数値
const signRegex = /^-?[0-9]+(\.[0-9]+)?$/;

const testValue = "-123.45";

console.log("整数判定:", integerRegex.test(testValue));
console.log("小数判定:", decimalRegex.test(testValue));
console.log("負数対応判定:", signRegex.test(testValue));

実行結果

整数判定: false
小数判定: false
負数対応判定: true

各正規表現が何を意味しているのか、詳しく解説を行います。

まず integerRegex の ^[0-9]+$ は、文字列の最初から最後までが 0 から 9 の数字だけで構成されていることを要求します。

次に decimalRegex の (\.[0-9]+)? という部分は、「ドットとそれに続く数字の並び」が「0回または1回」現れることを意味しており、これによって整数と小数の両方にマッチさせることが可能です。

最後に signRegex では先頭に -? を加えることで、マイナス記号があってもなくても良いというルールを定義しています。

このように正規表現を組み立てることで、システムが要求する厳密な数値フォーマットを定義できるのです。

カンマ区切りの数値を判定する方法

日本のシステムでは「1,234,567」のように3桁ごとにカンマを入れる形式が好まれますが、これをそのまま数値型として扱うことはできません。

正規表現で形式をチェックするか、カンマを除去してから判定するのが定石です。

const commaValue = "1,234,567";

// カンマ形式の正規表現チェック
const hasCommaPattern = /^[0-9]{1,3}(,[0-9]{3})*$/;

// カンマを除去して数値チェック
const plainValue = commaValue.replace(/,/g, "");
const isValid = !isNaN(plainValue) && plainValue !== "";

console.log("形式チェック:", hasCommaPattern.test(commaValue));
console.log("変換後判定:", isValid);

実行結果

形式チェック: true
変換後判定: true

hasCommaPattern では、最初に1桁から3桁の数字があり、その後「カンマ1つと3桁の数字」というセットが繰り返されるパターンを定義しています。
これにより、正しい位置にカンマがあるかを確認できます。

実際に計算で使用する場合は、replace(/,/g, "") メソッドを用いてすべてのカンマを取り除き、純粋な数字の文字列に変換した上で数値チェックを行う必要があります。

この「形式確認」と「クレンジング」の2ステップを踏むことが、ユーザーの入力体験とデータの整合性を両立させるコツとなります。

null や undefined の罠を回避する

JavaScriptの数値チェックにおいて、最も注意すべきなのが null の扱いです。

isNaN や Number 関数の仕様により、初心者が予想もしない判定結果が返ることがあります。

isNaN(null) が false になる理由と対策

「値がない」ことを示す null を数値チェックにかけた際、多くの人が驚く挙動を示します。

const value = null;

console.log("isNaN判定:", isNaN(value));
console.log("Number変換:", Number(value));

実行結果

isNaN判定: false
Number変換: 0

JavaScriptの仕様では、null を数値コンテキストで評価すると自動的に 0 へ変換されます。

そのため、isNaN(null) は「0は数値である」と判断し、false（数値ではない、ではない＝数値である）という結果を返してしまいます。

これが原因で、「未入力なのに数値として処理が進んでしまい、0として計算されてしまった」というバグが多発します。

これを防ぐには、数値判定の前に if (value === null) や if (value === undefined) という厳密な存在チェックを入れることがプロフェッショナルな実装において必須の作法となります。

JavaScriptのスキルを活かして年収を上げる方法

以上、JavaScriptでの数値チェックの方法について詳しく解説してきました。