JavaScriptで値が数値かどうかを判定する方法

JavaScriptでは、ある値が数値なのか、それとも別のデータ型なのかを確認する方法がいくつかあります。本記事では、最も一般的に使われるtypeof演算子の基本的な使い方から、フォームのバリデーションなど実践的な活用例まで、コード例とともにわかりやすく解説します。

typeof演算子の基本

値の型を確認する最も一般的な方法は、typeof演算子を使用することです。typeofは、オペランドとして渡した値の型を文字列で返します。

const value = 5

console.log(typeof value)
// "number"

この例では、変数valueに代入された5は数値型なので、typeofは"number"という文字列を返します。同様に、文字列に対しては"string"、真偽値に対しては"boolean"が返されます。

実践的な使用例：フォームの入力チェック

typeofを実務で活用する場面の一つが、フォームの入力内容が正しく記入されているかどうかのチェックです。条件文の中でtypeofを使うことで、入力値の型が期待どおりかどうかを検証できます。

ここでは、入力された値の型が数値型ではない場合に、コンソールへメッセージを出力する処理を見てみましょう。

const inputFieldAge = "10"
if (typeof inputFieldAge !== 'number') {
  console.log('This field has to be a number')
}

このコードでは、変数inputFieldAgeには数値型の10ではなく、ダブルクォートで囲まれた文字列の"10"が代入されています。そのため、typeof演算子はこれを検出し、条件式がtrueとなってコンソールにメッセージが出力されます。

見た目上は同じ数字でも、クォートで囲まれているかどうかで型が異なる点に注意しましょう。ユーザー入力は多くの場合文字列として受け取られるため、このような型チェックはバリデーションにおいて非常に重要です。

補足：より厳密な数値チェックにはNumber.isFinite()も便利

typeofによる判定はシンプルで有効ですが、より厳密な検証が必要な場合はNumber.isFinite()やNumber.isInteger()といったメソッドも活用できます。たとえばNaNやInfinityを除外して純粋な数値だけを判定したい場合に役立ちます。

console.log(Number.isFinite(5))       // true
console.log(Number.isFinite("5"))     // false
console.log(Number.isFinite(NaN))     // false

用途に応じてtypeofとこれらのメソッドを使い分けることで、より堅牢なコードを書くことができます。