JavaScriptの剰余演算子（%）は、ある数を別の数で割ったときの余りを求める演算子です。
例えば、7 % 3 は 7 を 3 で割った余りである 1 を返します。
知っておくと便利な、この%の使い方を見ていきましょう。
ランダム生成した数字が偶数か奇数かを判定する
ボタンを押すと1から10までの数字がランダムに表示され、その数字が偶数か奇数かを判定して表示する。
<body>
<button>偶数か奇数かどっちが出るかな？</button>
<p></p>
<script>
const button = document.querySelector('button');
const p = document.querySelector('p');
button.addEventListener('click', () => {
const num = Math.floor(Math.random() * 10) + 1;
if (num % 2 === 0) {
p.textContent = `${num}: 偶数`;
} else {
p.textContent = `${num}: 奇数`;
}
});
</script>
</body>
解説
const button = document.querySelector('button');
const p = document.querySelector('p');
document.querySelector()は、HTMLの中から特定の要素を取り出す命令です。buttonには<button>要素が、pには<p>要素が入ります。constは「この変数には後から別の値を代入しない」という意味です。
button.addEventListener('click', () => {
// ...
});
addEventListener('click', ...)は、「ボタンがクリックされたときに、{} の中の処理を実行する」という仕組みです。() => { ... }は「関数」と呼ばれるもので、「クリックされたときに何をするか」をまとめています。
const num = Math.floor(Math.random() * 10) + 1;
Math.random()は 0以上1未満のランダムな小数を作ります。
たとえば0.3478や0.9123のような数です。* 10をつけると 0〜9.999… の範囲になります。Math.floor()は小数点以下を切り捨てて整数にします。
つまり 0〜9 の整数になります。+ 1で 1〜10 の整数にしています。
最終的に num には 1〜10 のどれかが入ります。
if (num % 2 === 0) {
p.textContent = `${num}: 偶数`;
} else {
p.textContent = `${num}: 奇数`;
}
%は「割り算のあまり」を求める演算子です。
例えば5 % 2は 1、6 % 2は 0 になります。- 偶数は「2で割ったときのあまりが0」になる数なので、
num % 2 === 0なら偶数、それ以外は奇数と判断しています。
p.textContent は <p> の中の文字を変える命令です。
そのため、ボタンを押すたびに新しい結果が表示されます。
✅ Math.random() について詳しく解説
【JavaScript】Math.random()の使い方｜ランダムな数字を生成する基本をやさしく解説
✅ `${num}: 偶数` のように変数と文字列を組み合わせる方法を解説
【JavaScript】テンプレートリテラルで変数と文字列を簡単に組み合わせる方法
追記
if (num % 2 === 0) {
p.textContent = 'あたり';
} else {
p.textContent = 'はずれ';
}
このように書き換えれば、簡単なくじ引きアプリを作ることもできます。
- もし
numが偶数（2で割った余りが0）なら、pという要素に「あたり」というテキストを表示します。 - そうでない場合（
else）、つまりnumが奇数（2で割った余りが1）なら、pという要素に「はずれ」というテキストを表示します。
要するに、偶数なら「あたり」、奇数なら「はずれ」と表示する処理です。
ボタンをクリックするたび背景色が変わる
- 色の名前の配列を用意し、ボタンを押すたびに背景色が配列の順番に変わる
- 配列の最後まで行けば最初の色に戻る
- クリックした回数も表示される
コードをコピーして動きを確認してください。
<body>
<button>色を変更</button>
<p>クリック回数: 0</p>
<script>
const colors = ['yellow', 'pink', 'skyblue', 'lightgreen'];
let index = 0;
document.body.style.backgroundColor = colors[0];
document.querySelector('button').addEventListener('click', () => {
index++;
document.querySelector('p').textContent = `クリック回数: ${index}`;
const indexToUse = index % colors.length;
document.body.style.backgroundColor = colors[indexToUse];
});
</script>
</body>
解説
const colors = ['yellow', 'pink', 'skyblue', 'lightgreen'];使う色を順番にリスト（配列）に登録しています。
let index = 0;カウンターです。「今何回ボタンを押したか」と「次に使う色の順番」を数えるために、0 からスタートします。
document.body.style.backgroundColor = colors[0];プログラムが始まったとき、まず背景色をリストの最初の色（colors[0]、つまり 'yellow'）に設定します。
document.querySelector('button').addEventListener('click', () => {
// ...
});この部分が、ボタンがクリックされたときに実行される命令です。
index++;まず、カウンターの数を 1 増やします。これがクリック回数を数えています。（1回押すと 1 に、2回押すと 2 になる）
document.querySelector('p').textContent = `クリック回数: ${index}`;増やしたばかりの index の値を使って、画面に表示されているクリック回数を更新します。
const indexToUse = index % colors.length;色の順番を計算します。これがこのコードのポイントです。
剰余（あまり）を使っています。色の数が4つなので、% 4 という意味です。
回数が 4 になると 4 ÷ 4 のあまりは 0 になり、自動的にリストの最初（colors[0]）に戻ります。
document.body.style.backgroundColor = colors[indexToUse];計算して決まった新しい順番の色の名前に、背景色を変更します。
剰余演算子を使ったミニアプリもチェック！
const greets = ['こんにちは', 'おはよう', 'こんばんは', 'ハロー', 'お疲れ様です'];このような配列に格納された挨拶を順番に表示させるにはどうしたらいいでしょうか。
greets[0] が「こんにちは」になります。
剰余演算子を使うと、配列の最後まで行ったあとに最初に戻るように表示できます。
👇こちらでわかりやすく解説しています。
おすすめのプログラミング学習サービス
私は動画学習プラットフォームのUdemyでプログラミングを学習しています。
Udemyでは、スキマ時間に新しい技術や知識を習得できます。
HTML・CSS・JavaScriptの基本から本格的なWebアプリ制作まで学べるおすすめの講座をこちらで紹介しています👇
