【JavaScript】isNaN()で指定した値が非数かどうか判別する！

エンジニアに特化した転職エージェント！

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談！

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します！

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています！

転職エージェントに迷っている方、まずは無料でキャリア相談から！

エンジニア特化の転職支援【キッカケエージェント】

(この記事は2023年05月10日に投稿されました。)

JavaScriptで指定指定した値が非数かどうか判別する方法として、isNaN()があります。

isNaN()とは、指定した値が非数であるかどうかを判別できるメソッドになります。

非数かどうかを判別するメソッドであるため、非数である場合は「true」を、そうでない場合は「false」の真偽値を返すようになります。

また、isNaN()を使用しなくても「==」や「===」で非数の判断ができると思いがちですが、その2つを使用すると期待していない結果が返ってきてしまうため注意が必要です。

そのため、処理の前に非数チェックを行いたい場合はisNaN()を使用するようにしましょう

今回はJavaSCriptのisNaN()で指定した値が非数かどうか判別する方法について紹介していきます。

この記事はこんな方におすすめ

isNaN()とは

isNaN()とは指定した値が非数かどうかを判定するメソッドとなります。

そもそも非数とは算術演算の結果が未定義または表現不可能な値となった時に表示される値になります。

isNaN()の書き方

isNaN()の書き方は下記のようになります。

isNaN(対象の値)

1	isNaN(対象の値)

isNaN()と記述し、括弧の中に引数を1つ追記すると使用できます。

isNaN()の引数

isNaN()の引数は下記のようになります。

対象の値(必須):
非数かどうかを確認したい値を指定する

isNaN()は必須な引数として「対象の値」を指定します。

isNaN()の返り値

isNaN()の返り値はtrueやfalseの真偽値となります。

isNaN()で指定した値が数値かどうか判別するサンプルコード

isNaN()で指定した値が数値かどうか判別するサンプルコードをご紹介します。

ここでは下記の2つのパターンでisNaN()を使用します。

対象の値が非数である場合
対象の値が非数ではない場合

対象の値が非数である場合

対象の値が非数である場合にisNaN()を使用すると、「true」を返します。

● main.js

console.log('● 対象の数値-1')
var nan1 = NaN
console.log(nan1)

console.log('● isNaN()使用後-1')
var result1 = isNaN(nan1)
console.log(result1)

console.log('● 対象の数値-2')
var nan2 = 0 / 0
console.log(nan1)

console.log('● isNaN()使用後-2')
var result2 = isNaN(nan2)
console.log(result2)

console.log('● 対象の数値-1')

var nan1 = NaN

console.log(nan1)

console.log('● isNaN()使用後-1')

var result1 = isNaN(nan1)

console.log(result1)

console.log('● 対象の数値-2')

var nan2 = 0 / 0

console.log(nan1)

console.log('● isNaN()使用後-2')

var result2 = isNaN(nan2)

console.log(result2)

実行結果

isNaN()によって要素が存在する配列に対して処理を行っています。

今回指定した数値は非数であるため、どちらとも「true」が表示されています。

対象の値が非数ではない場合

対象の値が非数ではない場合にisNaN()を使用すると、「false」を返します。

● main.js

console.log('● 対象の数値-1')
var nan1 = 12
console.log(nan1)

console.log('● isNaN()使用後-1')
var result1 = isNaN(nan1)
console.log(result1)

console.log('● 対象の数値-2')
var nan2 = 13 / 0
console.log(nan1)

console.log('● isNaN()使用後-2')
var result2 = isNaN(nan2)
console.log(result2)

console.log('● 対象の数値-1')

var nan1 = 12

console.log(nan1)

console.log('● isNaN()使用後-1')

var result1 = isNaN(nan1)

console.log(result1)

console.log('● 対象の数値-2')

var nan2 = 13 / 0

console.log(nan1)

console.log('● isNaN()使用後-2')

var result2 = isNaN(nan2)

console.log(result2)

実行結果

isNaN()によって要素が存在しない配列に対して処理を行っています。

今回指定した数値は非数ではないため、どちらとも「false」が表示されています。

isNaN()の対象の値に数値以外の値を指定して使用する場合

isNaN()の対象の値に数値以外の値を指定しても使用することができます。

そのため、ここでは下記の3つの数値以外のパターンでisNaN()を使用します。

対象の値が文字列である場合
対象の値がブーリアンである場合
対象の値が配列である場合

対象の値が文字列である場合

isNaN()の対象の値が文字列である場合は「true」を返すようになります。

● main.js

console.log('● 対象の文字列-1')
var nan1 = "文字列だよ"
console.log(nan1)

console.log('● isNaN()使用後-1')
var result1 = isNaN(nan1)
console.log(result1)

console.log('● 対象の文字列-2')
var nan2 = "NaN"
console.log(nan2)

console.log('● isNaN()使用後-2')
var result2 = isNaN(nan2)
console.log(result2)

console.log('● 対象の文字列-1')

var nan1 = "文字列だよ"

console.log(nan1)

console.log('● isNaN()使用後-1')

var result1 = isNaN(nan1)

console.log(result1)

console.log('● 対象の文字列-2')

var nan2 = "NaN"

console.log(nan2)

console.log('● isNaN()使用後-2')

var result2 = isNaN(nan2)

console.log(result2)

実行結果

文字列は非数であることから、「true」が表示されています。

対象の値がブーリアンである場合

isNaN()の対象の値がブーリアンである場合は「false」を返すようになります。

● main.js

console.log('● 対象のブーリアン-1')
var bool1 = true
console.log(bool1)

console.log('● isNaN()使用後-1')
var result1 = isNaN(bool1)
console.log(result1)

console.log('● 対象のブーリアン-2')
var bool2 = false
console.log(bool2)

console.log('● isNaN()使用後-2')
var result2 = isNaN(bool2)
console.log(result2)

console.log('● 対象のブーリアン-1')

var bool1 = true

console.log(bool1)

console.log('● isNaN()使用後-1')

var result1 = isNaN(bool1)

console.log(result1)

console.log('● 対象のブーリアン-2')

var bool2 = false

console.log(bool2)

console.log('● isNaN()使用後-2')

var result2 = isNaN(bool2)

console.log(result2)

実行結果

ブーリアンは非数でないことから、「false」が表示されています。

対象の値が配列である場合

isNaN()の対象の値が配列である場合は「false」を返すようになります。

● main.js

console.log('● 対象の配列-1')
var arr1 = [NaN, NaN]
console.log(arr1)

console.log('●isNaN()使用後-1')
var result1 = isNaN(arr1)
console.log(result1)

console.log('● 対象の配列-2')
var arr2 = [true, false]
console.log(arr2)

console.log('●isNaN()使用後-2')
var result2 = isNaN(arr2)
console.log(result2)

console.log('● 対象の配列-1')

var arr1 = [NaN, NaN]

console.log(arr1)

console.log('●isNaN()使用後-1')

var result1 = isNaN(arr1)

console.log(result1)

console.log('● 対象の配列-2')

var arr2 = [true, false]

console.log(arr2)

console.log('●isNaN()使用後-2')

var result2 = isNaN(arr2)

console.log(result2)

実行結果

配列は非数でないことから、「false」が表示されています。

isNaN()と等値性評価演算子(==/===)との違い

isNaN()で非数かどうかを判別してきましたが、等値性評価演算子である「==」や「===」を使用しても問題ないのではと思うのではないでしょうか？

結論から言うと、この2つの方法で確認を取った場合、isNaN()とは異なる結果を返すようになります。

例えば、「==」や「===」で非数確認を行った下記のコードを見てください。

● main.js

console.log('● 対象の非数-1')
var nan1 = NaN
console.log(nan1)

console.log('● 等値性評価演算子(==)使用後')
if(nan1 == NaN) {
    console.log("true")
}
else {
    console.log("false")
}

console.log('● 対象の非数-2')
var nan2 = 0 / 0
console.log(nan2)

console.log('● 等値性評価演算子(===)使用後')
if(nan2 === NaN) {
    console.log("true")
}
else {
    console.log("false")
}

console.log('● 対象の非数-1')

var nan1 = NaN

console.log(nan1)

console.log('● 等値性評価演算子(==)使用後')

if(nan1 == NaN) {

console.log("true")

}

else {

console.log("false")

}

console.log('● 対象の非数-2')

var nan2 = 0 / 0

console.log(nan2)

console.log('● 等値性評価演算子(===)使用後')

if(nan2 === NaN) {

console.log("true")

}

else {

console.log("false")

}

実行結果

非数であるものの結果としてはfalseを返しています。

つまり、等値性評価演算子（== と ===）だと指定した値が「NaN」であったとしても非数であるかどうかの判別ができないということです。

それに比べてisNaN()は、指定した値が「NaN」である場合だと「true」を返し、それ以外は「false」を返すため、非数かどうかを正確に判別することができます。

以上のことから、非数かどうかを正確に確認したい場合には等値性評価演算子よりも、isNaN()を使用するようにしましょう。

isNaN()を使用した実際のケース

isNaN()を使用した実際のケースについてご紹介します。

ここでは、isNaN()を使用して入力された値や出力される結果が非数であるかどうかの確認をとるコードを作成します。

● index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script language="JavaScript" src="main.js"></script>
    <title>isNaN()で非数チェック</title>
</head>
<body>
  <div class= "inp1">
    <p>数値を入力1</p>
    <input type= "text" class= "inp-val1">
  </div>
  <div class ="hugo">÷</div>
  <div class= "inp2">
    <p>数値を入力2</p>
    <input type= "text" class= "inp-val2">
  </div>

  <button class= "btn">結果</button>

	<div class="result">
    <p>答え<span class = "ans"></span></p>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>isNaN()で非数チェック</title>

</head>

<body>

<p>数値を入力1</p>

</div>

<p>数値を入力2</p>

</div>

</div>

</body>

</html>

● main.js

window.addEventListener('load', function() { 
  var val1 = document.querySelector('.inp-val1')
  var val2 = document.querySelector('.inp-val2')
  var answer = document.querySelector('.result p .ans')
  var btn = document.querySelector('.btn')

  btn.addEventListener('click', function() {
    try {
      var val1Text = Number(val1.value)
      var val2Text = Number(val2.value)
      var result = val1Text / val2Text

      if(isNaN(result)) {
        throw new Error("パラメータが不正です。")
      }
      answer.textContent = result
    }
    catch(e) {
      alert('例外のエラーが発生しました。' + e.message)
    }
  })
})

window.addEventListener('load', function() {

var val1 = document.querySelector('.inp-val1')

var val2 = document.querySelector('.inp-val2')

var answer = document.querySelector('.result p .ans')

var btn = document.querySelector('.btn')

btn.addEventListener('click', function() {

try {

var val1Text = Number(val1.value)

var val2Text = Number(val2.value)

var result = val1Text / val2Text

if(isNaN(result)) {

throw new Error("パラメータが不正です。")

}

answer.textContent = result

}

catch(e) {

alert('例外のエラーが発生しました。' + e.message)

}

})

● style.css

.inp1, .inp2, .hugo {
  display: inline-block;
}
.ans {
  font-size: 25px;
}

.inp1, .inp2, .hugo {

display: inline-block;

}

.ans {

font-size: 25px;

}

実行結果

isNaN()によって入力された値や出力される結果が非数であるかどうかの確認をとっています。

そのため、入力した値が数値である場合は計算された結果が表示されますが、非数の場合はエラーメッセージがアラートで表示されています。

指定した値が非数であるかどうかを厳密に判別する場合

指定した値が非数であるかどうかを厳密に判別するにはNumber.isNaN()を使用します。

Number.isNaN()とは、渡された値が非数(NaN)であり、かつその型が数値型(Number)であるかどうかを判断するメソッドになります。

そのため、今回紹介しているisNaN()よりもセキュリティーが高めのメソッドになります。

● main.js

console.log('● 対象の非数-1')
var nan1 = NaN
console.log(nan1)

console.log('● Number.isNaN()使用後-1')
var result1 = Number.isNaN(nan1)
console.log(result1)

console.log('● 対象の非数-2')
var nan2 = "NaN"
console.log(nan2)

console.log('● Number.isNaN()使用後-2')
var result2 = Number.isNaN(nan2)
console.log(result2)

console.log('● 対象の非数-1')

var nan1 = NaN

console.log(nan1)

console.log('● Number.isNaN()使用後-1')

var result1 = Number.isNaN(nan1)

console.log(result1)

console.log('● 対象の非数-2')

var nan2 = "NaN"

console.log(nan2)

console.log('● Number.isNaN()使用後-2')

var result2 = Number.isNaN(nan2)

console.log(result2)

実行結果

Number.isNaN()によって入定した値が非数であるかどうかを厳密に判別しています。

そのため、数値型の「NaN」はtrueを返していますが、文字列型の「NaN」はfalseを返しています。

指定した値が有限数かどうか判別する場合

指定した値が有限数かどうか判別するにはisFinite()かNumber.isFinite()を使用します。

isFinite()やNumber.isFinite()とは指定した値が有限数かどうか判別することができるメソッドになります。

しかし、数値型かつ有限数であるNumber.isFinite()の方がセキュリティは高めになります。

isFinite()

● main.js

console.log('● 対象の数値-1')
var fnt1 = 123456
console.log(fnt1)

console.log('● isFinite()使用後-1')
var result1 = isFinite(fnt1)
console.log(result1)

console.log('● 対象の数値-2')
var fnt2 = Infinity
console.log(fnt2)

console.log('● isFinite()使用後-2')
var result2 = isFinite(fnt2)
console.log(result2)

console.log('● 対象の文字列')
var fnt3 = "123456"
console.log(fnt3)

console.log('● isFinite()使用後-3')
var result3 = isFinite(fnt3)
console.log(result3)

console.log('● 対象の数値-1')

var fnt1 = 123456

console.log(fnt1)

console.log('● isFinite()使用後-1')

var result1 = isFinite(fnt1)

console.log(result1)

console.log('● 対象の数値-2')

var fnt2 = Infinity

console.log(fnt2)

console.log('● isFinite()使用後-2')

var result2 = isFinite(fnt2)

console.log(result2)

console.log('● 対象の文字列')

var fnt3 = "123456"

console.log(fnt3)

console.log('● isFinite()使用後-3')

var result3 = isFinite(fnt3)

console.log(result3)

実行結果

isFinite()によって指定した値が有限数かどうか判別しています。

そのため、数値型と文字列型の「123456」はtrueを返していますが、「Infinity」はfalseを返しています。

また、Number.isFinite()は下記のようになります。

Number.isFinite()

● main.js

console.log('● 対象の数値-1')
var fnt1 = 123456
console.log(fnt1)

console.log('● Number.isFinite()使用後-1')
var result1 = Number.isFinite(fnt1)
console.log(result1)

console.log('● 対象の数値-2')
var fnt2 = Infinity
console.log(fnt2)

console.log('● Number.isFinite()使用後-2')
var result2 = Number.isFinite(fnt2)
console.log(result2)

console.log('● 対象の数値-3')
var fnt3 = "123456"
console.log(fnt3)

console.log('● Number.isFinite()使用後-3')
var result3 = Number.isFinite(fnt3)
console.log(result3)

console.log('● 対象の数値-1')

var fnt1 = 123456

console.log(fnt1)

console.log('● Number.isFinite()使用後-1')

var result1 = Number.isFinite(fnt1)

console.log(result1)

console.log('● 対象の数値-2')

var fnt2 = Infinity

console.log(fnt2)

console.log('● Number.isFinite()使用後-2')

var result2 = Number.isFinite(fnt2)

console.log(result2)

console.log('● 対象の数値-3')

var fnt3 = "123456"

console.log(fnt3)

console.log('● Number.isFinite()使用後-3')

var result3 = Number.isFinite(fnt3)

console.log(result3)

実行結果

Number.isFinite()によって指定した値が有限数かどうかを厳密に判別しています。

そのため、数値型の「123456」はtrueを返していますが、「Infinity」や文字列型の「123456」はfalseを返しています。

まとめ

⚫︎ isNaN()とは指定した値が非数かどうかを判定するメソッドである

⚫︎ isNaN()を使用するには下記の引数を指定する
・対象の値(必須)

⚫︎ 対象の値が非数である場合にisNaN()を使用すると、trueを返す

⚫︎ 対象の値が非数でない場合にisNaN()を使用すると、falseを返す

⚫︎ isNaN()の対象の値に数値以外の値を指定して使用すると下記のような結果になる
・対象の値が文字列である場合は「true」を返す
・対象の値がブーリアンである場合は「false」を返す
・対象の値が配列である場合は「false」を返す

⚫︎　指定した値が非数であるかどうかを厳密に判別するにはNumber.isNaN()を使用する

⚫︎ 指定した値が有限数かどうか判別するには、isFinite()やNumber.isFinite()を使用する

isNaN()とは

isNaN()の書き方

isNaN()の引数

isNaN()の返り値

isNaN()で指定した値が数値かどうか判別するサンプルコード

対象の値が非数である場合

対象の値が非数ではない場合

isNaN()の対象の値に数値以外の値を指定して使用する場合

対象の値が文字列である場合

対象の値がブーリアンである場合

対象の値が配列である場合

isNaN()と等値性評価演算子(==/===)との違い

isNaN()を使用した実際のケース

指定した値が非数であるかどうかを厳密に判別する場合

指定した値が有限数かどうか判別する場合

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル