JavaScriptで数値を扱う際、計算結果を整数にまとめたり、特定の小数点以下の桁数で揃えたりするために四捨五入が必要になる場面は非常に多くあります。

標準的なJavaScriptには四捨五入を行うための組み込みメソッドがいくつか用意されていますが、求める精度や状況によって適切な手法を使い分ける必要があります。

基本的なMath.round関数の使い方から、実務で頻出する「小数点第n位での四捨五入」といった応用テクニックまでを詳しく解説します。

この記事を読み終える頃には、JavaScriptにおける数値の丸め処理を完璧にマスターし、浮動小数点数による誤差にも適切に対処できるようになるでしょう。

Math.round関数の基本的な使い方

JavaScriptで最も一般的に四捨五入を行う方法は、Math.round()関数を使用することです。

この関数は、引数として渡された数値に最も近い整数を返します。

端数が0.5以上の場合は切り上げられ、0.5未満の場合は切り捨てられます。

正の数と負の数での挙動の違い

正の数に対する挙動は直感的ですが、負の数を扱う場合には注意が必要です。

Math.round()は、一般的な算術的な四捨五入とは異なり、「正の無限大に近い方の整数」を優先します。

以下のコード例で、具体的な挙動を確認してみましょう。

JavaScript
// 正の数の四捨五入
console.log(Math.round(4.4));  // 4
console.log(Math.round(4.5));  // 5
console.log(Math.round(4.6));  // 5

// 負の数の四捨五入
console.log(Math.round(-4.4)); // -4
console.log(Math.round(-4.5)); // -4 (注意:-5ではない)
console.log(Math.round(-4.6)); // -5
実行結果
4
5
5
-4
-4
-5

特に-4.5-4になる点は、数学的な定義によっては「-5」を期待する場合があるため、実装時には留意してください。

任意の桁数で四捨五入する方法

Math.round()関数は整数を返すため、そのままでは「小数点第2位まで表示したい」といった要望には応えられません。

特定の桁数で四捨五入を行うには、一度桁をずらしてから四捨五入し、再び元の桁に戻すという手順を踏みます。

10のn乗を掛け合わせるテクニック

小数点第1位で四捨五入(整数化)したい場合は、そのままで問題ありません。

しかし、小数点第2位で四捨五入したい場合は、対象の数値を10倍してから四捨五入し、最後に10で割ります。

同様に、小数点第3位であれば100倍してから戻すという計算を行います。

JavaScript
const value = 123.456;

// 小数点第2位で四捨五入(小数第一位まで残す)
const result1 = Math.round(value * 10) / 10;
console.log(result1);

// 小数点第3位で四捨五入(小数第二位まで残す)
const result2 = Math.round(value * 100) / 100;
console.log(result2);
実行結果
123.5
123.46

汎用的な四捨五入関数の作成

毎回手動で計算式を書くのは非効率的であるため、任意の桁数を指定できる関数を定義しておくと便利です。

第一引数に数値、第二引数に残したい小数点以下の桁数を指定する形式が一般的です。

JavaScript
/**
 * 任意の桁数で四捨五入する関数
 * @param {number} num 対象の数値
 * @param {number} precision 残したい小数点以下の桁数
 */
function customRound(num, precision) {
  const factor = Math.pow(10, precision);
  return Math.round(num * factor) / factor;
}

console.log(customRound(1.2345, 2)); // 1.23
console.log(customRound(1.2345, 3)); // 1.235
実行結果
1.23
1.235

浮動小数点数の計算誤差への対策

JavaScriptを含む多くのプログラミング言語では、小数の計算に「IEEE 754」という規格を採用しています。

このため、「0.1 + 0.2」が「0.30000000000000004」になるといった微小な計算誤差が発生することがあります。

この誤差を含んだままMath.round()を行うと、期待しない結果を招く可能性があります。

Number.EPSILONを利用した精度補正

より精密な四捨五入を行いたい場合は、計算の過程でNumber.EPSILON(JavaScriptで扱える最小の正の数)を加算する方法が有効です。

これにより、浮動小数点数特有の丸め誤差の影響を最小限に抑えることができます。

JavaScript
function preciseRound(num, precision) {
  const factor = Math.pow(10, precision);
  // 微小な値を加えることで計算誤差を補正する
  return Math.round((num + Number.EPSILON) * factor) / factor;
}

console.log(preciseRound(1.005, 2));
実行結果
1.01

その他の丸め処理メソッドとの比較

四捨五入以外にも、数値を丸めるためのメソッドがJavaScriptには備わっています。

要件に応じて、切り上げ・切り捨て・符号無視の切り捨てを使い分けることが重要です。

Math.ceil、Math.floor、Math.truncの違い

  • Math.ceil(): 引数以上の最小の整数を返します(切り上げ)。
  • Math.floor(): 引数以下の最大の整数を返します(切り捨て)。
  • Math.trunc(): 数値の小数部分を取り除き、整数部分のみを返します。
Math.round (四捨五入)Math.ceil (切り上げ)Math.floor (切り捨て)Math.trunc (整数部のみ)
3.54433
-3.5-3-3-4-3

特に負の数を扱う際、Math.floor()Math.trunc()の結果が異なる点に注意してください。

Intl.NumberFormatによる高度な表示調整

単純な計算だけでなく、Webサイト上で「金額」や「パーセンテージ」として数値を整形して表示したい場合は、Intl.NumberFormatオブジェクトが非常に強力です。

このオブジェクトを使用すると、言語環境に応じた四捨五入とフォーマットを同時に行うことができます。

JavaScript
// 小数点第2位までに丸めて整形する
const formatter = new Intl.NumberFormat('ja-JP', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

console.log(formatter.format(1234.567));
実行結果
1,234.57

maximumFractionDigitsプロパティを指定することで、その桁数を超える部分が自動的に四捨五入されます。

ロケールに合わせたカンマ区切りなども自動で行われるため、UIへの表示目的であればこの手法が現在のJavaScriptにおける推奨事項です。

まとめ

JavaScriptで数値を四捨五入する方法は、用途によって最適なアプローチが異なります。

単純な整数の四捨五入であれば、Math.round()を使用するのが最も簡単です。

特定の小数点以下の桁数を扱いたい場合は、10の累乗を掛け合わせるか、計算誤差を考慮したヘルパー関数を作成するのが一般的です。

また、ユーザーに見せるためのフォーマットが必要な場合は、Intl.NumberFormatを活用することで、スマートに四捨五入と文字列整形を完結させられます。

浮動小数点数の特性を正しく理解し、プロジェクトの要件に合わせてこれらのメソッドを使い分けてください。