SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのMath.round()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:21動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00今回はマスのラウンドを紹介します。
  3. 0:03これは、数値を最も近い整数へ丸めてくれる静的メソッドです。
  4. 0:08いわゆる四捨五入に近い働きで、計測値や平均点など、小数を含む値を表示用の整数にそろえたい場面でよく使います。
  5. 0:16この動画では、書き方と引数、記事の基本例、ちょうど半分のときの扱い、負の数の丸め、
  6. 0:21小数点以下の桁で丸める工夫、平均や金額への実例、そして浮動小数点の誤差への注意まで、
  7. 0:26実行結果と一緒に学びます。
  8. 0:31まずは全体像をつかみましょう。
  9. 0:33切り捨てのフロア、切り上げのシーリングとセットで覚えると、使い分けがしやすくなります。
  10. 0:40小数部分を見て近い方の整数を選ぶ、という単純なルールだからこそ、境目での決まりを正確に知っておくことが大切です。
  11. 0:49まず動作環境を確認します。
  12. 0:51ラウンドはマスオブジェクトに最初から備わる、歴史のとても長い機能です。
  13. 0:55クロームとファイアーフォックスでは一以降、サファリでは一以降、エッジでは十二以降で使えます。
  14. 1:01アンドロイド版クロームでは十八以降、アイオーエス版サファリでは一以降です。
  15. 1:06ノード・ジェイエスではゼロ・十・ゼロという古い版から対応しています。
  16. 1:11記事の互換性情報はエムディーエヌのデータに基づく目安です。
  17. 1:14現在使われている環境であれば、ほぼどこでもそのまま使えるでしょう。
  18. 1:19追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
  19. 1:23迷ったときは、対象の環境で小さいコードを一度実行して確かめるのが確実です。
  20. 1:28書き方を確認します。
  21. 1:30マスのあとにドットを書き、ラウンドとカッコを続けます。
  22. 1:35引数は丸めたい数値が一つだけです。
  23. 1:38複数の値を並べるマックスとは違い、一度に扱うのは一つの数値です。
  24. 1:43戻り値は、その数値に最も近い整数です。
  25. 1:46スライドの例では、三・七が四に、三・二が三になることを実機で確認しました。
  26. 1:53小数部分がゼロ・五ちょうどの場合は、正の無限大側、つまり大きい方の整数が選ばれます。
  27. 2:00この半分の場合の決まりが、後の負の数の話にも関わってきます。
  28. 2:05まずはこの基本の形を覚えてください。
  29. 2:08変数を渡しても、計算式を渡しても、その結果である数値が丸めの対象になります。
  30. 2:15記事の基本例を見ます。
  31. 2:16十二・六をラウンドで丸めて表示する、とても短いコードです。
  32. 2:20実行結果は十三で、ノードの実機結果とも一致しています。
  33. 2:24十二・六は、十二よりも十三に近いため、近い方の十三が選ばれたわけです。
  34. 2:29記事では、計測値の表示を整数にそろえる場面が想定されています。
  35. 2:33まずはこの例をブラウザーのコンソールかノードで実行し、入力を十二・四に変えたら十二になることも確かめてみてください。
  36. 2:41自分で予測してから実行する流れが、理解を深める近道です。
  37. 2:45なお、すでに整数の値を渡した場合は、そのまま同じ値が返ります。
  38. 2:49四捨五入の境目を詳しく見ます。
  39. 2:52正の数では、小数部分がゼロ・四以下なら切り捨て側、ゼロ・五以上なら切り上げ側に寄ります。
  40. 3:00スライドの通り、十二・四は十二に、十二・五は十三に、十二・六も十三になることを実機で確認しました。
  41. 3:08特に十二・五のような、ちょうど半分の値が上の整数になる点がポイントです。
  42. 3:14学校で習う四捨五入の感覚と、正の数の範囲では一致します。
  43. 3:19ただし、この半分の扱いは負の数では少し直感とずれるため、次のセクションで改めて確認します。
  44. 3:27境目の値ほど、先に小さい例で試す習慣が大切です。
  45. 3:31四捨五入という名前の通り、五以上は切り上げ、四以下は切り捨て、と覚えると分かりやすいでしょう。
  46. 3:39負の数の丸めを確認します。
  47. 3:41マイナス一・四はマイナス一に、マイナス一・六はマイナス二になります。
  48. 3:46ここまでは近い方を選ぶ感覚通りです。
  49. 3:49注意が必要なのは、ちょうど半分のマイナス一・五で、結果はマイナス二ではなくマイナス一になります。
  50. 3:56記事の境界例でもこの結果が示され、実機とも一致しました。
  51. 4:01理由は、半分の場合は常に正の無限大側、つまり数直線で右側の整数が選ばれるためです。
  52. 4:07なおマイナスゼロ・五の結果はマイナスゼロという特殊な値になります。
  53. 4:12負の温度や差分を扱うときは、この半分の決まりを必ず意識してください。
  54. 4:17学校で習う四捨五入では負の半分も大きさで考えることが多いため、ここは特に間違えやすいポイントです。
  55. 4:24ラウンドは整数への丸め専用ですが、掛け算と割り算を組み合わせると、好きな桁で丸められます。
  56. 4:32たとえば小数第二位まで残したい場合は、百倍してからラウンドし、百で割ります。
  57. 4:38スライドの例では、十二・五六七をこの方法で十二・五七にできることを実機で確認しました。
  58. 4:45十倍すれば小数第一位まで、千倍すれば小数第三位まで残せます。
  59. 4:50考え方はシンプルで、丸めたい桁を一時的に整数の位置へずらすだけです。
  60. 4:55ただし、この方法には浮動小数点の誤差が絡む場合があり、注意点として後ほど取り上げます。
  61. 5:02割合や割引率のように、小数第二位までで十分な表示が多い場面でよく使うテクニックです。
  62. 5:09実務に近い実例を二つ見ます。
  63. 5:12一つ目は平均点です。
  64. 5:14八十二、九十一、七十七の平均は八十三・三三と割り切れないため、ラウンドで八十三という表示用の整数にそろえました。
  65. 5:25二つ目は税込価格です。
  66. 5:27二千九百八十円に消費税率を掛けた結果を丸めると、三千二百七十八円になることを実機で確認しました。
  67. 5:37どちらも、計算そのものは小数で行い、最後の表示や確定の段階で整数へ丸める流れです。
  68. 5:45丸めるタイミングをどこに置くかで結果が変わる点は、次の注意にもつながります。
  69. 5:53引数が数値以外の場合の動きも知っておきましょう。
  70. 5:57数値の形をした文字列は、自動で数値に変換されて丸められます。
  71. 6:03スライドの例では、文字列の十二・六が十三になることを実機で確認しました。
  72. 6:09ヌルはゼロとして扱われます。
  73. 6:12一方、数値にできない値を渡すと、結果はナンという特別な値になり、引数を省略した場合もナンになります。
  74. 6:21無限大を渡した場合は、そのまま無限大が返ります。
  75. 6:26自動変換に頼ると意図しない結果を招くことがあるため、実務では渡す前に自分で数値へ変換し、
  76. 6:31検証しておく方が安全です。
  77. 6:36入力がフォーム由来の文字列の場合は、特にこの変換の有無を意識してください。
  78. 6:43注意点を二つ挙げます。
  79. 6:45一つ目は浮動小数点の誤差です。
  80. 6:48たとえば一・ゼロゼロ五を百倍すると、内部では百・四九九とわずかに小さい値になり、
  81. 6:55ラウンドしても一・ゼロ一にならず一のままになります。
  82. 7:01スライドと実機で確認した通りの結果です。
  83. 7:05金額の厳密な計算では、この誤差を前提に対策を考えてください。
  84. 7:10二つ目は集計の順番です。
  85. 7:13一件ずつ丸めてから合計する場合と、合計してから丸める場合では、結果が変わることがあります。
  86. 7:21記事でも規則の統一が呼びかけられています。
  87. 7:25チームや仕様で丸める時点を先に決めておきましょう。
  88. 7:30誤差が問題になる金額計算では、小数を使わず整数の単位で扱うなど、設計段階の工夫も検討してください。
  89. 7:39まとめです。
  90. 7:40ラウンドは、数値を最も近い整数へ丸めるメソッドです。
  91. 7:44判断のポイントは三つです。
  92. 7:46まず、ちょうど半分の場合は正の無限大側が選ばれるため、負の数ではマイナス一・五がマイナス一になること。
  93. 7:54次に、小数以下の桁で丸めたいときは、掛けてから丸めて割る方法が使えること。
  94. 8:00そして、浮動小数点の誤差と、集計の前後どちらで丸めるかの規則を先に決めることです。
  95. 8:06切り捨てたいときはフロア、切り上げたいときはシーリングと使い分けてください。
  96. 8:12まずは記事の基本例をコンソールで実行し、入力を一か所ずつ変えて結果を予測してみてください。
  97. 8:19お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Math.round()で最も近い整数へ数値を丸める方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのMath.round()の使い方：引数・戻り値・実例と注意点 →