JavaScriptで割り算の余りを求める方法：剰余演算子（%）の使い方と注意点

JavaScriptでのプログラミングにおいて、数値計算は避けて通れない要素の一つです。

特に、ある数値を別の数値で割った際の「余り」を求める処理は、アルゴリズムの構築やUIの制御において非常に重要な役割を果たします。

JavaScriptでは、この余りを求めるために剰余演算子（%）という専用の記号が用意されています。

本記事では、剰余演算子の基本的な使い方から、実務で役立つ具体的な活用シーン、そして初心者が陥りやすい注意点までを詳しく解説します。

剰余演算子（%）の基本概念

剰余演算子とは、左辺の数値を右辺の数値で割ったときの「余り（剰余）」を算出するための演算子です。

算数で習う「10 ÷ 3 = 3 余り 1」という計算において、この「1」という値を取得するために使用されます。

JavaScriptにおいて剰余演算子はパーセント記号（%）で表されますが、これは割合（パーセンテージ）を計算するものではない点に注意が必要です。

算術演算子としての役割

JavaScriptには、足し算（+）、引き算（-）、掛け算（*）、割り算（/）といった基本的な算術演算子が存在します。

剰余演算子（%）もこれらと同じグループに属しており、主に数値型のデータを操作する際に利用されます。

特に「一定周期で処理を繰り返したい場合」や「特定の倍数を判定したい場合」に、この演算子が真価を発揮します。

基本的な使い方とコード例

それでは、実際にJavaScriptでどのようにコードを記述するのか、具体的な例を見ていきましょう。

整数同士の計算

最も一般的なケースは、整数同士の割り算で余りを求める方法です。

// 10を3で割った余りを求める
const result1 = 10 % 3;
console.log(result1);

// 15を5で割った余りを求める（割り切れる場合）
const result2 = 15 % 5;
console.log(result2);

1
0

上記の通り、割り切れる場合には0が返されます。

この性質を利用することで、ある数値が別の数値の倍数であるかどうかを簡単に判定できます。

負の数が含まれる場合の挙動

剰余演算子を使用する際に注意が必要なのが、負の数（マイナス）を扱う場合です。

JavaScriptの剰余演算は、「左辺の数値の符号」を引き継ぐという特性を持っています。

// 左辺が負の場合
console.log(-10 % 3);

// 右辺が負の場合
console.log(10 % -3);

-1
1

多くのプログラミング言語で「剰余（Remainder）」と「剰余（Modulo）」の定義は異なりますが、JavaScriptの%は正確には「剰余（Remainder）」演算子です。

数学的なモジュロ演算（常に正の結果を期待する場合）が必要な場合は、独自に計算式を組み立てる必要があります。

浮動小数点数（小数）における注意点

JavaScriptの数値型（Number型）は、内部的にIEEE 754準拠の倍精度浮動小数点数として扱われます。

そのため、小数の割り算で余りを求めようとすると、計算誤差が発生することがあります。

IEEE 754による精度の問題

以下のコード例を確認してください。

// 0.3を0.1で割った余り
const result = 0.3 % 0.1;
console.log(result);

0.09999999999999998

直感的には「0」になるはずですが、コンピュータ内部での2進数変換の影響により、微小な誤差が含まれてしまいます。

小数を扱う計算で正確な余りが必要な場合は、一度整数に変換（10倍や100倍）してから計算し、最後に元の桁数に戻すといった工夫が推奨されます。

実践的な活用シーン

剰余演算子は単なる計算だけでなく、Web開発の現場で多様な用途に使われます。

偶数・奇数の判定

最も代表的な活用例は、ある数値が偶数か奇数かを判定する処理です。

数値を2で割り、余りが0であれば偶数、1であれば奇数であると判断できます。

function checkEvenOrOdd(num) {
    if (num % 2 === 0) {
        return "偶数です";
    } else {
        return "奇数です";
    }
}

console.log(checkEvenOrOdd(10));
console.log(checkEvenOrOdd(7));

このロジックは、例えばテーブルの行ごとに背景色を変える「ストライプ模様」の実装などで頻繁に利用されます。

ループ処理におけるインデックスの循環

配列の要素を順番に表示し、最後まで行ったらまた最初に戻る、といった「ループ（循環）」処理にも剰余演算子が適しています。

const colors = ["Red", "Green", "Blue"];

for (let i = 0; i < 10; i++) {
    // iを配列の長さで割った余りをインデックスにする
    const color = colors[i % colors.length];
    console.log(`${i}: ${color}`);
}

この方法を使えば、iがどれだけ増えても、インデックスは必ず0, 1, 2の範囲内に収まります。

スライドショーの画像切り替えや、ゲームのキャラクターの向き制御などに非常に便利です。

単位の変換（時間や日付の計算）

「秒」を「分と秒」に変換するといった単位の繰り上がり処理にも欠かせません。

const totalSeconds = 125;
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;

console.log(`${minutes}分 ${seconds}秒`);

2分 5秒

このように、商（整数の割り算の結果）と余りを組み合わせることで、人間にとって理解しやすい形式にデータを整形できます。

BigInt型での剰余演算

JavaScriptの通常のNumber型では、Number.MAX_SAFE_INTEGER（約9000兆）を超える巨大な整数を正確に扱えません。

そうした巨大な数値を扱うために導入されたのがBigInt型です。

BigInt型でも剰余演算子を使用できますが、通常の数値型と混ぜて計算することはできない点に注意しましょう。

const bigNum = 1000000000000000000000n;
const remainder = bigNum % 3n;

console.log(remainder);

BigIntを使用する場合は、数値の末尾にnを付けるか、BigInt()関数で変換する必要があります。

ゼロ除算と特殊な値

プログラミングにおいて、0で割り算を行う「ゼロ除算」はエラーや予期せぬ挙動の原因となります。

JavaScriptの剰余演算子において、右辺に0を指定した場合、結果はNaN（Not a Number）になります。

console.log(10 % 0);
console.log(10 % -0);

NaN
NaN

実行時にプログラムが停止（クラッシュ）することはありませんが、その後の計算結果がすべてNaNになってしまうため、ユーザー入力などを計算に使う際は事前にチェックすることが重要です。

よくある間違いと回避策

初心者が剰余演算子を使う際に間違えやすいポイントをまとめました。

特に、「負の数の奇数判定」には注意が必要です。

num % 2 === 1 という条件式では、numが-3の場合に結果が-1となり、奇数として判定されません。

より安全な判定方法は num % 2 !== 0 と記述することです。

まとめ

JavaScriptにおける剰余演算子（%）は、単に余りを求めるだけでなく、条件分岐やデータ構造の制御において非常に強力なツールです。

基本となる「左辺を右辺で割った余りを返す」という動作を理解した上で、負の数や小数における挙動の特性を把握しておくことが、バグの少ないコードを書くための第一歩となります。

偶数・奇数の判定や、配列インデックスのループ、時間の単位変換など、まずは身近な処理から剰余演算子を活用してみてください。

適切な場面で正しく使いこなすことで、複雑に見えるロジックも驚くほどシンプルに記述できるようになるはずです。