一歩先のJavaScript四捨五入！7つの驚くべき使い方とサンプルコード

はじめに

JavaScriptで四捨五入を使う理由は様々ですが、主に数値を整形して表示する際に利用されます。

例えば、計算結果の小数点以下を丸めたり、金額計算で端数を処理する際に四捨五入が活躍します。

この記事では、JavaScriptで四捨五入を行う基本的な方法から応用例までを解説し、実用的なサンプルコードを提供します。

これを読めば、JavaScriptで四捨五入をマスターできるでしょう。

●JavaScriptで四捨五入を使う理由

四捨五入は数値を整形して表示する際に便利な機能です。

例えば、計算結果の小数点以下を丸めたり、金額計算で端数を処理する際に四捨五入が活躍します。

また、データの可視化やグラフ作成時にも、値を整形するために四捨五入が使われます。

●四捨五入の基本的な使い方

○Math.round()による四捨五入

JavaScriptで四捨五入を行うには、Math.round()関数を使います。

この関数は引数に与えられた数値を最も近い整数に四捨五入して返します。

let num = 3.5;
let rounded = Math.round(num); // 4
console.log(rounded);

上記のサンプルコードでは、変数numに3.5という数値を代入し、Math.round()関数を使って四捨五入した結果を変数roundedに代入しています。

結果は4となります。

●四捨五入の応用例

○サンプルコード2：小数点以下の桁数を指定して四捨五入

小数点以下の桁数を指定して四捨五入するには、次のようなコードを使用します。

function roundToDecimalPlace(num, decimalPlace) {
  let multiplier = Math.pow(10, decimalPlace);
  return Math.round(num * multiplier) / multiplier;
}

let num = 3.1415;
let rounded = roundToDecimalPlace(num, 2); // 3.14
console.log(rounded);

上記のサンプルコードでは、roundToDecimalPlaceという関数を定義しています。

この関数は、引数として数値と小数点以下の桁数を受け取り、指定された桁数で四捨五入します。

○サンプルコード3：四捨五入の結果を整数にする

四捨五入の結果を整数にするには、Math.round()関数を使用した後、parseInt()関数を使って整数に変換します。

let num = 3.5;
let rounded = parseInt(Math.round(num)); // 4
console.log(rounded);

上記のサンプルコードでは、数値3.5を四捨五入し、parseInt()関数で整数に変換しています。

○サンプルコード4：ユーザー入力によって四捨五入する桁数を変更

ユーザーからの入力に応じて四捨五入する桁数を変更するには、次のようなコードを使用します。

function roundToUserInput(num, userInput) {
  let decimalPlace = parseInt(userInput);
  let multiplier = Math.pow(10, decimalPlace);
  return Math.round(num * multiplier) / multiplier;
}

let num = 3.1415;
let userInput = prompt("Enter the number of decimal places to round to:");
let rounded = roundToUserInput(num, userInput);
console.log(rounded);

上記のサンプルコードでは、ユーザーから入力された小数点以下の桁数を使って四捨五入を行っています。

○サンプルコード5：グラフの値を四捨五入して表示

グラフに表示する値を整形するために四捨五入を使う例です。

function roundToDecimalPlace(num, decimalPlace) {
  let multiplier = Math.pow(10, decimalPlace);
  return Math.round(num * multiplier) / multiplier;
}

let graphData = [3.1415, 2.7182, 1.6180];
let roundedData = graphData.map((num) => roundToDecimalPlace(num, 2));

console.log(roundedData); // [3.14, 2.72, 1.62]

上記のサンプルコードでは、グラフに表示するデータを四捨五入して整形しています。

○サンプルコード6：配列の数値を一括で四捨五入

配列内の数値を一括で四捨五入するには、map()関数を使って配列の各要素に対して四捨五入を適用します。

function roundToDecimalPlace(num, decimalPlace) {
  let multiplier = Math.pow(10, decimalPlace);
  return Math.round(num * multiplier) / multiplier;
}

let numbers = [3.1415, 2.7182, 1.6180];
let decimalPlace = 2;
let roundedNumbers = numbers.map((num) => roundToDecimalPlace(num, decimalPlace));

console.log(roundedNumbers); // [3.14, 2.72, 1.62]

上記のサンプルコードでは、配列numbers内の数値を、指定した小数点以下の桁数で四捨五入しています。

●四捨五入の注意点と対処法

JavaScriptにおける四捨五入は、浮動小数点数による誤差が発生することがあります。

例えば、0.1 + 0.2を四捨五入しようとすると、正確に0.3にならないことがあります。

このような場合、toFixed()メソッドを使って誤差を回避できます。

○サンプルコード7：toFixed()メソッドを使った誤差の回避

let num = 0.1 + 0.2;
let rounded = parseFloat(num.toFixed(2)); // 0.3
console.log(rounded);

上記のサンプルコードでは、0.1 + 0.2の計算結果をtoFixed()メソッドを使って小数点以下2桁に丸めてから、parseFloat()関数で数値に変換しています。

まとめ

この記事では、JavaScriptでの四捨五入の基本的な使い方から応用例までを紹介しました。

サンプルコードを参考にしながら、あなたもJavaScriptで四捨五入を活用してみてください。

これであなたもJavaScriptの四捨五入を使いこなせるでしょう。