カテゴリー
お問い合わせ

【JavaScript】四捨五入・切り捨て・切り上げ！Math.round / floor / ceil の使い方

JavaScript
目次

JavaScriptでUIのアニメーションを作ったり、スクロール量を取得したりすると、「3.141592…」のような細かい小数を持つ数値（浮動小数点数）を扱うことがよくあります。 そのまま画面に表示すると見栄えが悪いため、整数に「丸める」処理が必要になります。

そんな時に大活躍するのが、JavaScriptに標準で用意されている Math オブジェクトのメソッドです！ 今回は、特によく使われる「四捨五入（round）」「切り捨て（floor）」「切り上げ（ceil）」の3つの基本的な使い方を、実際に数値を入力して結果を比較できるデモと合わせてご紹介します！

デモ動作

See the Pen JavaScriptの数値丸め処理まとめ by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コード紹介

【HTML】

<div class="l-wrap">
  <h2>Math関数の丸め処理 比較デモ</h2>
  <p class="p-desc">下の入力欄に好きな「小数」を入力して、結果を比較してみましょう！</p>
  
  <div class="p-demo-box">
    <!-- 入力エリア -->
    <div class="c-input-area">
      <label for="numInput">数値を入力：</label>
      <input type="number" id="numInput" class="c-input js-num-input" value="3.14" step="0.1">
    </div>

    <!-- 結果表示エリア -->
    <div class="c-result-grid">
      
      <!-- 1. 四捨五入 -->
      <div class="c-result-card">
        <h3 class="c-result-card__title">Math.round()</h3>
        <p class="c-result-card__desc">四捨五入</p>
        <div class="c-result-card__value js-val-round">3</div>
      </div>

      <!-- 2. 切り捨て -->
      <div class="c-result-card">
        <h3 class="c-result-card__title">Math.floor()</h3>
        <p class="c-result-card__desc">切り捨て</p>
        <div class="c-result-card__value js-val-floor">3</div>
      </div>

      <!-- 3. 切り上げ -->
      <div class="c-result-card">
        <h3 class="c-result-card__title">Math.ceil()</h3>
        <p class="c-result-card__desc">切り上げ</p>
        <div class="c-result-card__value js-val-ceil">4</div>
      </div>

    </div>
  </div>
</div>

【CSS】

/* ベース装飾 */
.l-wrap { 
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #3e3e3e;
  text-align: center;
}
h2 { 
  font-size: 16px;
  color: #1bb4d4;
  margin-bottom: 16px;
}
.p-desc { 
  font-size: 16px;
  font-weight: bold;
  color: #666;
  margin-bottom: 32px;
}

/* 入力エリア */
.p-demo-box { 
  background-color: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.c-input-area { 
  margin-bottom: 40px;
}
.c-input {
  padding: 10px 16px;
  font-size: 18px;
  border: 2px solid #ccc;
  border-radius: 6px;
  width: 150px;
  text-align: center;
}
.c-input:focus { 
  border-color: #1bb4d4;
  outline: none;
}

/* 結果表示グリッド */
.c-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.c-result-card {
  background-color: #f0f8ff;
  border: 1px solid #cce5ff;
  padding: 20px;
  border-radius: 8px;
}
.c-result-card__title { 
  font-size: 18px;
  font-weight: bold;
  color: #004085;
  margin-bottom: 6px;
}
.c-result-card__desc { 
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}
.c-result-card__value {
  font-size: 40px;
  font-weight: bold;
  color: #e83e8c;
}

【JavaScript】

// 入力欄と、結果を表示する各要素を取得
const numInput = document.querySelector('.js-num-input');
const valRound = document.querySelector('.js-val-round');
const valFloor = document.querySelector('.js-val-floor');
const valCeil = document.querySelector('.js-val-ceil');

// 計算と表示を更新する関数
const updateValues = () => {
  // 入力された値を数値として取得
  // (何も入力されていない場合は 0 として扱う)
  const inputValue = parseFloat(numInput.value) || 0;

  // 💡 1. 四捨五入 (Round)
  valRound.textContent = Math.round(inputValue);

  // 💡 2. 切り捨て (Floor)
  valFloor.textContent = Math.floor(inputValue);

  // 💡 3. 切り上げ (Ceil)
  valCeil.textContent = Math.ceil(inputValue);
};

// 入力欄の値が変わるたびに計算を実行する
numInput.addEventListener('input', updateValues);

コードの解説・仕組み

Math.round(数値) ＝ 四捨五入

小数点第一位が5以上なら切り上げ、4以下なら切り捨てます。

  • Math.round(3.5) は 4
  • Math.round(3.4) は 3

Math.floor(数値) ＝ 切り捨て

「floor（床）」という名前の通り、数値より小さい最大の整数を返します。

  • Math.floor(3.9) は 3
  • Math.floor(3.4) は 3

Math.ceil(数値) ＝ 切り上げ

「ceiling（天井）」が由来です。数値より大きい最小の整数を返します。

  • Math.ceil(3.1) は 4
  • Math.ceil(3.4) は 4

注意点：マイナスの値を扱うとき

デモの入力欄に -3.5 などのマイナスの値を入れてみてください。

  • Math.floor(-3.5) は -3 ではなく -4 になります！（より「小さい」整数に向かうため）
  • Math.ceil(-3.5) は -4 ではなく -3 になります！（より「大きい」整数に向かうため）

マイナス計算のときは直感とズレやすいので、マイナス座標などを計算する際は注意しましょう！

補足：小数第○位で四捨五入するには？

Math.round() は必ず「整数」に丸めてしまうため、そのままでは「小数第2位で四捨五入して、小数第1位まで残したい」といった指定ができません。

そんな時は、「一度桁をずらして四捨五入し、また元の桁に戻す」 という計算テクニックを使います！

【例1】小数第1位まで残したい（小数第2位を四捨五入）場合
10倍して四捨五入し、10で割ります。

const num = 3.14159;

// 1. 10倍する (31.4159)
// 2. 四捨五入する (31)
// 3. 10で割る (3.1)
const result = Math.round(num * 10) / 10; 
console.log(result); // 3.1

【例2】小数第2位まで残したい（小数第3位を四捨五入）場合
100倍して四捨五入し、100で割ります。

const num = 3.14159;

// 1. 100倍する (314.159)
// 2. 四捨五入する (314)
// 3. 100で割る (3.14)
const result = Math.round(num * 100) / 100; 
console.log(result); // 3.14

※豆知識（.toFixedメソッド）
ちなみに、計算ではなく「単に画面に表示する文字列として整えたい」だけであれば、数値型のメソッドである num.toFixed(1) （小数第1位まで表示）を使うのも非常に定番です。状況に合わせて使い分けてみましょう！

補足：公式ドキュメント

より詳細な仕様や他の活用例について知りたい方は、ぜひMDNの公式ドキュメントもチェックしてみてください！

・MDN: Math.round()
・MDN: Math.floor()
・MDN: Math.ceil()

まとめ

今回はJavaScriptの Math オブジェクトを使った、基本的な数値の丸め処理について解説しました。

画面に分かりやすく数値を表示するための Math.round() や、ランダムな整数を生成する時（Math.random() との組み合わせ）によく使われる Math.floor() など、フロントエンドの開発ではどれも必須の知識です。

言語側で標準で用意されている便利な関数は積極的に使って、バグの少ないスマートなコードを書いていきましょう！

Prev
Next

関連記事