【JavaScript】切り捨てとは？初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

皆さんがJavaScriptで数値を扱うとき、値を 切り捨て したいシーンは意外と多いのではないでしょうか。

金額表示や端数処理など、数値をそのまま使うのではなく「小数点以下を切り捨てたい」と考えることはよくあります。

いざ切り捨てを行おうと思ったとき、「どのメソッドを使うのが簡単なのか」「パフォーマンスはどうなのか」「正しく負の数にも対応できるのか」など、初心者の方は疑問を持つかもしれません。

そこでこの記事では、 JavaScriptで切り捨てを行う方法 を複数ご紹介します。

Mathオブジェクトの代表的なメソッドである Math.floor をはじめ、 parseInt やビット演算子を使った方法など、実務でも役立つテクニックとともに解説します。

数値の加工処理をしっかり理解しておくと、開発の幅が広がるでしょう。

ぜひ最後まで読んでみてください。

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

  • JavaScriptにおける切り捨ての基本
  • Math.floorの使い方と実務での応用例
  • parseIntやビット演算子を使った切り捨て方法
  • 負の数を扱うときの注意点とトラブル事例
  • 切り捨て以外の丸め方 (切り上げや四捨五入) との違い
  • 大規模開発での切り捨て実装に関する考え方

これらを理解すると、フロントエンドでもバックエンドでも、数値処理をどのように行うべきかイメージしやすくなります。

JavaScriptで切り捨てとは？

まずは「切り捨て」という用語を改めて確認しておきましょう。

切り捨ては、数値の小数点以下を全て取り除く（0にする）ことを指します。

よく使われる例としては「12.345 → 12」「-3.78 → -4」のように、小数点部分を消去して整数に変換するイメージです。

ただし、負の数の場合は見かけ上の挙動が少しわかりにくくなります。

たとえば -3.78 は小数点以下を「切り捨てる」と -3 になりそうですが、数学的にはより小さな（あるいは同じ）整数に丸められるので -4 になるという特徴があります。

JavaScriptのコード上でも、この挙動をどう扱うかはとても重要です。

実務では、商品価格の端数処理や、入力された数値を整数に変換したいときに切り捨てが活躍します。

また、ユーザーインターフェースの表示をスッキリさせたい場面でも「値は0.3秒だから0秒にして表示したい」といった実装が考えられます。

ここからは、その切り捨て処理を可能にする複数の方法を解説していきます。

Math.floorの基本

JavaScriptで切り捨てを行うとき、まず真っ先に思い浮かぶのが Math.floor です。

このメソッドは、引数として与えられた数値を 「その数以下の最大の整数」 に変換して返します。

つまり、プラスの数値であれば小数点以下を切り捨てた整数を、マイナスの数値であればさらに小さな整数側へと切り下げるイメージです。

例えば、以下のように書きます。

console.log(Math.floor(12.345)); // 12
console.log(Math.floor(-3.78));  // -4

小数点以下を単純に切りたい場合や、表示用に加工したいときに非常に便利です。

なぜMath.floorがよく使われるのか

わかりやすい名前

floor は「床」の意味を持ち、値を下の方向へ丸めるというイメージが直感的に伝わりやすいです。

計算結果が明確

引数がプラスでもマイナスでも結果が一貫しているため、特に特別な制御をしなくても使いやすいのが特徴です。

ソースコード上の見通しが良い

初見のエンジニアでも Math.floor を見れば「切り捨て処理なんだな」とすぐにわかります。

これらの理由から、多くのプロジェクトで切り捨て処理をするならまずは Math.floor が選ばれています。

ただし、後述のビット演算子を使った方法のように、場合によっては若干のパフォーマンス差があることも知られています。

しかし、大半のアプリケーション開発においては Math.floor だけで十分です。

次の見出しでは、この Math.floor を使って実務でよくある場面を簡単にご紹介します。

Math.floorの実務シーン例

切り捨て処理は、実際にどんな場面で活用されるのでしょうか。

いくつかのシーンを見ながら、どういった場面で便利なのかを具体的に考えてみたいと思います。

金額計算

たとえば商品の税込金額を計算した際、1円以下の端数が出てくることがあります。

const price = 1000;
const taxRate = 0.1; // 10%の税率
const total = price + (price * taxRate); // 1100.0になる

上の例では、計算がちょうど割り切れて端数が出ないかもしれませんが、実際には税率によっては小数点以下が発生することがあります。

そんなとき、最終的に顧客へ請求する金額を「小数点以下は切り捨てて1円単位にしたい」と考えることはよくあります。

その場合、次のようにするとシンプルに対応できます。

const rawAmount = price + (price * taxRate);
const finalAmount = Math.floor(rawAmount);

これで finalAmount は小数点以下が切り捨てられた整数として扱えます。

時間計測

プログラムの実行時間や処理時間を表示するときに、小数点以下を切り捨てて「秒」単位で表示したい場合があります。

秒数が細かく表示されてもユーザーにとってはわかりづらいこともあるため、 Math.floor を使ってシンプルに切り捨てると便利です。

const startTime = performance.now();

// 何らかの処理

const endTime = performance.now();
const elapsedMs = endTime - startTime; 
const elapsedSec = Math.floor(elapsedMs / 1000);
console.log(elapsedSec + '秒かかりました');

この例では、実務でUIに表示する時間を 整数秒 で表現したいときに役立つでしょう。

人数や在庫数の表示

ユーザー数や在庫数を表示する際に、もし何らかの計算で端数が出る可能性があるならば、実際には整数表記にまとめた方が読みやすい場合があります。

その際にも Math.floor は直感的で、パッと見たときに「端数がない値なんだな」と認識しやすくなるでしょう。

このように、実務の各シーンで Math.floor は多用されますが、JavaScriptには切り捨てを行う他の方法も存在します。

次の見出しからは、 parseInt やビット演算子を使った実装方法をご説明します。

parseIntによる切り捨て

JavaScriptでは、文字列を整数に変換するための parseInt 関数が用意されています。

一見すると「文字列を数値にする関数」という印象ですが、「小数点以下の部分を切り捨てる」という点で Math.floor と似たような結果を得ることができます。

使い方の例

console.log(parseInt("12.345", 10)); // 12
console.log(parseInt("3.78", 10));   // 3
console.log(parseInt("-3.78", 10));  // -3

このように、文字列として受け取った数値については小数点以下を削除して整数に変換してくれます。

ただし、 Math.floor と決定的に違うのは、 負の数に対する処理 です。

parseInt("-3.78", 10) は -3 を返しますが、 Math.floor(-3.78) は -4 を返します。

数値の切り捨てとしては、数学的な意味で「より小さい整数」に丸めたい場合が多いです。

そのため、負の数を扱う可能性がある場合は parseInt を使うと意図しない結果になることがあります。

実務での用途

実務では、 ユーザー入力が文字列で受け取られる場合 に parseInt が強みを発揮します。

例えばフォームから送信されたデータは文字列の形式が多いです。

その値を扱うとき、そもそも整数である必要があるならば最初から parseInt で受け取ってしまうのは効率的でしょう。

しかし、先ほど述べたように負の数を正しく丸める必要があるなら、 Math.floor との挙動差に注意してください。

つまり、 負の数が入り得ない (あるいは負の数を気にしなくてもいい) 前提であれば、 parseInt を簡易的な切り捨て処理として使うのも一つの手段となります。

ビット演算子による切り捨て

JavaScriptのビット演算子を活用した切り捨て方法も時々話題に上がります。

代表的なのが ビットOR演算子（|0） を用いるものです。

これは数値を32ビットの符号付き整数に変換するため、 小数点以下が自動的に切り捨て られるという仕組みを利用しています。

具体的なコード例

console.log(12.345 | 0); // 12
console.log(3.78 | 0);   // 3
console.log(-3.78 | 0);  // -3

この動きは parseInt と似ていて、負の数を「より小さい整数」に丸めるのではなく、単に小数点部分を削除するだけの結果になります。

そのため、 Math.floor(-3.78) = -4 とは挙動が異なることに注意してください。

なぜ使われるのか

ビット演算子による方法は、かつて一部の環境で「パフォーマンスがよい」とされていました。

しかし現在ではJavaScriptエンジンの最適化が進んでおり、 Math.floor と大差ないか、あるいはビット演算子の方が遅いケースもあると言われています。

また、 取り扱える値の範囲が32ビット整数に限定 されることも注意点の一つです。

極端に大きな数値や小数点以下の桁数が多い数値を扱うとき、意図しない結果になる可能性があります。

こうした理由から、ビット演算子による切り捨てはあまり推奨されませんが、JavaScriptの仕組みを知る上で覚えておくと便利なテクニックとも言えます。

こんな場面なら使うことも

  • 数値が32ビット整数を超えない確信がある
  • 処理対象がプラスの整数だけで、負の数はほぼ現れない
  • コードゴルフ（ソースコードを短く書くこと）が目的で、挙動が問題ない範囲

実際の業務では Math.floor を使っておく方が安全な場合がほとんどでしょう。

負の数の切り捨てにおける注意点

ここまでで「切り捨て」という処理が、プラスの数とマイナスの数とで異なる結果をもたらすことがわかりました。

もう少し負の数にフォーカスして解説しておきます。

Math.floorと負の数

Math.floor は「その数以下の最大の整数」であるため、負の数はさらに小さい方向へ丸めることになります。

console.log(Math.floor(-3.2)); // -4
console.log(Math.floor(-3.8)); // -4

これが「切り捨て」という言葉の本来の意味に忠実な挙動です。

parseIntやビット演算子と負の数

一方で parseInt("-3.8", 10) や (-3.8 | 0) は、 -3 という結果を返します。

これは「小数点以下を削除する」とき、単純に小数点部分を無視するだけで、数学的に床方向へ丸めているわけではありません。

数値計算的には「あくまで絶対値を短くしただけ」になるので、負の値を正確に切り捨てたいときには不適切かもしれません。

実務でのトラブル事例

例えば、請求金額をマイナスにすることはあまりないですが、在庫管理やポイント計算など、何らかの事情で負の値が計算式に登場するケースがあります。

そのとき、意図せず parseInt やビット演算子を使っていると、本来のロジックとズレる可能性があります。

結果的に、ユーザーに誤った値を表示してしまうかもしれません。

こういったトラブルを防ぐために、 切り捨てる場面で負の数が出る可能性があるかどうか をあらかじめ考えておくといいでしょう。

もし負の数が出るかもしれないのであれば、 Math.floor を使った方が安全です。

小数点以下を固定で切り捨てたい場合

実務では「小数点第2位までで切り捨てたい」「小数点第3位まで残して、それ以下は切り捨てたい」といった場面もあります。

Math.floor だけだと小数点以下がすべて切り捨てられてしまうので、もう少し工夫が必要です。

単純な方法：10のべき乗で掛けてから割り戻す

たとえば「小数点第2位までを残して切り捨てたい」場合は、次のように計算します。

  1. 数値に 100 をかける
  2. Math.floor で整数にする
  3. 結果を 100 で割る
function floorToSecondDecimal(num) {
  return Math.floor(num * 100) / 100;
}

console.log(floorToSecondDecimal(12.3456)); // 12.34
console.log(floorToSecondDecimal(-3.789));  // -3.79

注意点として、負の数では -3.79 のように結果が少し「より小さい方向」にずれるため、四捨五入ではなく「切り捨て」だと認識しておく必要があります。

この方法の実務での活用

  • 単価を計算して、2桁ぐらいまで残して表示したい場合
  • 誤差を大きくしたくないけど、小数点を長く表示するのは見栄えがよくないケース
  • 予測値や統計値をほどよく丸めたい場合

ただし、JavaScriptの浮動小数点計算には誤差の問題がつきまとうため、極めて厳密な金額計算などにはライブラリを活用することも検討してください。

今回は浮動小数点誤差に深く踏み込まず、「切り捨てるための計算手法」としての基本を押さえれば問題ないでしょう。

ショートコード例：小数第2位での切り捨て

もう少し短く書くとしたら、次のようにも書けます。

const floorToSecondDecimal = (num) => Math.floor(num * 100) / 100;

console.log(floorToSecondDecimal(12.3456)); // 12.34
console.log(floorToSecondDecimal(-3.789));  // -3.79

コードの長さは減りますが、やっていること自体は先ほどと同じです。

文字通り「100倍して Math.floor して 100 で割る」という流れになります。

桁数を変えたいときは、100の部分を1000や10に変えて応用することもできます。

小数点以下を固定桁数で切り捨てたいなら、こうした方法を覚えておくとよいでしょう。

大規模開発での切り捨て実装の注意点

ここまで紹介したように、JavaScriptには複数の切り捨て手段が存在します。

実務の中でもフロントエンドとバックエンドが分離していたり、多人数が共同開発したりすることが増えました。

そうなると「どのメソッドを選ぶのか」「負の数をどう扱うのか」「小数点以下の処理ポリシーは何か」を明確にしておかないと、バグや仕様違反につながるおそれがあります。

ルールの明文化

Math.floorを原則として採用

先ほども述べたように、数学的に正しい「床」方向への丸めをしてくれるためです。負の数にも対応しやすいでしょう。

parseIntやビット演算子の使用は原則禁止

特別な理由がある場合のみ、コメント付きで使用するなど、チーム内で明確な決まりがあると混乱を防ぎやすくなります。

小数点以下の処理についてレイヤーを分ける

単にビューを表示するだけならフロント側で丸めてもいいかもしれませんが、値を保持・管理する場合はバックエンドで厳密に数値を保持する方が安全なことが多いです。

実装を分散しない

何らかの計算をするときに、バックエンドとフロントエンドで別々に切り捨て処理を行うと、わずかな違いが原因で不整合が発生する可能性があります。

仕様策定の段階で「切り捨てはここだけで行う」といったルールを決めておき、各レイヤー間で値のやり取りをするほうが安全です。

そうすることで、「フロントとバックで結果が違う」という混乱を避けやすくなります。

テストやレビューの観点

切り捨てに限らず、数値の丸め処理が関わる場合はテストケースで「プラス」「マイナス」「0」「大きな数値」「小さな少数値」のように複数のパターンを網羅するのがおすすめです。

また、レビューの際には「実装方針として Math.floor を使っているか？」をチェックリストに入れるなど、事前に対策をしておくと品質が安定するでしょう。

切り捨て以外の丸め方との比較(切り上げ、四捨五入)

切り捨て以外にも、切り上げ (Math.ceil) や四捨五入 (Math.round) がよく使われる丸め処理です。

ここでは、ざっくりとした違いを押さえておきましょう。

切り上げ (Math.ceil)

Math.ceil は 「その数以上の最小の整数」 に丸めるメソッドです。

プラスの数であれば小数点以下を切り捨てるというより、「上に持ち上げる」感じになります。

例えば Math.ceil(3.2) = 4 となり、負の数なら Math.ceil(-3.8) = -3 になります。

プラスでもマイナスでも結果が「上方向」へ向くのが Math.ceil の特徴です。

四捨五入 (Math.round)

Math.round は数値を最も近い整数に四捨五入します。

  • Math.round(3.2) = 3
  • Math.round(3.5) = 4
  • Math.round(-3.5) = -3 (JavaScriptの場合は±0.5で正の方向へ丸めます)

四捨五入が必要なケースでは、切り捨てや切り上げとはまったく異なる結果になるので注意が必要です。

使い分けのまとめ

  • 端数を削除して一律で下方向に丸めたい → Math.floor
  • 端数を上方向に丸めたい → Math.ceil
  • 端数を最も近い整数にしたい → Math.round

こうした基本動作がわかっていれば、実務で値を適切に丸められます。

余談ですが、金額計算などで「四捨五入」するルールがある場合には、 Math.round を使ってあげるとシンプルに書けるでしょう。

まとめ

ここまで、 JavaScriptの切り捨て に関するいろいろな方法と注意点をお伝えしました。

Math.floor が最もよく使われる一方で、 parseInt やビット演算子による方法も知っておくと、「なぜ負の数で結果が違うのか」「どんな場面で使うべきか」などを深く理解できます。

実務では、負の値の扱い、端数処理の方針、他の丸め方式との混在など、考慮すべきポイントが多々あります。

特に、複数人での開発や、金額を取り扱うようなケースでは、丸め方を統一しないと不具合を生む危険性も大きいです。

切り捨てを正しく使いこなせると、アプリケーションでの数値の扱いがより明確かつ安全になるでしょう。

JavaScriptに慣れていない方も、まずは Math.floor を使った小さなサンプルから始めてみるといいかもしれません。

それでは、皆さんの開発において、今回の解説が少しでも参考になれば嬉しいです。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説