VIDEO LESSON

JavaScriptのNumber.isSafeInteger()：数量の入力値と計算結果を検証するの解説動画

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

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

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

0:00こんにちは。
0:00今回はジャバスクリプトのナンバー・イズセーフインテジャーを紹介します。
0:06これは、渡された値が安全な整数かどうかを判定するメソッドです。
0:11在庫数や累計件数を扱うとき、値が数値であるだけでは十分ではありません。
0:17小数が混ざっていないか、整数を正確に区別できる範囲に収まっているかも確認する必要があります。
0:24この判定を、数量を受け取る入口と、数量を計算した直後に置くことで、扱える範囲を超えたデータを後続の処理へ渡さずに済みます。
0:34ここでいう安全は、数値表現に関する用語です。
0:38アクセス権や業務ルールまで検証する意味ではない点も、最初に押さえておきましょう。
0:44まず動作環境です。
0:45ナンバー・イズセーフインテジャーはブラウザー専用の機能ではなく、ジャバスクリプトの標準の仕組みです。
0:52二千十五年九月以降のブラウザーで広く利用できるとされており、現在のクローム、
0:56エッジ、ファイアフォックス、サファリで使えます。
1:00ノード・ジェイエスでも動作し、追加のパッケージやインポートは必要ありません。
1:04記事の実行手順はノード・ジェイエス二十二以降を対象としています。
1:08古いブラウザーや組み込みのウェブビューへ配布する場合は、タイプオブで関数として存在するかを確認してから使ってください。
1:16通信も画面操作も含まないので、同じコードをどちらの環境でも試せます。
1:20基本の書き方を見ましょう。
1:22ナンバー・イズセーフインテジャーに、判定したい値を一つ渡すだけです。
1:27戻り値は真偽値で、数値型で安全な整数ならトゥルー、それ以外はフォルスを返します。
1:33重要なのは、文字列を数値へ自動変換しないことです。
1:37数字の形をした文字列トゥエルブも、フォルスになります。
1:41引数を省略した場合はアンディファインドの判定になり、やはりフォルスです。
1:46ヌルや小数、エヌエーエヌ、インフィニティもフォルスです。
1:50変換が必要な場合は、判定とは分けて、どの表記を受け付けるかを先に決めてから変換してください。
1:57この厳密さが、入力検証で役立ちます。
2:00安全な整数の範囲を確認します。
2:02下限はマイナス九千七兆千九百九十二億五千四百七十四万九百九十一、上限はプラスの同じ値で、
2:07両端を含みます。
2:12境界は、ナンバー・マックスセーフインテジャーと、ナンバー・ミンセーフインテジャーという定数で参照できます。
2:21なぜ上限があるのでしょうか。
2:24ジャバスクリプトの通常の数値型は、倍精度浮動小数点形式を使います。
2:30整数が大きくなりすぎると、隣り合う整数を区別できなくなります。
2:35数値として表現できる大きさの上限と、整数を安全に扱える上限は別物です。
2:42負数も安全な整数になり得るため、在庫数ならゼロ以上という条件は別に加える必要があります。
2:50判定の例をもう少し見ましょう。
2:52スリー・ドット・ゼロは、数値としては三と同じなのでトゥルーです。
2:57つまり、小数点を含む表記かどうかを調べる機能ではありません。
3:02一方、小数部分を持つ値や、エヌエーエヌ、インフィニティはフォルスです。
3:07上限を超えた九千七兆を超える整数もフォルスになります。
3:12ここで大切なのは、このメソッドが見るのは値そのものであって、元の文字列表記ではないという点です。
3:19表記ではなく数値として安全かどうかを判定する。
3:23この性質は、後で説明する丸めの限界にもつながります。
3:27まずは、整数、小数、文字列、特殊な値で結果がどう変わるかを、コンソールで確かめてみてください。
3:35ここから実例です。
3:36現在の数量と追加数量を受け取り、合計を返す関数を作ります。
3:41最初に、入力の両方が安全な整数かどうかを確認します。
3:45満たさなければ、タイプエラーを投げて処理を止めます。
3:49次に、数量はゼロ以上という業務ルールを、レンジエラーで別に確認します。
3:54安全な整数であることと、業務上正しいことは別の条件だからです。
3:59記事のサンプルでは、整数の条件を満たさない場合にタイプエラー、ゼロ以上や合計の範囲に違反した場合にレンジエラーを使い分けています。
4:09この分類はサンプル関数の設計であり、メソッド自体は不適切な値でも例外を出さず、
4:13フォルスを返すだけです。
4:18入力だけでなく、計算結果も検証します。
4:21入力が両方とも安全な整数でも、合計が上限を超えることがあります。
4:26そこで加算した直後に、合計に対しても同じ判定を行い、範囲外ならレンジエラーを投げます。
4:33期待出力を確認しましょう。
4:35通常の百二十足す三十は百五十、ゼロ足すゼロはゼロで成功します。
4:40文字列と小数はタイプエラー、負数はレンジエラー、上限に一を足すケースもレンジエラーです。
4:47例外をケースごとに捕捉しているので、失敗例があっても次のケースへ進めます。
4:53入力検証だけで計算結果まで保証できるわけではない、という点がこの実例の中心です。
5:00精度低下の具体例です。
5:01上限の次の値と、さらに一を足した値を比べてみると、等しいという結果になります。
5:08右辺の整数を正確に表現できず、左辺と同じ数値になってしまうためです。
5:13つまりこの範囲では、隣の整数同士を区別できません。
5:17だからこそ、その値をイズセーフインテジャーで判定するとフォルスになります。
5:23識別子のような大きな数字を数値型で扱うと、別々の値が同じものとして処理される危険があります。
5:30大きな識別子は文字列のまま保持し、大きな整数の計算が本当に必要な場合は、
5:35ビッグイントなどの採用を検討してください。
5:39数値に変換してからでは、失われた情報は戻りません。
5:43判定の限界も知っておきましょう。
5:45たとえば、五にごく小さな小数部分が付いたリテラルは、数値になる段階で五に丸められます。
5:52メソッドが受け取るのは丸めた後の値なので、判定結果はトゥルーになります。
5:58元の表記に小数部分があったことは、判断できません。
6:02すでに起きた丸めは検出できないのです。
6:05そのため、外部データの正確さを保証するには、判定だけでなく受け渡し形式も設計する必要があります。
6:12文字列として受け取って検証するのか、最初から数値で受け取るのかを決めておくことが大切です。
6:19判定は最後の砦ではなく、境界のチェックの一つだと考えてください。
6:24フォーム入力との関係も注意が必要です。
6:27フォームの値は通常、文字列です。
6:30変換を許可する場合でも、どの表記を受け付けるかを先に決めてください。
6:36たとえば、空文字をナンバーで変換するとゼロになります。
6:41変換後の値だけを判定すると、空欄を数量ゼロとして受け入れてしまう可能性があります。
6:48記事の例では、関数が受け付ける値を最初から数値型に限定し、文字列からの変換規則を数量計算の中へ持ち込まない設計にしています。
6:58変換するなら、空欄や空白だけの入力を先に弾く、受け付ける形式を限定するといった前処理を、
7:03判定とは別に用意しましょう。
7:08変換と判定を分けることが、安全な設計につながります。
7:13活用場面とまとめです。
7:15この判定は、在庫の加算、処理済み件数の集計、整数単位の使用量管理など、通常の数値型で数量を扱う境界に適しています。
7:24画面側で確認すると入力ミスを早く伝えられますが、受信側でも同じ条件を検証してください。
7:31実務では、安全な整数の上限に加えて、業務上の最大値を設けると、エラーを理解しやすくできます。
7:38たとえば一回の追加数量を千以下に制限するなら、その条件も計算前に確認します。
7:44最後に点検の観点です。
7:46数量を受け取る箇所を一つ選び、型、整数の範囲、業務の範囲、計算結果の確認がそろっているかを確かめてみてください。
7:55お疲れさまでした。
7:56イズセーフインテジャーは、安全な整数かどうかを、入力と結果の両方で確かめるメソッドだと覚えておいてください。

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

この動画で学べること

Number.isSafeInteger()で数量の入力値と計算結果を検証する方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、期待出力、丸めによる精度低下と判定の限界を学べます。

解説記事・サンプルコードを読む：JavaScriptのNumber.isSafeInteger()：数量の入力値と計算結果を検証する →