こんにちは！Reiです(˵ •̀ ᴗ – ˵) ✧
突然ですが…、コードの中に出てくる %、なんとなく使っていませんか？ 👀
「割り算のあまりを出すもの」というイメージはあると思いますが、
「なんでこの場面で使われているのか？」
「どういう意図の計算なのか？」
このあたりまで意識して見ることは、あまり多くないかもしれません 👀
この % 、あまりを出すだけでなく、
「値を一定の範囲で回す」という役割を持っています。
JavaScriptでは、この % を使った処理のことをモジュロ演算と呼びます。
今回は、このモジュロ演算について、「わかっているつもり」を一歩深めていきましょう！
＼＼ この記事で学べること ／／
・モジュロ演算と % の基本
・剰余がどんな考え方で使われるのか
・時計や曜日、配列インデックスでの活用例
・負の数を扱うときの注意点
モジュロ演算の基本
モジュロ演算を理解するうえで、まず押さえておきたいのが、% がどのような値を返すのかという点です。
まずは、% の基本的な動きから見ていきましょう！
% は割り算のあまりを求める
JavaScriptの % は、割り算のあまりを求める演算子です。
たとえば 10 % 3 は、10 ÷ 3 のあまりである 1 が返ります。
console.log(10 % 3); // 1
console.log(8 % 2); // 0
console.log(15 % 4); // 3
割り切れる場合は 0 になり、割り切れない場合はあまりが返ります。
この性質を使うと、n % 2 で偶数かどうかを判定できます。
% は値を一定の範囲に収めるときにも使われる
% はあまりを求めるだけでなく、値を一定の範囲に収める処理として使われます。
たとえば % 24 の場合、結果は 0〜23 の範囲に収まり、% 7 なら 0〜6 の範囲になります。
これは、割り算のあまりを見ることで、値がその範囲を超えても、範囲内に戻せるためです。
このように、一定の数で区切られる値を扱うときに、% が使われます。
時計や曜日で見るモジュロ演算
モジュロ演算は、一定の数で繰り返される値を扱うときに使われます。
その代表的な例が、時間と曜日です。
どちらも決まった数で一周するため、
モジュロ演算の動きを確認する題材としてよく使われます。
24時間表記では %24 で時刻を扱える
24時間表記では、24を超えると0時に戻ります。
このような繰り返しは、% 24 を使うことで表せます。
const currentHour = 20;
const passedTime = 10;
const result = (currentHour + passedTime) % 24;console.log(result); // 6
この場合、20 + 10 で30になりますが、30 % 24 を取ることで6になります。
24時間で一周するため、結果を0〜23の範囲に収めることができます。
曜日は %7で 今の位置を計算できる
曜日は7日で一周します。このような場合も、% 7 を使って扱うことができます。
const today = 1; // 月曜日
const daysLater = 100;
const dayOfWeek = (today + daysLater) % 7;
console.log(dayOfWeek); // 3
この場合、1 + 100 で 101 になりますが、101 % 7 を取ることで3になります。
7日ごとに同じ曜日に戻るため、大きい数でも現在の位置を求めることができます。
配列やUIでの活用
モジュロ演算は、数値の計算だけでなく、配列の操作や画面の表示制御でも使われます。
一定の順番で要素を切り替えたり、
最後まで進んだあとに先頭へ戻すような処理で使われることが多いです。
配列インデックスを循環させる処理に使われる
配列では、最後の要素まで進んだあとに、先頭に戻したい場面で % を使うことでシンプルに書くことができます。
const images = ["img0", "img1", "img2"];
let index = 0;
index = (index + 1) % images.length;
console.log(index); // 1
この処理を繰り返すと、0 → 1 → 2 → 0 のように循環します。images.length を使うことで、要素数が変わっても同じ形で扱えます。
最後かどうかを条件分岐で判定しなくても、次の位置を計算できるのもポイントです。
一定数ごとに見た目を切り替える処理に使われる
% は、インデックスの循環だけでなく、「何回目か」に応じて処理を変えたいときにも使われます。
たとえば、偶数番目と奇数番目で表示を変える場合です。
const index = 5;if (index % 2 === 0) {
console.log("偶数番目");
} else {
console.log("奇数番目");
}
% 2 を使うことで、値を 0 と 1 に分けることができます。
この性質を使うと、交互に処理を切り替えることができます。
また、% 3 のようにすれば、3つごとに区切ることもできます。
繰り返しの中で一定のパターンを作りたいときもモジュロ演算が使われます。
負の数で使うときの注意点
% は便利な演算子ですが、負の数を扱うときは結果に注意が必要です。
JavaScriptの % は負の値を返すことがある
JavaScriptの % は、左側の値が負の場合、結果も負になることがあります。
console.log(-1 % 7); // -1
この場合、-1 ÷ 7 のあまりとして -1 が返ります。
この違いを知らないまま使うと、配列のインデックスが想定外の値になることがありうります。
0以上の範囲に収める場合の書き方
負の値を扱う場合でも、結果を 0 以上の範囲に収めたいことがあります。
そのときは、次のような書き方が使われます。
const result = ((-1 % 7) + 7) % 7;
console.log(result); // 6
このように一度値を足してから再度 % を取ることで、結果を 0〜6 の範囲に収めることができます。
前の要素へ移動する処理や、逆方向に循環させる場合に使われます。
今回のポイントおさらい !!
最後に、今回出てきた用語と考え方を見直しましょう！
モジュロ演算
・割り算のあまりを見る考え方
・JavaScriptでは % で書く
周期のある値
・24時間なら % 24
・曜日なら % 7
・一定の個数で一周する処理と相性が良い
UIや配列での利用
・インデックスの循環に使える
・偶数番目と奇数番目の判定に使える
・繰り返しの中に周期を作れる
負の数の注意点
・JavaScriptの % は負の結果になることがある
・((n % m) + m) % m の形で0以上に戻せる
最後に
% は「あまりを求める演算子」として知られていますが、実際には、値を一定の範囲で扱うために使われることが多いです。
コードの中で % を見かけたときは、
「いくつで区切られているのか」を意識して、その計算の意図が読み取ってみてくださいね ᥫᩣ ̖́-
コメント