導入
JavaScriptで数値を扱う際、最も基本的なデータ型である「Number」は一見シンプルですが、浮動小数点数ゆえの計算誤差や最大値の制限など、フロントエンド開発で思わぬバグを生む原因になることがあります。正しく理解することで、通貨計算や大規模なカウント処理など、数値の正確さが求められる現場で信頼性の高いコードを書けるようになります。
基礎知識
JavaScriptのNumber型は、IEEE 754という規格に基づいた「64ビット浮動小数点数」です。これは整数だけでなく、小数点を含む数値も同じ型で扱えるという利便性がある一方、二進数で表現できない小数が存在するため、計算結果がわずかにずれる性質があります。例えば、0.1 + 0.2 は 0.3 にならず、0.30000000000000004 となります。また、Number型には扱える最大値（Number.MAX_SAFE_INTEGER）があり、これを超える整数を扱う場合は「BigInt」という別の型が必要になることも覚えておきましょう。
実装/解決策
浮動小数点数の計算精度を保つためには、以下の手順が有効です。
1. 小数点以下の計算が必要な場合は、一度整数に変換して計算する。
2. 表示の際は toFixed() メソッドを使用して桁数を丸める。
3. 大きな整数を扱う際は BigInt を検討する。
4. 数値の妥当性をチェックするために Number.isNaN() や Number.isFinite() を活用する。
サンプルプログラム
以下のコードは、よくある計算誤差の解決例と、安全な数値チェックの例です。
// 1. 浮動小数点数の計算誤差を回避する方法
const a = 0.1;
const b = 0.2;
// そのまま足すと誤差が出る
console.log(a + b); // 0.30000000000000004
// 整数に一度変換してから計算して戻す手法
const fixedResult = (a 10 + b 10) / 10;
console.log(fixedResult); // 0.3
// 2. 安全な数値チェック
const input = "123a";
const num = Number(input);
// 数値かどうかを判定する
if (Number.isNaN(num)) {
console.log("これは数値ではありません");
} else {
console.log("数値です:", num);
}
// 3. 非常に大きな整数を扱う場合
const bigVal = BigInt("9007199254740991") + 1n;
console.log(bigVal.toString()); // 9007199254740992n
応用・注意点
現場での開発において、APIから取得した値が「文字列」として送られてくることは非常に多いです。Number()やparseFloat()を使う際は、必ず入力値が空文字やnullではないかを事前にチェックしてください。また、厳密な金融計算（ECサイトの決済処理など）を行う場合は、JavaScriptのNumber型だけで完結させず、サーバー側で計算を行うか、小数点を扱えるライブラリ（decimal.jsなど）の導入を検討するのが、フロントエンド・スペシャリストとしての賢い選択です。