【JS応用|初心者向け】JavaScriptで数値を丸める!Math.round()の使い方をマスターしよう

導入

Webサイトやアプリケーションを開発していると、数値を扱って「四捨五入」したい場面に必ず出会います。例えば、商品の価格表示で小数点以下を切り捨てたり、計算結果を分かりやすい整数にしたいときなどです。

JavaScriptには、そんな数値を丸めるための便利な機能がいくつか用意されています。今回はその中でも最も基本的な「`Math.round()`」について、初心者の方にも分かりやすく解説していきます。`Math.round()`を使いこなせれば、数値を扱う上での基本的な悩みが解決できますよ!

基礎知識

Mathオブジェクトとは?

JavaScriptにおける`Math`オブジェクトは、数学的な定数(円周率 π など)や、さまざまな数学的関数(平方根、三角関数、そして数値を丸める関数など)を提供する特別なオブジェクトです。`Math`オブジェクトの機能を使うには、`Math.`の後に使いたい関数名や定数名を記述します。

Math.round()って何?

`Math.round()`は、`Math`オブジェクトが提供する関数の一つで、引数として与えられた数値を「四捨五入」して、最も近い整数を返します。

  • 小数点以下が0.5以上の場合は、切り上げて整数になります。
  • 小数点以下が0.5未満の場合は、切り捨てて整数になります。

この「0.5」が四捨五入の基準となる点がポイントです。

実装/解決策

`Math.round()`の使い方はとてもシンプルです。`Math.round()`のカッコの中に、四捨五入したい数値を入れます。

たとえば、`3.14`を四捨五入したい場合は、`Math.round(3.14)`と書きます。この場合、小数点以下が0.14なので0.5未満となり、切り捨てられて`3`が返されます。

一方、`3.78`を四捨五入したい場合は、`Math.round(3.78)`と書きます。この場合、小数点以下が0.78なので0.5以上となり、切り上げられて`4`が返されます。

サンプルプログラム

それでは、実際に`Math.round()`を使ってみましょう。以下のコードをコピーして、HTMLファイルに貼り付けてブラウザで表示してみてください。






Math.round()のサンプル


このコードを実行すると、ブラウザのコンソールとWebページ上に、それぞれの数値がどのように丸められたかを確認できます。特に、負の数の場合(`num6`)の挙動に注目してみてください。JavaScriptでは、`0.5`のちょうど中間にある負の数は、0から遠ざかる方向ではなく、0に近い方向に丸められる(この場合は-4)のが一般的です。

応用・注意点

`Math.round()`は非常に便利ですが、いくつか知っておくと良い点があります。

端数処理の「切り捨て」や「切り上げ」をしたい場合

`Math.round()`は四捨五入ですが、「常に切り捨てたい」場合は`Math.floor()`、「常に切り上げたい」場合は`Math.ceil()`を使います。これらの関数も`Math`オブジェクトに含まれています。

  • `Math.floor(4.7)` は `4` を返します(常に整数部分を返します)。
  • `Math.ceil(4.3)` は `5` を返します(小数点以下があれば常に切り上げます)。

小数点以下第2位などを丸めたい場合

`Math.round()`は整数にしか丸めてくれません。もし小数点以下第2位を四捨五入したい場合は、一度数値を10倍して`Math.round()`を適用し、その後10で割る、というテクニックが使えます。

例えば、`3.14159`の小数点以下第2位を四捨五入したい場合:

let pi = 3.14159;
let roundedPi = Math.round(pi 10) / 10; // (3.14159 10) は 31.4159 -> Math.round(31.4159) は 31 -> 31 / 10 は 3.1
console.log(roundedPi); // 出力: 3.1

意図しない結果になる可能性(浮動小数点数の誤差)

コンピュータは数値を内部で「浮動小数点数」という形式で扱っており、ごく稀に計算結果が理論値とわずかにずれることがあります。例えば、`0.1 + 0.2`は、JavaScriptでは`0.30000000000000004`のようになり、そのまま`Math.round()`を適用すると期待しない結果になることがあります。

このような場合は、数値を一度文字列に変換してから丸めたり、より精度の高いライブラリを使ったり、あるいは丸める前に微小な値を足すなどの工夫が必要になることもありますが、これは少し応用的な内容になります。まずは`Math.round()`の基本的な使い方をしっかりマスターしましょう!

これで、`Math.round()`を使って数値をきれいに丸めることができるようになりましたね!

タイトルとURLをコピーしました