【JavaScript】小数点を切り捨てる方法を初心者向けに解説

はじめに

JavaScriptの数値処理で悩ましいと感じるポイントとして、小数点以下の扱いが挙げられることが多いのではないでしょうか。
たとえば商品価格の表示を整数だけにしたい場合や、計算結果を意図的に切り捨てたい場面があります。
こういったときに使われる方法はいくつか存在し、利用するメソッドや演算子によって挙動が異なることも少なくありません。
そのため、初心者の方は「どれを使えばいいの？」と迷う場面があるかもしれません。

本記事では、JavaScriptで小数点以下を切り捨てる代表的な方法を整理し、それぞれの特徴や活用シーンを解説していきます。
また、実務で遭遇しやすいケースとあわせて理解を深め、うまく使い分けられるようになることを目指します。

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

• 小数点切り捨てを行う代表的な方法と、その違い
• Math.floor と Math.trunc の使い分け
• ビット演算子 を使った切り捨てのメリットと注意点
• parseInt で小数点を無視する仕組み
• 実務での利用シーンと、想定される問題点への対処方法

小数点切り捨てが必要になる主な場面

小数点切り捨てが必要になる理由はさまざまです。
たとえば、金額を扱うECサイトでは値段表示を整数化する場面がよくあります。
また、ユーザーに入力させる数値を使って計算したあと、端数が発生するのを防ぎたいシーンもあるでしょう。

具体例としては、以下のようなケースが考えられます。

商品価格や割引額の表示

フロントエンド上のUIで小数点まで表示すると、ユーザーが混乱してしまうことがあります。
あえて整数表示に統一することで、購買意欲に影響を与えにくくする狙いがあります。

単価×数量による合計金額の計算

開発の現場では、ユーザーが入力した数量と単価を掛け合わせて価格を計算するケースがあります。
このとき、あえて切り捨てることで「想定外に小数点以下がついてしまう」状況を避ける意図があります。

ゲージや進捗率などのUI表示

たとえば進捗率を丸めて表示すると、利用者にとって感覚的に分かりやすくなることがあります。
ただし、100%に近い数字のときの扱いには注意が必要です。

こうした場面で「小数点を切り捨てる方法を知っておくかどうか」は、アプリケーションの使いやすさにも影響を与えます。
では、JavaScriptの実装ではどのような選択肢があるのでしょうか。

Math.floorを使った切り捨て

JavaScriptで小数点を切り捨てる際に、まず思い浮かぶのが Math.floor ではないでしょうか。
Math.floor は、その名の通り「床」関数を意味し、渡した数値の小数点以下を取り除いて「一番近い下限（より小さい整数）」に丸めます。

Math.floorの基本的な使い方

コピー
const valueA = 3.7;
const resultA = Math.floor(valueA);
console.log(resultA); // 3

const valueB = -1.2;
const resultB = Math.floor(valueB);
console.log(resultB); // -2

正の数値の場合は単純に小数点を切り捨てます。
しかし負の数値に対しては、直感的に「小数点以下をカットする」挙動とは違い、「より小さい整数」に丸めるため -2 となります。
この点を理解していないと、負の数を扱う計算で意図しない結果が出てしまうかもしれません。

実務では、たとえば在庫数の計算などで負の値が生じることはあまりないかもしれませんが、割引計算などで負の数値を扱う機会がないとも限りません。
Math.floor を使う際には、正負両方のケースを想定して挙動を把握しておくことが大切です。

Math.truncを使った切り捨て

Math.trunc は、数値の小数点以下を単純に取り除く（切り捨てる）メソッドです。
負の数値に対しても絶対値をカットしたかのように扱うため、「0に近い整数」を返す点が特徴です。

Math.floorとの違い

以下のコード例を見てみましょう。

コピー
const valueC = -1.2;
const floorResult = Math.floor(valueC);
console.log(floorResult); // -2

const truncResult = Math.trunc(valueC);
console.log(truncResult); // -1

前述のように、Math.floor(-1.2) は -2 になります。
一方で、Math.trunc(-1.2) は -1 を返します。
この違いは、負の数値をどのように丸めたいかで使い分ける必要があるということです。

たとえば、計算結果が -1.2 のとき「小数点を取り除いて -1 にしたいのか、それともより小さい -2 にしたいのか」は要件次第といえます。
取り除くという日本語のニュアンスに近いのは Math.trunc ですが、金額の計算では「実質多く請求しないためにMath.floorを使う」という選択もあるでしょう。

Math.trunc は比較的新しい実装方法として注目されることがあり、コードの可読性も高いです。
しかし、一部の古い環境ではサポートされていない可能性があるため、必要に応じてポリフィルを検討するケースもあるかもしれません。
（ただし環境によっては既に問題なく使える状況が多いでしょう。）

ビット演算子を使った切り捨て

JavaScriptには、ビット演算子を利用して小数点以下を除去できるテクニックがあります。
たとえば二重否定（~~）やパイプ演算子（|0）などが有名です。
これらは数値を32ビット整数として解釈する特性を利用し、小数点を強制的に切り捨てます。

二重否定演算子（~~）

コピー
const valueD = 5.999;
const truncatedD = ~~valueD;
console.log(truncatedD); // 5

~~valueD と書くことで、強制的に32ビット整数に変換され、結果として小数点以下が削除されます。
この方法は手軽な一方で、32ビット整数の範囲を超える数値に対しては意図しない結果を生む可能性がある点に注意しなくてはなりません。

このように、ビット演算子は高速に小数点を除去できる利点もありますが、対象となる値によって結果が変わるため、慎重に使う必要があります。
もし扱う値が32ビットの範囲内に十分収まるなら有効な手段です。

パイプ演算子（|0）

~~value と同様に value | 0 と書くことでも小数点が切り捨てられます。
処理の仕組みはほぼ同じなので、二重否定との違いはそこまで大きくありません。
こちらも大規模な数値を扱う場合はオーバーフローのリスクがあるため、用途を見極めたうえで使いましょう。

parseIntを使って文字列から整数を取り出す

JavaScriptには、文字列から整数を取り出すための parseInt 関数も存在します。
一見、小数点以下の切り捨てとは直接関係なさそうですが、実は「数値を文字列に変換してから整数部分のみ再取得」することで、結果的に小数点を切り捨てるアプローチを取ることができます。

コピー
const valueE = 3.14;
const stringE = valueE.toString(); 
const parsedE = parseInt(stringE, 10);
console.log(parsedE); // 3

この例は変換処理が多く、パフォーマンス観点ではあまり推奨されません。
しかし、実務で文字列としてAPIレスポンスを受け取るケースや、フォーム入力を文字列で扱う場面もあります。
そういった状況では parseInt が自然な選択肢になることもあります。

ただし、文字列の先頭に空白や余計な文字が含まれていると結果が予測不能になる場合もあるため、事前にバリデーションを行うことが望ましいでしょう。
また、 parseInt は指定した基数でパースするため、意図しない基数が使われないように第2引数を指定するほうが安全です。
JavaScriptで普通の10進数を扱う場合は parseInt(string, 10) と書くクセをつけるといいかもしれません。

負の数値を扱うときの注意点

小数点切り捨てのメソッドは、負の数値に対して異なる挙動を示す可能性があります。
とくに、Math.floor と Math.trunc では明確に結果が変わります。

たとえば、在庫がマイナスになる状況そのものはまれでも、データの扱いによって想定外にマイナス値を持つフィールドに触れてしまう可能性もゼロではありません。
そのようなときは想定したメソッドを慎重に選定することが求められます。

また、負の数を意図的に扱うような数値シミュレーションでも、 Math.floor(-1.7) が -2 になるか -1 になるかは大きな違いを生む場合があります。
結果の検証を怠らないようにしましょう。

実務での活用シーンと具体例

では、実際の開発でどのように活用するのでしょうか。
よくあるケースをいくつか挙げてみます。

ECサイトの価格計算

フロントエンド側で商品価格の合計を表示したいとき、たとえば端数が出てしまうことがあります。
ユーザーに金額を提示するときは切り捨てて整数表示することで見た目が分かりやすくなるでしょう。
この場合、Math.floor もしくは parseInt などで対応するケースが多いです。

また、もし値引き額がマイナスになったらどうなるのかという検討も必要です。
割引計算のロジック次第では、負の数値を扱うこともあり得るため、メソッド選びには慎重さが求められます。

UI上の進捗バーなど

進捗率を表すUIで小数点以下を出すと、微妙に数字が揺れ動いてしまい、利用者が混乱するかもしれません。
そのため、整数に固定して表示したい状況で、 Math.trunc や Math.floor を使うことがあります。

ただし、例えば 99.9% を小数点以下切り捨てして 99% と表示すると、ユーザーが「進捗があと少しで100%なのにいっこうに終わらない」と思ってしまうかもしれません。
したがって、何をいつ切り捨てるかというタイミングや、四捨五入のほうが適切な箇所があるかどうかは、要件によって異なります。

スクロール位置や座標の処理

マウス座標やスクロール量などを整数化したい場面もあります。
ブラウザ上の要素を扱うとき、小数点がある座標は無視する場合が多いです。
CSSでピクセル指定をするときにも整数値が便利になることがあります。

ただし、CSSの指定に小数点を使って滑らかなアニメーションを行う例もあるので、一概に切り捨てがいつも正しいとは言い切れません。
用途に応じて使い分けが必要です。

切り捨て以外の丸め方法との違い

小数点以下の処理には、切り捨てだけでなく 切り上げ (Math.ceil) や 四捨五入 (Math.round) などもあります。 実務で切り捨てを選択する理由としては、請求や在庫計算において「余計に多く提示しない」「在庫を水増ししない」といった方針がある場合が多いです。

しかし、四捨五入が必要な場面や、切り上げが必要な場面も決して少なくありません。
たとえば送料の計算で、容積や重さを一定以上になったら切り上げるといったこともあります。
そのため、本当に求めているのが「小数点以下を削除すること」なのか「多めに見積もること」なのかなど、要件定義に即してメソッドを使い分けましょう。

実装単位で「切り捨て」だと思い込んでいたら、実は「最終的に四捨五入がしたかった」と後から気づくこともあります。
早めに確認しておけば、工数を大幅に減らすことができるでしょう。

浮動小数点演算と誤差の問題

JavaScriptは二進数をベースとした浮動小数点演算を行うため、 0.1 + 0.2 = 0.30000000000000004 というように誤差が生じることがよく知られています。
この誤差がある状態で「小数点以下を切り捨てる」処理をすると、思いがけない値が返ってくる場合があります。

たとえば本来は 0.3 になるはずが、計算上 0.29999999999999993 となり、 Math.floor を適用すると 0 になる、といったことが起こり得ます。
このようなケースを完全になくすには、そもそも浮動小数点ではなく、専用のライブラリで小数を扱うといった方針を検討することも有効です。
しかし、そこまで複雑ではないアプリケーションなら、ある程度誤差を許容して進めるほうが実装は簡単です。

この問題は切り捨てに限らず、あらゆる小数演算に影響を与えます。
実務では「小数点が付く計算」自体をどう扱うかを設計段階で慎重に決める必要があります。

性能面の考慮

JavaScriptで小数点を切り捨てる方法はいくつかありますが、どれも非常に大規模に反復しない限り、そこまで大きなパフォーマンス差は感じられないかもしれません。
ただ、ビット演算子を利用した方法は一見高速だともいわれており、一部で使われることがあります。

ただし、先述のようにビット演算子は数値の範囲が限られるため、安易に大量の数値を扱うシステムに導入すると不具合の原因になりかねません。
一方、Math.floor や Math.trunc はコードの可読性が高く、範囲外の数値を扱っても安全に動作します。

実務では「保守のしやすさ」「バグの起きにくさ」を優先することも多いので、よほどの理由がない限りは Math.floor や Math.trunc を使う方が安心でしょう。
ただし、大規模アプリケーションで頻繁に数値計算を行う場合は、全体の最適化を検討したり、バンドルサイズや演算回数を減らす取り組みも同時に進めていくほうが得策です。

切り捨て方法の選択ガイド

ここまで紹介してきたメソッドや演算子の使い分けを、簡単にまとめてみましょう。

• Math.floor

  • 正の数だけを扱うならシンプルに小数点以下をカットできる
  • 負の数が含まれるときには「より小さい整数」に丸めるため注意
  • 金額計算やUI表示などで幅広く使われる

• Math.trunc

  • 負の数も「小数点以下を単純に削除」する
  • 直感的に「小数点を削除する」用途に合う
  • 古い環境では使えない可能性があるため注意

• ビット演算子 (~~ / |0)

• 32ビット整数に変換することで小数点を除去

• 範囲内であれば高速かつ短いコードで実装できる

• 範囲外の数値に対してはオーバーフローを起こしやすい

• parseInt

  • 文字列から整数を切り出すための関数
  • UI入力やAPIレスポンスが文字列の場合に自然な使い方ができる
  • 数値→文字列→数値という工程が挟まるため、計算上はやや非効率

このように、それぞれの特徴を理解したうえで選択することが大切です。
「安全に幅広い数値を扱いたい」「負の数の扱い方を分かりやすく示したい」など、要件に合わせて使い分けましょう。

まとめ

JavaScriptで小数点を切り捨てる方法は、思った以上に多彩です。
代表的なものとして Math.floor や Math.trunc、そしてビット演算子によるテクニックなどが挙げられます。

それぞれのメソッドは、負の数値をどう扱うかが違ったり、扱える数値の範囲が限定されたりします。
金額や在庫数などの重要なデータを扱う場合は、思わぬバグを生まないように要件と照らし合わせながら慎重に選択することが大切です。

実務でよく使われるのは Math.floor であり、次いで Math.trunc も負の数を単純にカットしたいときには便利でしょう。
また、ビット演算子を使う方法は上級者向けで、パフォーマンスやコードの短さを求める場面では有効です。
ただし大きな数値を扱う可能性があるときは注意が必要です。

本記事を通じて、JavaScriptでの小数点切り捨てがどのような仕組みで行われているのかを把握できたのではないでしょうか。
一見シンプルに見える処理ですが、負の値への対応やオーバーフローのリスクなど、気をつける点は少なくありません。
ぜひ開発や学習の参考にしていただければと思います。