VIDEO LESSON

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

再生時間 7:39動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:01今回はナンバー・イズ・ファイナイトを紹介します。
0:05これは、渡した値が有限の数値かどうかを判定する静的メソッドです。
0:10有限とは、無限大でもなく、計算できない特別な値でもない、普通に扱える数値のことです。
0:17この動画では、書き方と引数、記事の基本例、有限と判定される値とされない値、
0:23文字列を変換しない仕様、グローバルのイズ・ファイナイトとの違い、入力検証の実例、
0:30そして有限だけでは保証されない範囲まで、実行結果と一緒に学びます。
0:36割り算の結果が無限大になっていないか、入力が計算に使えるかを確認する入口として、
0:40とても頼りになる判定です。
0:45まず動作環境を確認します。
0:47イズ・ファイナイトはナンバーオブジェクトに備わる機能です。
0:51クロームでは十九以降、ファイアーフォックスでは十六以降、サファリでは九以降、
0:55エッジでは十二以降で使えます。
0:59アンドロイド版クロームでは二十五以降、アイオーエス版サファリでは九以降です。
1:04ノード・ジェイエスではゼロ・十・ゼロという古い版から対応しています。
1:09記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:13現在使われている環境であれば、ほぼどこでもそのまま使えるでしょう。
1:18追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
1:23書き方を確認します。
1:24ナンバーのあとにドットを書き、イズ・ファイナイトとカッコを続けます。
1:30引数は判定したい値が一つだけです。
1:32戻り値はトゥルーかフォールスの真偽値で、数値そのものは返りません。
1:37大切なのは、引数を数値へ変換しないことです。
1:40数値の形をした文字列を渡しても、文字列のままでは有限とは判定されません。
1:46スライドの例では、十二・五とゼロがどちらもトゥルーになることを実機で確認しました。
1:52ゼロも立派な有限の数値です。
1:54まずは、値を受け取って真偽値を返す、という基本の形を覚えてください。
1:59引数を二つ書いても判定されるのは先頭の一つだけなので、対象を一つに絞って渡してください。
2:05記事の基本例を見ます。
2:07十二・五を判定する行と、インフィニティ、つまり無限大を判定する行の、二行だけの短いコードです。
2:15実行結果はトゥルーとフォールスで、ノードの実機結果とも一致しています。
2:21十二・五は普通の有限な数値なのでトゥルー、無限大は有限ではないのでフォールス、
2:25という読み方です。
2:29記事でも、入力を変換した後に計算可能な数値か確認する場面が想定されています。
2:36まずはこの例をブラウザーのコンソールかノードで実行し、引数をマイナスの無限大に変えるとどうなるか、
2:41予測してから確かめてみてください。
2:47予測と結果が違ったときは、引数の型から見直すと原因にたどり着きやすくなります。
2:53有限と判定される値を幅広く見ます。
2:56四十二のような正の整数、マイナス七・二五のような負の小数、マイナスゼロも、
3:01すべてトゥルーになることを実機で確認しました。
3:06とても大きな有限の数もトゥルーです。
3:09ここで大事なのは、判定しているのはあくまで有限かどうかだけだ、という点です。
3:15小数でも、負の数でも、ゼロでもかまいません。
3:19整数であることや、正の数であることは条件に入っていません。
3:24そのため、整数だけを受け付けたい場合や、マイナスを除きたい場合は、別の判定を組み合わせる必要があります。
3:32その組み合わせは後の注意点で扱います。
3:35フォールスになる代表例を確認します。
3:38正の無限大、負の無限大、そしてナンと呼ばれる計算できない値は、すべてフォールスになることを実機で確認しました。
3:47例えば、一をゼロで割ると無限大になり、ゼロをゼロで割るとナンになります。
3:53こうした異常な結果をそのまま次の計算へ進めると、表示や集計が静かに壊れてしまいます。
3:59イズ・ファイナイトで早めに検出すれば、計算の手前で止めて、入力を見直す処理へつなげられます。
4:06異常な数値をまとめてはじけることが、このメソッドの大きな役割です。
4:12計算結果を受け取るたびに一度はさむ習慣をつけると、異常に早く気づけます。
4:17記事の境界例を見ます。
4:19数値の形をした文字列の十二をそのまま渡すと、結果はフォールスです。
4:25一方、ナンバーで数値へ変換してから渡すとトゥルーになり、どちらも実機と一致しました。
4:31ヌルやトゥルーのような数値以外の値も、変換されずにフォールスになります。
4:37これは、勝手に変換しない厳しい判定だということです。
4:42入力が文字列で届く場面では、先に自分で変換し、その結果を判定する、という順番を守ってください。
4:49変換と判定を分けて書くことで、どこで数値になったのかが読み手にも伝わります。
4:56オブジェクトや配列を渡した場合も同様にフォールスとなり、例外にはなりません。
5:02名前のよく似た、グローバルなイズ・ファイナイトとの違いを知っておきましょう。
5:08グローバル版は、引数を先に数値へ変換してから判定します。
5:12そのため文字列の十二は、グローバル版ではトゥルーになることを実機で確認しました。
5:18一方、今回のナンバー版は変換しないのでフォールスです。
5:22同じ入力でも結果が正反対になるため、どちらを使っているかでプログラムの意味が変わります。
5:28数値であること自体も含めて厳密に確認したい場面では、変換しないナンバー版を選ぶのが基本です。
5:35名前が似ているメソッドほど、仕様の違いを意識してください。
5:39実務に近い実例として、入力値の検証を見ます。
5:43フォームなどから届いた文字列は、まずナンバーで変換し、その結果が有限かどうかを判定します。
5:50フォールスなら計算へ進めず、入力ミスとして扱う流れです。
5:55ここで記事が注意する落とし穴があります。
5:58空文字列をナンバーで変換するとゼロになり、有限と判定されてしまうのです。
6:04スライドの最後の行でも、その動きを実機で確認しました。
6:08つまり空欄のまま計算が進んでしまいます。
6:11これを防ぐには、変換の前に空欄かどうかを先に確認してください。
6:16検証の順番まで含めて、実例として覚えておきましょう。
6:21注意点を挙げます。
6:22有限であることだけでは、整数であること、マイナスでないこと、安全に表せる範囲であることまでは保証されません。
6:30記事もこの点を明記しています。
6:32例えば十二・五は有限ですが整数ではなく、スライドの例でもイズ・インテジャーではフォールスになることを実機で確認しました。
6:41また、大きすぎる整数は内部で丸められ、見た目と違う値になっていることがあります。
6:47個数や金額のように条件が厳しい値では、有限の判定に加えて、整数かどうかの判定や範囲の確認を組み合わせてください。
6:55境界の値を先に決めておくと、どの判定を足すべきか迷わずに済みます。
7:00まとめです。
7:01イズ・ファイナイトは、値が有限の数値かどうかを、変換せずに厳密に判定するメソッドです。
7:07判断のポイントは三つです。
7:09まず、有限の数値だけがトゥルーで、無限大とナンはフォールスになること。
7:15次に、文字列は変換されないため、入力は先にナンバーで変換してから渡すこと。
7:20そして、空文字列はゼロになってしまうので空欄の確認を先に行い、整数や範囲の条件は別の判定と組み合わせることです。
7:29まずは記事の基本例をコンソールで実行し、引数を文字列や無限大に変えて、結果を予測してから確かめてみてください。
7:38お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

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

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