こんにちは！Reiです(˵ •̀ ᴗ – ˵) ✧
コードの中に出てくる %、「割り算のあまりを出すもの」というイメージはあると思います。
でも実際のコードでは、ただあまりを求めるだけではなく、値を一定の範囲に収めるために使われることが多いです。
この記事では、JavaScriptの % が何をしているのかを基本から整理しつつ、時計・曜日・配列の循環処理でどう使うのかまでわかるようにまとめています。
「なぜこの場面で使われているのか？」
「どういう意図の計算なのか？」
このあたりまで理解できると、コードの中で % を見かけたときに、処理の意味を自分で読み取りやすくなります。
ぜひ、基本から使いどころまで一緒に整理していきましょう！
＼＼ この記事で学べること ／／
・モジュロ演算（剰余演算）と % の基本的な意味
・時計・曜日・配列インデックスでの使い方
・すぐコードに使える書き方
・負の数を扱うときの注意点
JavaScriptの % 演算子（モジュロ演算）でできること
JavaScriptの %（モジュロ演算子・剰余演算子）は、割り算のあまりを求める演算子です。
「値が一定の数を超えたら先頭に戻す」処理として、時間計算・曜日計算・配列の循環などで使われます。
コピペで使えるコード一覧
よく使う場面ごとにまとめました。コードをそのまま使用できます。
// 時刻を0〜23の範囲に収める（24時間制）
const hour = (currentHour + elapsed) % 24;
// 曜日を0〜6の範囲に収める（0=日曜）
const day = (today + days) % 7;
// 配列インデックスを循環させる（最後の次は先頭）
const next = (index + 1) % array.length;
// 偶数・奇数の判定
const isEven = n % 2 === 0;
// 負の数を0以上に収める
const safe = ((n % m) + m) % m;どんなときに % を使うか
% が登場するのは、主に次の場面です。
- 時間・曜日など「決まった数で一周する値」を扱うとき
- 配列の末尾まで進んだあと、先頭に戻したいとき
- 偶数行・奇数行など「一定ごとに処理を切り替えたい」とき
- 負の数を扱う場合に、結果を0以上の範囲に収めたいとき
モジュロ演算の基本
モジュロ演算を理解するうえで、まず押さえておきたいのが、% がどのような値を返すのかという点です。
基本的な動作と、値を範囲に収める仕組みを順番に見ていきます。
% とは何か
% は、割り算のあまりを求める演算子です。
モジュロ演算（または剰余演算）と呼びます。
console.log(10 % 3); // 1（10 ÷ 3 のあまりは1）
console.log(8 % 2); // 0（割り切れる場合は0）
console.log(15 % 4); // 3% が「範囲を収める」処理に使われる理由
% 24 を取ると、結果は必ず 0〜23 の範囲になります。% 7 なら 0〜6、% n なら 0〜n-1 の範囲に収まります。
値がどれだけ大きくなっても、% を使うことで決まった範囲に収め続けられます。
これが、時間や曜日の計算に % が使われる理由です。
時計や曜日での使い方
時間と曜日は、どちらも決まった数で一周する値です。% を使うことで、どれだけ大きな数でも現在の位置を求められます。
24時間制の時刻計算
現在の時刻に経過時間を加算すると、24を超えることがあります。% 24 を使うことで、結果を0〜23の範囲に収められます。
const currentHour = 20;
const passedTime = 10;
const result = (currentHour + passedTime) % 24;
console.log(result); // 6（30 % 24 = 6）曜日の計算
曜日は7日で一周します。% 7 を使うことで、何日後でも曜日が求められます。
const today = 1; // 月曜日
const daysLater = 100;
const dayOfWeek = (today + daysLater) % 7;
console.log(dayOfWeek); // 3（水曜日）配列・UIでの使い方
モジュロ演算は、数値の計算だけでなく、配列の操作や画面の表示制御でも使われます。
一定の順番で要素を切り替えたり、末尾まで進んだあとに先頭へ戻す処理に活用できます。
配列インデックスの循環
最後の要素まで進んだあと、先頭に戻す処理に使われます。
const images = ["img0", "img1", "img2"];
let index = 0;
index = (index + 1) % images.length;
console.log(index); // 1この処理を繰り返すと 0 → 1 → 2 → 0 と循環します。images.length を使うことで、要素数が変わっても同じコードで動きます。
偶数番目・奇数番目の切り替え
% 2 を使うと、値を 0 と 1 に分けられます。
偶数行と奇数行で背景色を変えるような処理に使われます。
const index = 5;
if (index % 2 === 0) {
console.log("偶数番目");
} else {
console.log("奇数番目");
}% 3 にすれば3つごと、% n にすれば n 個ごとに区切ることができます。
負の数を使うときの注意点
% は便利な演算子ですが、左側の値が負の場合は結果も負になることがあります。
この挙動を知らないまま使うと、配列のインデックスが想定外の値になることがあります。
JavaScriptの % は負の値を返すことがある
左側の値が負の場合、結果も負になります。
console.log(-1 % 7); // -1この動作を知らないまま配列のインデックスに使うと、想定外の動作が起きます。
負の数を0以上に収める書き方
// NG：負の結果になることがある
const result1 = -1 % 7;
console.log(result1); // -1
// OK：一度足してから再度 % を取る
const result2 = ((-1 % 7) + 7) % 7;
console.log(result2); // 6((n % m) + m) % m の形にすることで、結果を必ず 0〜m-1 の範囲に収められます。
前の要素へ戻る処理や、逆方向に循環させる場面で使われます。
今回のポイントおさらい !!
% 演算子（モジュロ演算）とは
・割り算のあまりを求める演算子
・a % b で、a ÷ b のあまりが返る
値を範囲に収める仕組み
・% n を取ると、結果は必ず 0〜n-1 の範囲に収まる
・時間・曜日・配列の循環処理に使われる
負の数の注意点
・左側が負の場合、結果も負になる
・((n % m) + m) % m の形で0以上に戻せる
使い分けの判断基準
| 場面 | 書き方 |
|---|---|
| 偶数・奇数の判定 | n % 2 === 0 |
| 時刻を0〜23に収める | (hour + elapsed) % 24 |
| 曜日を0〜6に収める | (day + n) % 7 |
| 配列を先頭に戻す | (index + 1) % array.length |
| 負の数を0以上に収める | ((n % m) + m) % m |
最後に
% は「あまりを求める演算子」として知られていますが、実際には「値を一定の範囲に収め続ける」処理として使われる場面が多いです。
特に配列の循環や日時計算では、% を理解しているだけでコードの見通しがかなりよくなります。
コードの中で % を見かけたときは、「何個で一周しているのか」を意識すると、計算の意図が読み取りやすくなります ᥫᩣ ̖́-
コメント