JavaScript割り算の商（整数）と余りの取得方法10選

JavaScriptで割り算の商と余りを求める方法JS
この記事は約23分で読めます。

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、常に解説内容のわかりやすさや記事の品質に注力しておりますので、不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptでの割り算の基本

JavaScriptで割り算を行う際、商と余りを求めることは非常に重要なスキルです。

初心者の方にとっては少し難しく感じるかもしれませんが、基本的な演算子を理解することから始めましょう。

JavaScriptで割り算を行う際、基本的に使用する演算子は2つあります。

それが「/」と「%」です。

○割り算の演算子/ と %

「/」は商を求める演算子で、割り算の結果を返します。

一方、「%」は剰余演算子と呼ばれ、割り算の余りを求めるために使用します。

これらの演算子を使って、商と余りを求めてみましょう。

○サンプルコード1：商と余りを求める

const dividend = 10; // 被除数
const divisor = 3; // 除数

const quotient = dividend / divisor; // 商
const remainder = dividend % divisor; // 余り

console.log(`商: ${quotient}`);
console.log(`余り: ${remainder}`);

実行結果

商: 3.3333333333333335
余り: 1

このサンプルコードでは、被除数をdividend、除数をdivisorとして定義しています。

そして、/演算子を使って商を求め、%演算子を使って余りを求めています。

商は3.3333333333333335、余りは1という結果が得られました。

ここで注目すべきは、商が小数点以下まで表示されている点です。

○整数の割り算と小数の割り算の違い

JavaScriptでは、整数と小数の区別なく割り算を行うことができます。

上記の例では、dividendとdivisorはどちらも整数ですが、商は小数点以下まで計算されています。

これは、JavaScriptが自動的に整数から浮動小数点数に変換して計算を行うためです。

もし、商を整数のみで求めたい場合は、Math.floor()やMath.trunc()などの関数を使って小数点以下を切り捨てる必要があります。

以上が、JavaScriptにおける割り算の基本的な概念と使い方です。

商と余りを求めるために、/と%演算子を使い分けることが重要ですね。

次は、小数点以下の桁数を指定して四捨五入する方法について見ていきましょう。

●小数点以下の桁数を指定した四捨五入

JavaScriptで割り算を行うと、結果は小数点以下まで表示されることがありますが、実際のアプリケーション開発では、小数点以下を丸めて表示したいケースがよくあります。

そんな時に活躍するのが、Math.round()メソッドです。

○Math.round()メソッド

Math.round()は、与えられた数値を最も近い整数に丸めるメソッドです。

具体的には、小数点以下が0.5以上の場合は切り上げ、0.5未満の場合は切り捨てられます。

使い方はとてもシンプルで、Math.round(数値)のように記述するだけです。

これだけで、数値を四捨五入することができます。

○サンプルコード2：小数点第2位で四捨五入

では、小数点以下第2位で四捨五入してみましょう。

Math.round()メソッドと組み合わせるのが、toFixed()メソッドです。

toFixed()は、数値を指定した桁数の文字列に変換するメソッドで、引数に桁数を指定します。

ただし、このメソッドは文字列を返すので、Number()で数値に変換する必要があります。

const number = 3.14159;
const rounded = Number(Math.round(number * 100) / 100).toFixed(2);

console.log(rounded);

実行結果

3.14

このサンプルコードでは、numberに3.14159を代入しています。

この数値を小数点第2位で四捨五入するために、次の手順を踏みます。

  1. numberに100を掛けて314.159にする
  2. Math.round()で四捨五入し、314にする
  3. 100で割って、3.14にする
  4. toFixed(2)で小数点第2位までの文字列にする
  5. Number()で数値に変換する

この一連の流れで、3.14159が3.14に四捨五入されました。

toFixed()の引数を変えることで、任意の桁数で四捨五入することも可能です。

○サンプルコード3：任意の桁数で四捨五入

先ほどのサンプルコードを応用して、任意の桁数で四捨五入できるように改良してみましょう。

function roundToDecimal(number, decimalPlaces) {
  const factor = Math.pow(10, decimalPlaces);
  return Number(Math.round(number * factor) / factor).toFixed(decimalPlaces);
}

console.log(roundToDecimal(3.14159, 2)); // 3.14
console.log(roundToDecimal(3.14159, 3)); // 3.142
console.log(roundToDecimal(3.14159, 4)); // 3.1416

このroundToDecimal()関数は、第1引数に四捨五入する数値、第2引数に小数点以下の桁数を指定します。

関数内部では、Math.pow()を使って10のdecimalPlaces乗を計算し、これをfactor変数に代入しています。

後の処理は、サンプルコード2と同様ですが、toFixed()の引数にdecimalPlacesを指定することで、任意の桁数で四捨五入が行われます。

実行結果を見ると、3.14159が指定された桁数で正しく四捨五入されていることがわかります。

このように、Math.round()とtoFixed()を組み合わせることで、柔軟に小数点以下の桁数を操作できます。

●小数点以下の切り上げと切り捨て

JavaScriptで割り算を行う際、小数点以下を四捨五入する以外にも、切り上げや切り捨てを行いたいケースがあります。

そんな時に使えるのが、Math.ceil()とMath.floor()です。

○Math.ceil()とMath.floor()

Math.ceil()は、与えられた数値以上の最小の整数を返すメソッドです。

つまり、小数点以下を切り上げます。

一方、Math.floor()は、与えられた数値以下の最大の整数を返すメソッドで、小数点以下を切り捨てます。

どちらのメソッドも使い方はシンプルで、Math.ceil(数値)またはMath.floor(数値)のように記述するだけです。

○サンプルコード4：小数点以下を切り上げ

早速、Math.ceil()を使って小数点以下を切り上げてみましょう。

const number1 = 3.14;
const number2 = -3.14;

console.log(Math.ceil(number1)); // 4
console.log(Math.ceil(number2)); // -3

このサンプルコードでは、正の数3.14と負の数-3.14を用意しました。

Math.ceil()にnumber1を渡すと、4が返ってきます。

これは、3.14以上の最小の整数が4だからです。

一方、number2を渡した場合は-3が返ってきます。

負の数の場合、-3.14以上の最小の整数は-3となります。

○サンプルコード5：小数点以下を切り捨て

次に、Math.floor()を使って小数点以下を切り捨ててみましょう。

const number1 = 3.14;
const number2 = -3.14;

console.log(Math.floor(number1)); // 3
console.log(Math.floor(number2)); // -4

number1をMath.floor()に渡すと、3が返ってきます。

3.14以下の最大の整数は3ですね。

number2の場合は、-4が返ってきます。

-3.14以下の最大の整数は-4となります。

これらのメソッドを使えば、小数点以下を簡単に切り上げたり切り捨てたりできます。

○サンプルコード6：任意の桁数で切り捨て

Math.floor()とMath.pow()を組み合わせることで、任意の桁数で切り捨てることもできます。

function floorToDecimal(number, decimalPlaces) {
  const factor = Math.pow(10, decimalPlaces);
  return Math.floor(number * factor) / factor;
}

console.log(floorToDecimal(3.14159, 2)); // 3.14
console.log(floorToDecimal(3.14159, 3)); // 3.141
console.log(floorToDecimal(3.14159, 4)); // 3.1415

このfloorToDecimal()関数は、第1引数に切り捨てる数値、第2引数に小数点以下の桁数を指定します。

関数内部では、Math.pow()を使って10のdecimalPlaces乗を計算し、これをfactor変数に代入します。

そして、numberにfactorを掛けて整数部分を切り出し、Math.floor()で切り捨てます。

最後にfactorで割ることで、指定した桁数で切り捨てられた数値が得られます。

実行結果を見ると、3.14159が指定された桁数で正しく切り捨てられていますね。

このように、Math.ceil()とMath.floor()を使いこなせば、小数点以下を自在に操作できます。

アプリケーションの要件に応じて、適切なメソッドを選択しましょう。

●割り算の結果が整数かどうかの判定

JavaScriptで割り算を行う際、結果が整数になるかどうかを判定したいケースがありますよね。

例えば、ユーザー入力した数値を割り算して、その結果が整数かどうかで処理を分岐させたいような場面です。

そんな時に使えるのが、Number.isInteger()メソッドです。

○Number.isInteger()メソッド

Number.isInteger()は、与えられた値が整数かどうかを判定するメソッドです。

整数の場合はtrueを、そうでない場合はfalseを返します。

使い方は簡単で、Number.isInteger(値)のように記述するだけです。

○サンプルコード7：割り算の結果が整数か判定

では、実際にNumber.isInteger()を使って、割り算の結果が整数かどうかを判定してみましょう。

function isDivisibleByThree(number) {
  return Number.isInteger(number / 3);
}

console.log(isDivisibleByThree(9)); // true
console.log(isDivisibleByThree(10)); // false
console.log(isDivisibleByThree(4.5)); // false

このisDivisibleByThree()関数は、引数のnumberが3で割り切れるかどうかを判定します。

関数内部では、numberを3で割った結果をNumber.isInteger()に渡しています。

もしnumberが3で割り切れる整数なら、number / 3の結果も整数になるので、Number.isInteger()はtrueを返します。

実行結果を見ると、9は3で割り切れる整数なのでtrue、10と4.5は3で割り切れないのでfalseが返ってきていますね。

このように、Number.isInteger()を使えば、簡単に割り算の結果が整数かどうかを判定できます。

□他の判定方法

Number.isInteger()以外にも、割り算の結果が整数かどうかを判定する方法があります。

○サンプルコード8：小数点があるかどうかの判定

一つの方法は、割り算の結果と、その結果をMath.floor()で切り捨てた値を比較することです。

function isDivisibleByThree(number) {
  return number / 3 === Math.floor(number / 3);
}

console.log(isDivisibleByThree(9)); // true
console.log(isDivisibleByThree(10)); // false
console.log(isDivisibleByThree(4.5)); // false

この方法では、number / 3の結果と、Math.floor(number / 3)の結果が等しいかどうかを比較しています。

もしnumberが3で割り切れる整数なら、number / 3の結果は小数点以下を持たないので、Math.floor()で切り捨てても値は変わりません。

つまり、両者は等しくなり、trueが返ります。

一方、numberが3で割り切れない場合は、number / 3の結果は小数点以下を持つので、Math.floor()で切り捨てると値が変わります。

よって、両者は等しくならず、falseが返ります。

実行結果は、サンプルコード7と同じですね。

このように、割り算の結果と切り捨てた値を比較する方法でも、整数かどうかを判定できます。

ただ、個人的にはNumber.isInteger()を使う方が、コードの意図が明確でわかりやすいと思います。

状況に応じて、適切な方法を選択しましょう。

●よくあるエラーと対処法

JavaScriptで割り算を行う際、初心者の方はエラーに遭遇することがありますよね。

エラーメッセージを見ても、何が原因なのかわからず困惑してしまうこともあるでしょう。

割り算でよく発生するエラーとその対処法を知っておけば、スムーズにコーディングを進められます。

○割り算でのゼロ除算エラー

割り算でよく発生するエラーの一つが、ゼロ除算エラーです。

これは、数値をゼロで割ろうとした時に発生します。

例えば、10 / 0のような式を実行すると、JavaScriptはInfinityを返します。

これは、数学的には正しい結果ですが、プログラムの意図としては間違っているケースが多いですよね。

一方、0 / 0のような式を実行すると、NaN（Not a Number）が返ります。

これは、数学的に未定義の操作を行ったことを示しています。

これらのエラーを防ぐには、割り算を行う前に、割る数（除数）がゼロでないかをチェックする必要があります。

function safeDivide(dividend, divisor) {
  if (divisor === 0) {
    console.log("Error: Division by zero!");
    return null;
  }
  return dividend / divisor;
}

console.log(safeDivide(10, 2)); // 5
console.log(safeDivide(10, 0)); // Error: Division by zero!

このsafeDivide()関数では、divisorがゼロかどうかを確認しています。

ゼロの場合は、エラーメッセージを表示し、nullを返すようにしています。

このように、事前にチェックを行うことで、ゼロ除算エラーを防ぐことができます。

○小数点の桁数指定でのエラー

小数点以下の桁数を指定する際にも、エラーが発生することがあります。

例えば、toFixed()メソッドは数値を指定した桁数の文字列に変換しますが、引数に負の値や大きすぎる値を指定すると、エラーが発生します。

const number = 3.14159;

console.log(number.toFixed(-1)); // RangeError: toFixed() digits argument must be between 0 and 100
console.log(number.toFixed(101)); // RangeError: toFixed() digits argument must be between 0 and 100

これらのエラーを防ぐには、toFixed()の引数が0以上100以下の範囲内であることを確認する必要があります。

function safeToFixed(number, decimalPlaces) {
  if (decimalPlaces < 0 || decimalPlaces > 100) {
    console.log("Error: toFixed() digits argument must be between 0 and 100");
    return null;
  }
  return number.toFixed(decimalPlaces);
}

console.log(safeToFixed(3.14159, 2)); // "3.14"
console.log(safeToFixed(3.14159, -1)); // Error: toFixed() digits argument must be between 0 and 100

このsafeToFixed()関数では、decimalPlacesが0以上100以下の範囲内にあるかを確認し、範囲外の場合はエラーメッセージを表示し、nullを返すようにしています。

このように、引数の値を事前にチェックすることで、toFixed()でのエラーを防ぐことができます。

○数値以外での割り算エラー

JavaScriptでは、数値以外のオペランドで割り算を行うと、エラーが発生することがあります。

例えば、文字列やオブジェクトを割り算しようとすると、NaNが返ります。

console.log("10" / 2); // 5
console.log("hello" / 2); // NaN
console.log({} / 2); // NaN

1つ目の例では、文字列の”10″が数値の10に変換されて割り算が行われるため、5が返ります。しかし、2つ目と3つ目の例では、文字列の”hello”やオブジェクトの{}は数値に変換できないため、NaNが返ります。

これらのエラーを防ぐには、割り算を行う前に、オペランドが数値であることを確認する必要があります。これには、typeof演算子やNumber.isFinite()メソッドを使用します。

function safeDivide(dividend, divisor) {
  if (typeof dividend !== "number" || typeof divisor !== "number") {
    console.log("Error: Both operands must be numbers!");
    return null;
  }
  if (!Number.isFinite(dividend) || !Number.isFinite(divisor)) {
    console.log("Error: Both operands must be finite numbers!");
    return null;
  }
  return dividend / divisor;
}

console.log(safeDivide(10, 2)); // 5
console.log(safeDivide("10", 2)); // Error: Both operands must be numbers!
console.log(safeDivide(Infinity, 2)); // Error: Both operands must be finite numbers!

このsafeDivide()関数では、まずtypeof演算子を使ってオペランドが数値であるかを確認しています。

そして、Number.isFinite()メソッドを使って、オペランドが有限の数値であるかを確認しています。

もしオペランドが数値でない場合や、無限大やNaNである場合は、エラーメッセージを表示し、nullを返すようにしています。

このように、オペランドのタイプを事前にチェックすることで、数値以外での割り算エラーを防ぐことができます。

●JavaScriptの割り算の応用例

これまで、JavaScriptでの割り算の基本的な使い方や、小数点の桁数操作、整数判定、エラー処理などを学んできましたが、実際のプログラミングではどのように割り算が活用されているのでしょうか。

ここからは、JavaScriptの割り算の応用例をいくつか見ていきましょう。

実務でよく遭遇するシーンを想定して、割り算がどのように問題解決に役立つのか、具体的なサンプルコードとともに解説します。

○サンプルコード9：割り勘の計算

会食やイベントなどで、参加者全員で費用を等分に負担する「割り勘」は、よくある計算シーンですよね。JavaScriptで割り勘を計算するには、割り算を使います。

function calculateSplit(totalAmount, numPeople) {
  if (numPeople <= 0) {
    console.log("Error: Number of people must be greater than 0!");
    return null;
  }
  const amountPerPerson = totalAmount / numPeople;
  return amountPerPerson.toFixed(2);
}

console.log(calculateSplit(10000, 4)); // "2500.00"
console.log(calculateSplit(10000, 3)); // "3333.33"
console.log(calculateSplit(10000, 0)); // Error: Number of people must be greater than 0!

このcalculateSplit()関数は、第1引数に合計金額、第2引数に人数を取ります。

関数内では、まず人数が0以下でないかをチェックし、0以下の場合はエラーメッセージを表示してnullを返します。

そして、合計金額を人数で割って、1人あたりの金額amountPerPersonを計算します。

最後に、toFixed(2)で小数点以下2桁の文字列に変換して返します。

実行結果を見ると、10000円を4人で割ると1人あたり2500円、3人で割ると3333.33円となっています。

また、0人で割ろうとするとエラーメッセージが表示されます。

このように、割り算を使えば、割り勘の計算を簡単に行うことができます。

○サンプルコード10：ページネーションの実装

ウェブサイトやアプリでは、大量のデータをページ分割して表示する「ページネーション」がよく使われます。

JavaScriptでページネーションを実装する際にも、割り算が活用されます。

function calculatePageCount(totalItems, itemsPerPage) {
  if (itemsPerPage <= 0) {
    console.log("Error: Items per page must be greater than 0!");
    return null;
  }
  const pageCount = Math.ceil(totalItems / itemsPerPage);
  return pageCount;
}

console.log(calculatePageCount(100, 10)); // 10
console.log(calculatePageCount(100, 8)); // 13
console.log(calculatePageCount(100, 0)); // Error: Items per page must be greater than 0!

このcalculatePageCount()関数は、第1引数にデータの総数、第2引数に1ページあたりの表示数を取ります。

関数内では、まず1ページあたりの表示数が0以下でないかをチェックし、0以下の場合はエラーメッセージを表示してnullを返します。

そして、データの総数を1ページあたりの表示数で割り、Math.ceil()で切り上げることで、必要なページ数pageCountを計算します。

実行結果を見ると、100件のデータを1ページあたり10件ずつ表示する場合は10ページ、8件ずつ表示する場合は13ページ必要となっています。

また、1ページあたり0件で表示しようとするとエラーメッセージが表示されます。

このように、割り算とMath.ceil()を使えば、ページネーションに必要なページ数を簡単に計算できます。

○サンプルコード11：残り時間の計算

タイマーアプリや、残り時間を表示するカウントダウンなどでは、割り算を使って時間を計算することがよくあります。

function calculateRemainingTime(remainingSeconds) {
  const hours = Math.floor(remainingSeconds / 3600);
  const minutes = Math.floor((remainingSeconds % 3600) / 60);
  const seconds = remainingSeconds % 60;

  return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
}

console.log(calculateRemainingTime(3661)); // "1:01:01"
console.log(calculateRemainingTime(61)); // "0:01:01"

このcalculateRemainingTime()関数は、残り時間を秒数で受け取り、”時:分:秒”の形式の文字列で返します。

関数内では、まず残り秒数を3600（1時間の秒数）で割って、残り時間の「時」の部分を計算します。

このとき、Math.floor()で小数点以下を切り捨てています。

次に、残り秒数を3600で割った余りを60（1分の秒数）で割って、「分」の部分を計算します。

最後に、60で割った余りが「秒」の部分となります。

最後に、padStart()メソッドを使って、分と秒が1桁の場合は0を先頭に付けて2桁にしています。

実行結果を見ると、3661秒は”1:01:01″（1時間1分1秒）、61秒は”0:01:01″（1分1秒）と表示されています。

このように、割り算と剰余演算子（%）を使えば、秒数から時分秒を計算することができます。

○サンプルコード12：パーセント計算

割引率や進捗率など、パーセント計算にも割り算が使われます。

function calculatePercentage(value, total) {
  if (total === 0) {
    console.log("Error: Total cannot be 0!");
    return null;
  }
  const percentage = (value / total) * 100;
  return `${percentage.toFixed(2)}%`;
}

console.log(calculatePercentage(25, 100)); // "25.00%"
console.log(calculatePercentage(60, 200)); // "30.00%"
console.log(calculatePercentage(50, 0)); // Error: Total cannot be 0!

このcalculatePercentage()関数は、第1引数に部分の値、第2引数に全体の値を取り、パーセンテージを計算して文字列で返します。

関数内では、まず全体の値が0でないかをチェックし、0の場合はエラーメッセージを表示してnullを返します。

そして、部分の値を全体の値で割り、100を掛けることでパーセンテージを計算します。

最後に、toFixed(2)で小数点以下2桁の文字列に変換し、末尾に”%”を付けて返します。

実行結果を見ると、25/100は”25.00%”、60/200は”30.00%”とパーセンテージが表示されています。

また、全体の値が0の場合はエラーメッセージが表示されます。

このように、割り算を使えば、パーセント計算を簡単に行うことができます。

まとめ

JavaScriptの割り算は、プログラミングの基本であり、様々な場面で活用されています。

この記事では、割り算の基本的な使い方から、小数点の桁数操作、整数判定、エラー処理、そして実践的な応用例まで、幅広く解説しました。

これらの知識を身につけることで、JavaScriptでの割り算に自信を持って取り組めるようになるでしょう。

今後は、この記事で学んだ割り算の知識を活かして、より効率的で正確なコードを書いていきましょう。

皆さんの今後のコーディングライフに、この記事が少しでも役立てば幸いです。