SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのNumber.isNaN()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:41動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:01今回はナンバー・イズ・ナンを紹介します。
  3. 0:04これは、渡した値がナン、つまり数値として表せない特別な値かどうかを判定する静的メソッドです。
  4. 0:12ナンは、文字を数値へ変換しようとして失敗したときなどに生まれます。
  5. 0:18この動画では、書き方と引数、記事の基本例、トゥルーになる値とフォールスになる値、
  6. 0:24文字列を変換しない仕様、グローバルなイズ・ナンとの違い、等号では比べられない理由、
  7. 0:30そして入力検証の実例まで、実行結果と一緒に学びます。
  8. 0:36計算が静かに壊れる前に気づくための、大切な判定です。
  9. 0:41ナンを放置すると、合計や平均などの計算結果までナンに染まってしまうため、
  10. 0:45早めの検出が欠かせません。
  11. 0:49まず動作環境を確認します。
  12. 0:51イズ・ナンはナンバーオブジェクトに備わる機能です。
  13. 0:54クロームでは二十五以降、ファイアーフォックスでは十五以降、サファリでは九以降、
  14. 0:58エッジでは十二以降で使えます。
  15. 1:02アンドロイド版クロームでは二十五以降、アイオーエス版サファリでは九以降です。
  16. 1:07ノード・ジェイエスではゼロ・十・ゼロという古い版から対応しています。
  17. 1:12記事の互換性情報はエムディーエヌのデータに基づく目安です。
  18. 1:16現在使われている環境であれば、ほぼどこでもそのまま使えるでしょう。
  19. 1:20追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
  20. 1:25迷ったときは、実際に使うブラウザーとノードの両方で一度実行して確かめるのが確実です。
  21. 1:31書き方を確認します。
  22. 1:33ナンバーのあとにドットを書き、イズ・ナンとカッコを続けます。
  23. 1:37引数は判定したい値が一つだけです。
  24. 1:39戻り値はトゥルーかフォールスの真偽値で、値そのものは返りません。
  25. 1:44大切なのは、引数を数値へ変換しないことです。
  26. 1:47文字などを渡しても、勝手に数値にはされません。
  27. 1:50スライドの例では、ナンそのものはトゥルー、四十二のような普通の数値はフォールスになることを実機で確認しました。
  28. 1:58まずは、値を受け取って、ナンかどうかだけを答える、という基本の形を覚えてください。
  29. 2:04引数を二つ書いても判定されるのは先頭の一つだけです。
  30. 2:08戻り値が真偽値なので、そのまま条件分岐の条件式に書けるのも便利な点です。
  31. 2:13記事の基本例を見ます。
  32. 2:15エイビーシーという文字をナンバーで数値へ変換し、その結果をイズ・ナンで判定するコードです。
  33. 2:22文字は数値になれないため、変換結果はナンになり、実行結果はトゥルーで、ノードの実機結果とも一致しています。
  34. 2:30読み方はシンプルで、変換が失敗した、ということです。
  35. 2:34記事でも、数値変換の結果がナンになったかを検出する場面が想定されています。
  36. 2:40まずはこの例をブラウザーのコンソールかノードで実行し、引数の文字を数字の並びに変えるとどうなるか、
  37. 2:45予測してから確かめてみてください。
  38. 2:50予測してから実行する習慣をつけると、変換と判定の役割分担が自然と身につきます。
  39. 2:56トゥルーになる値を確認します。
  40. 2:58結論から言うと、トゥルーになるのはナンだけです。
  41. 3:01ナンを直接渡した場合も、ゼロをゼロで割って生まれたナンも、どちらもトゥルーになることを実機で確認しました。
  42. 3:08先ほどの基本例のように、文字の変換に失敗して生まれたナンも同じです。
  43. 3:13生まれ方が違っても、ナンであれば必ず検出できます。
  44. 3:16逆に言えば、トゥルーという結果は、その値が計算に使えない状態だという強いサインです。
  45. 3:22ここで処理を止めて、入力や変換の過程を見直す合図として受け取ってください。
  46. 3:26どの計算からナンが生まれたのかをたどる手がかりとしても、この判定は役立ちます。
  47. 3:32フォールスになる代表例を確認します。
  48. 3:34四十二のような普通の数値、ゼロはもちろんフォールスです。
  49. 3:39そして注意したいのが無限大です。
  50. 3:41正の無限大も負の無限大も、ナンではないのでフォールスになることを実機で確認しました。
  51. 3:47記事もこの点を明記していて、有限かどうかまで確かめたい場合は、イズ・ファイナイトを併せて使うよう案内しています。
  52. 3:56イズ・ナンはあくまでナン専用の判定です。
  53. 3:59異常な数値をまとめてはじきたいのか、ナンだけを見つけたいのか、目的に合わせて使い分けてください。
  54. 4:06目的が違う判定を取り違えると、異常を見逃す原因になるので注意してください。
  55. 4:11記事の境界例を見ます。
  56. 4:13エイビーシーという文字列をそのまま渡すと、結果はフォールスです。
  57. 4:18一方、ナンバーで変換してから渡すとトゥルーになり、どちらも実機と一致しました。
  58. 4:25文字列そのものはナンではない、というのがポイントです。
  59. 4:29ヌルや未定義の値、オブジェクトを渡しても、変換されずにフォールスとなり、
  60. 4:33例外にはなりません。
  61. 4:37これは、勝手に変換しない厳しい判定だということです。
  62. 4:41入力が文字列で届く場面では、先に自分で変換し、その結果を判定する、という順番を守ってください。
  63. 4:48変換と判定を分けて書くことで、どこで数値になったのかが読み手にも伝わります。
  64. 4:54名前のよく似た、グローバルなイズ・ナンとの違いを知っておきましょう。
  65. 4:59グローバル版は、引数を先に数値へ変換してから判定します。
  66. 5:03そのため文字列のエイビーシーは、変換に失敗してナンになるので、グローバル版ではトゥルーになることを実機で確認しました。
  67. 5:12一方、今回のナンバー版は変換しないのでフォールスです。
  68. 5:16同じ入力でも結果が正反対になるため、どちらを使っているかでプログラムの意味が変わります。
  69. 5:22数値のナンであることだけを厳密に確認したい場面では、変換しないナンバー版を選ぶのが基本です。
  70. 5:29名前が似ているメソッドほど、仕様の違いを意識して選ぶことが大切です。
  71. 5:34記事が注意する、もう一つの落とし穴を見ます。
  72. 5:37ナンとナンを等号三つで比べても、結果はフォールスになることを実機で確認しました。
  73. 5:43ナンは、自分自身とさえ等しくない、という特別なルールを持つ値なのです。
  74. 5:48そのため、もし値がナンかどうかを等号で判定しようとすると、永遠に見つけられません。
  75. 5:54判定には必ずイズ・ナンを使ってください。
  76. 5:57スライドの二行目では、同じナンに対してイズ・ナンがトゥルーを返しています。
  77. 6:03比べ方を間違えると静かに失敗するので、ここは確実に覚えておきましょう。
  78. 6:08配列の中からナンを探すときも、等号ではなくこの判定を条件に使います。
  79. 6:13実務に近い実例として、入力値の検証を見ます。
  80. 6:17フォームなどから届いた文字列は、まずナンバーで変換し、その結果がナンかどうかを判定します。
  81. 6:23トゥルーなら計算へ進めず、入力ミスとして扱う流れです。
  82. 6:27ここで注意したい落とし穴があります。
  83. 6:29空文字列をナンバーで変換するとゼロになり、イズ・ナンではフォールス、つまり正常な数値として通ってしまうのです。
  84. 6:37スライドの最後の行でも、その動きを実機で確認しました。
  85. 6:41これを防ぐには、変換の前に空欄かどうかを先に確認してください。
  86. 6:45検証の順番まで含めて覚えておきましょう。
  87. 6:48入力の入口で一度はさむ習慣をつけると、異常な値に早く気づけます。
  88. 6:52まとめです。
  89. 6:53イズ・ナンは、値が数値のナンかどうかを、変換せずに厳密に判定するメソッドです。
  90. 7:00判断のポイントは三つです。
  91. 7:02まず、トゥルーになるのはナンだけで、数値も無限大もフォールスになること。
  92. 7:08次に、文字列は変換されないため、入力は先にナンバーで変換してから渡すこと。
  93. 7:14そして、ナンは等号では比べられないので判定には必ずこのメソッドを使い、有限かどうかはイズ・ファイナイトで別に確かめることです。
  94. 7:24まずは記事の基本例をコンソールで実行し、引数を数値や文字列に変えて、結果を予測してから確かめてみてください。
  95. 7:32お疲れさまでした。
  96. 7:34小さな判定ですが、計算全体の信頼性を守る入口として、ぜひ使いこなしてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Number.isNaN()で値が数値のNaNかどうかを判定する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのNumber.isNaN()の使い方：引数・戻り値・実例と注意点 →