【JavaScript】四捨五入の方法を初心者向けに解説

はじめに

JavaScriptで数値を扱う場面では、四捨五入が必要になることが多いのではないでしょうか。
たとえば支払い金額の計算や統計グラフを描画するときなど、実務で数値を丸める処理はよく登場します。

JavaScriptではさまざまな方法で四捨五入を行うことができ、Math オブジェクトを使った標準的な方法のほか、細かい小数点処理や通貨表示のための工夫がいくつもあります。
それぞれを正しく理解することで、計算上のバグや意図しない結果を防ぐことが可能です。

ただ、JavaScript特有の浮動小数点数の扱いには注意が必要です。
ある計算結果を丸めるつもりが、思いがけない数値になることもあります。
本記事では、こうした問題を回避するためのアプローチや、より正確な計算を行うためのテクニックもあわせて紹介します。

そこで今回は、初心者でもわかりやすいように段階的に説明し、実務での利用シーンを具体的に示しながら、JavaScriptにおける四捨五入の方法を解説していきます。

この記事を読むとわかること

• JavaScriptで数値を丸めるうえで基本となるMathオブジェクトの使い方
• Math.floorやMath.ceilなど、さまざまな丸め方法の違い
• 小数点以下の桁数指定や、通貨単位など実務的な観点での利用方法
• JavaScript独特の浮動小数点数の注意点と回避策
• よくあるエラーやトラブルシューティングのポイント

これらを知っておくと、コードの可読性や保守性が高まるだけでなく、数値計算での致命的なミスを減らせる可能性があります。
それではさっそく、四捨五入の基本から見ていきましょう。

JavaScriptで四捨五入を行うには

JavaScriptでは、基本的にMathオブジェクトを使った丸め処理が最初の選択肢になることが多いです。
Math.roundをはじめとして、切り上げや切り捨てを行うMath.ceilやMath.floorなどがあります。

ただし、丸めのパターンは実務で使われるものだけでもいくつか種類があり、単純に「四捨五入」だけ行っていれば良いわけではありません。
以下では、代表的な丸め方法と、その使い分けを解説します。

Mathオブジェクトを使った基本的な四捨五入

JavaScriptの標準ライブラリとして提供されるMathオブジェクトは、さまざまな数学関数を用意しています。
四捨五入をするうえで、よく利用されるメソッドは以下のとおりです。

• Math.round: 四捨五入
• Math.floor: 切り捨て
• Math.ceil: 切り上げ
• Math.trunc: 小数点以下を単純に削除

こうしたメソッドによって、小数点以下の扱いが異なるため、用途に応じて適切なものを選ぶ必要があります。
それぞれの具体的な使い方を見ていきましょう。

さまざまな丸め方法

Math.floor

Math.floor は、小数点以下の値をすべて切り捨てて、整数部分だけを返します。
0.1でも0.999でも、どんな小数でも切り捨てるので、結果は常に「数値が小さく」なる傾向があります。

コピー
console.log(Math.floor(3.9));   // 3
console.log(Math.floor(-3.1));  // -4

また、負の数値の場合は結果が一段階小さくなる点に注意が必要です。
たとえば -3.1 は切り捨てると -4 になります。
これを知らずに使うと、意図しない結果になることがあるので、実際のコードに組み込む際には気をつけましょう。

Math.ceil

Math.ceil は、切り捨てではなく切り上げを行います。
小数点以下に値があれば、整数部をプラス1して返す動作です。

コピー
console.log(Math.ceil(3.1));   // 4
console.log(Math.ceil(-3.9));  // -3

負の値を処理するときに誤解しがちですが、-3.9 は整数部としては -3 と -4 の間になります。
ceil は「整数値以上に切り上げる」ため、-3 に向かって数値が大きくなる形で処理されます。
これも Math.floor とは逆の動きをするので、用途や期待する結果を考慮して使い分けることが大切です。

Math.round

Math.round は、四捨五入の代表的なメソッドです。
0.5以上なら切り上げ、0.4999以下なら切り捨てという、日常感覚に近い丸め方を行います。

コピー
console.log(Math.round(3.4));   // 3
console.log(Math.round(3.5));   // 4
console.log(Math.round(-3.5));  // -3

一般的な四捨五入のイメージに近い動きをしますが、境界値である .5 の処理については一部の言語やバージョンで異なるケースがあります。
JavaScriptの場合、単純に 3.5 は 4、-3.5 は -3 に丸められます。
この仕様を理解していないと、「-3.5が-4になる」と誤解することもあるため、注意したいポイントです。

Math.trunc

Math.trunc は比較的新しめに追加されたメソッドで、小数点以下を「単に切り落とす」動作を行います。
負数の場合でも、絶対値方向に小数を削るというイメージです。

コピー
console.log(Math.trunc(3.9));   // 3
console.log(Math.trunc(-3.9));  // -3

負の数値であっても、**「0に近い方向」**に小数点以下が落とされる点が特徴です。
floor や ceil と微妙に異なる結果になることがあるので、丸め方としてどれを採用するかは要検討となります。
たとえば、-3.9 を Math.floor すると -4、Math.trunc だと -3、というように異なるのです。

具体的な活用シーン

四捨五入や切り捨て、切り上げなどの丸め処理は、開発現場で多様なシーンに登場します。
ここでは代表的な例を見ていきましょう。

金額の表示

金額を扱うときは、1円単位や場合によってはより細かい単位での丸めが必要です。
日本円の場合は小数点以下がないケースが多いですが、海外通貨の計算や仮想通貨などを扱うときには、小数点以下の桁数を意図的に決めることがあります。

たとえば、以下のように1円未満を切り捨てる処理を行いたいときは、Math.floor を使うのが適しています。

コピー
function calcPrice(amount) {
  return Math.floor(amount);
}

console.log(calcPrice(1234.56)); // 1234

また、金額を整数で扱う場合でも、内部的には少数を扱っていたり、通貨換算で発生する端数を丸めたい場面も出てくるものです。
こうしたときは、数学的に正しい丸めを行うか、それとも切り捨てにするかで、最終的な売上や支払い額が変わってしまいます。
決済業務のように厳密さが求められる領域では、丸め方を事前にルールとして定め、そのルールをコードに落とし込むことが多いです。

グラフ表示

統計データやアンケート結果をグラフで可視化するときに、小数点以下が長く続いてしまうと、見た目が煩雑になりがちです。
そこで小数点以下を切り捨てたり、1桁だけ残したりすることで、ユーザーにわかりやすい形で数値を示すことができます。

たとえばWeb上でグラフを描画するときに、「割合を1桁までに丸める」というようなケースがあります。
そうした場合は Math.round(value * 10) / 10 のように、一旦数値を10倍して四捨五入してから10で割るというテクニックがよく使われます。

コピー
function roundToOneDecimal(value) {
  return Math.round(value * 10) / 10;
}

console.log(roundToOneDecimal(3.14159));  // 3.1
console.log(roundToOneDecimal(2.71828));  // 2.7

見た目を整えるだけでなく、数値としての意味をよりわかりやすくする効果もあるので、ユーザーに情報を提示するときに活躍するテクニックです。

小数点以下の桁数を指定するには

四捨五入というと、一見「整数にする」もののように思われがちですが、実務では小数点以下の桁数を特定の桁まで丸めたい場面も多々あります。
たとえば**「小数点以下2桁まで表示する」**や、「3桁まで切り捨てる」など、細かな指定が必要になることは珍しくありません。

数学的な方法

先ほど少し触れたとおり、整数にしたい範囲まで10倍、100倍などでスケーリングし、その後に Math.round や Math.floor を適用、最後にスケールを戻す方法が基本形です。
たとえば小数点以下2桁まで丸めたいときは、100倍してから四捨五入を行い、再び100で割ります。

コピー
function roundToTwoDecimals(num) {
  return Math.round(num * 100) / 100;
}

console.log(roundToTwoDecimals(123.4567)); // 123.46
console.log(roundToTwoDecimals(98.7654));  // 98.77

これにより、**いわゆる「通常の四捨五入」**を任意の桁で行えます。
切り捨てや切り上げでも同様に、Math.floor(num * 100) / 100 などの形で対応できます。

toFixedメソッドの活用

JavaScriptの数値には、数値を文字列としてフォーマットするtoFixedメソッドが用意されています。
number.toFixed(n) の形で呼び出すと、小数点以下をn桁に切り捨てた形で文字列として返してくれます。

コピー
let value = 123.456;
console.log(value.toFixed(2)); // "123.46"
console.log(value.toFixed(0)); // "123"

数値として扱う必要がある場合は、戻り値の文字列を parseFloat で再度数値にすることも可能です。
ただし、toFixed は四捨五入を内部的に行うという点に注意しましょう。
「小数点以下を単純に切り捨てたい」わけではなく、実際には四捨五入をしてくれます。

このため、たとえば(1.005).toFixed(2) のような値が意外な結果を返すケースもあります。
JavaScriptの浮動小数点演算の仕様上、内部で1.005を完全に表現しきれないことがあり、結果として "1.00" になるなどの現象が起こる場合があります。
こうした浮動小数点の誤差を理解したうえで、toFixed を利用するようにすると良いでしょう。

浮動小数点数の注意点

JavaScriptはIEEE 754という規格に基づいた倍精度浮動小数点数を採用しています。
これは非常に一般的な仕組みですが、「10進法を完全に表現できない」ケースがあることが知られています。
つまり、小数を正確に表せない誤差が生じやすく、これが原因で四捨五入したはずの結果が意図しない値になることがあるのです。

たとえば 0.1 + 0.2 が 0.30000000000000004 といった微妙な値になることは有名な話です。
四捨五入をするときにも、この誤差が影響するケースがあるため、実装段階で想定外の結果を生むことがあり得ます。

誤差を最小限にする工夫

浮動小数点の誤差を完全に取り除くことは困難ですが、最小限に抑えるための工夫はいくつか考えられます。
たとえば下記のようなアプローチです。

• 小数ではなく、整数で計算する
  • 金額や確率などを扱うときは、もともと小数点以下をまとめて整数に変換し、最後に必要なタイミングでスケールを戻す
• 専用のライブラリを使う
  • ビッグデシマルを扱うことができるライブラリで演算を行い、精度を管理する

いずれも、単純に Math.round や toFixed だけを使うよりも実装コストは上がりますが、誤差で大きな問題が起こるような場面では検討してみる価値があります。

ライブラリでの四捨五入方法

JavaScriptの標準機能だけでも、ある程度の四捨五入や丸めの処理は十分に行えます。
しかし、大きな数値を扱ったり、非常に細かい小数点精度が必要だったりする場合には、標準の浮動小数点演算を避けるケースもあります。
ここでは、ライブラリを用いたアプローチをいくつか紹介します。

Big.jsやdecimal.jsなどのビッグデシマル系ライブラリ

金融系システムや、大きな数値を扱う統計処理では、ビッグデシマル系ライブラリを利用して演算を行うことが多いです。
代表例として、decimal.js や big.js などがあります。
こうしたライブラリでは、数値を文字列ベースで保持し、10進数として正確に演算できるようになっています。

たとえば decimal.js を使うと、以下のように小数点以下の桁数を指定したり、丸めモードを選択したりすることができます。

コピー
/* 例としてのイメージコード */
import Decimal from "decimal.js";

let val = new Decimal("1.005");
let rounded = val.toDecimalPlaces(2, Decimal.ROUND_HALF_UP);
console.log(rounded.toString()); // "1.01" になることが期待される

このように、ライブラリが四捨五入の方式や桁数の管理を詳細にサポートしているので、整数部分や小数部分の取り扱い方を明示的に指定できます。
ただし、これらの外部ライブラリを導入する場合は、パフォーマンス面や学習コストなどを考慮しましょう。
必要以上に複雑にしてしまうと、メンテナンスの負担が増えかねないからです。

注意点とよくあるエラー

JavaScriptで四捨五入を取り扱ううえで、ありがちなトラブルや注意点をもう少し掘り下げて解説します。
実務における開発やデバッグで参考にしてください。

1. 0.5を境界とする挙動の誤解

四捨五入（Math.round）は 0.5 を分岐点とします。
しかし、-3.5 のような負の数値での処理を誤解していると、テストの結果と食い違いが出るかもしれません。

• -3.5 → -3
• -2.5 → -2

この結果に驚く人もいるため、あらかじめチームメンバーと共有しておくと混乱を防ぎやすいです。

2. 浮動小数点の誤差で予想外の結果

1.005 が 1.00 になったり、 0.1 + 0.2 が微妙にズレていたりと、よく話題になる浮動小数点の問題です。
こうした誤差があることを前提に設計し、必要なら整数演算やビッグデシマルを検討することが大事です。

3. toFixedの戻り値が文字列

toFixed は数値ではなく文字列を返すため、後続の計算をそのまま実行するとおかしな動きになる場合があります。
文字列を数値化するのを忘れて、意図せず文字列結合してしまうトラブルも少なくありません。

4. Math.floorやMath.ceilの負数処理

負数に対する丸めがプラスの方向と大きく異なる点も注意が必要です。
floor は「小さい方向」への丸めなので、-3.1 は -4 になり、ceil は -3 になるといった違いがあります。

5. ライブラリ導入の依存度

ビッグデシマルライブラリなどを安易に導入すると、プロジェクト全体で多数の箇所を修正する必要が出てくることがあります。
全員が同じライブラリの使い方を理解しなければならないので、チーム構成や納期を考慮しつつ判断することが重要です。

まとめ

ここまで、JavaScriptにおける四捨五入とその周辺の丸め方法について説明してきました。
実務では、単に四捨五入するだけでなく、切り捨て・切り上げや小数点以下桁数の指定など、さまざまな処理が必要になります。

また、JavaScript特有の浮動小数点数の誤差には十分気をつけなければなりません。
金額や確率など、誤差が大きな影響を与える場面では、ビッグデシマル系のライブラリを利用するのも選択肢の一つです。

四捨五入の方法を正しく理解し、使い分けることは、数値計算における正確さと信頼性を高めるために欠かせません。
基本的な Math.round や Math.floor、Math.ceil などはもちろん、小数点以下の桁数を制御するテクニックやライブラリの選び方も押さえておくと安心です。

皆さんの開発プロジェクトで、数値を扱う機会があれば、今回紹介したポイントを参考にしてみてください。
意図しない丸めや誤差が起きないように事前に設計を行い、最適な解法を取り入れることで、より安定したアプリケーションを実現できるはずです。