JavaScript の数値チェックに isNaN を使ってはいけない理由

2017/10/31

JavaScript の数値チェックに isNaN を使うのは「あり」か「なし」か?

答えは「なし」です。

なぜなら isNaN 関数は「数値であることをチェックする」関数ではなく「数値でないことをチェックする関数」だからです。チェックする引数の値に制約があるなら、isNaN で事足りるかもしれません。それでも、きちんと関数の仕様を理解しておかないとバグの温床となるため注意が必要です。

なぜ JavaScript の数値チェックに isNaN を使ってはいけないのか

そもそも NaN は Not a Number の略です。日本語に訳すと「数字ではない」になります。「数字ではない」の反対は「数字である」にも関わらず、isNaN の利用を否定するのは JavaScript の仕様に依るところがあります。

指数表記の e が数値扱いになる

まず最初の例として指数表記の扱いです。指数表記とは 10 の n 乗を「e+n」のように表記することです。

例えば Excel のセルに数字で「100000000000」と桁の大きな数字を入力すると「1E+11」のように勝手に変換される経験はありませんか?このアルファベットの E を使って表現されたのが指数表記です。

実は JavaScript でも同様の表現をすることができます。意図して指数表記で表現しているのであれば話は別ですが、一般的に指数表記で数字を表現することはありません。つまり、意図せず入力された指数表記が数値チェックを難なくスルーしてしまう問題が起こります。

ただプログラム的には数字として扱うのが正しいルールなので、このような表現方法でも数字扱いとなることを理解しておけば大丈夫です。

null 値が true になる問題

isNaN を使ってはいけない最大の理由がここにあります。引数の値によって isNaN が何を返却するか一覧にまとめたのでご覧ください。

引数の値返却値
数字false
文字列true
undefinedtrue
nullfalse
truefalse
falsefalse

残念ながら null を渡すと false がリターンされます。これは null が数値の 0 として変換されてしまう JavaScript の仕様によるものです。同様に、true や false も各々 1 と 0 に変換されるため、false を返却します。

さすがに入力データが null の場合に 0 として取扱うのは無理があります。では事前に null は boolean のチェックをしたり、e が含まれていないことを確認しますか?そこまで実装するなら、わざわざ isNaN を使わなくてもいいのではないでしょうか。

isNaN を使わずどうやって数値チェックするのか

Web システムに組み込む数値チェックの場合、入力項目に応じた数値チェック関数を用意すべきです。例をいくつか挙げておきましょう。

  • 整数入力チェック関数 ……… 小数なし、日本円の入力チェック等に使用
  • 小数入力チェック関数 ……… 小数あり、外貨の入力チェック等に使用
  • マイナス値チェック関数 ……… マイナスを許容してチェックする関数

これらの条件を組み合わせるだけでも、かなりの数の関数が必要になります。ここまできたら、isNaN をどう組み込むか考えるよりも、条件に応じた正規表現のチェック関数を用意したほうが簡単です。

正規表現を利用した数値チェック関数については次のページでまとめているので、よろしければ参考にしてください。

正規表現を用いて JavaScript で数値チェックを行う関数

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!