【JS入門】「あまり」計算（%）の仕組みと、偶数・奇数判定のコード解説

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>

ボタンを押して動きをチェック

解説

1. HTML部分

<button>偶数か奇数かどっちが出るかな？</button>
<p></p>

<button> はクリックできるボタンです。
<p> は結果（数字と偶数・奇数の判定）を表示する場所です。
初めは空ですが、JavaScriptの処理で中身が変わります。

2. JavaScript部分

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> の中の文字を変える命令です。
そのため、ボタンを押すたびに新しい結果が表示されます。

まとめ

ボタンをクリックすると、ランダムに1〜10の数字が生成される。
その数字を2で割り、あまりが0なら「偶数」、そうでなければ「奇数」と表示する。
% は「割り算のあまり」を求めるために使う。

Math.random() について詳しく👇

【JavaScript】Math.random()の使い方｜ランダムな数字を生成する基本をやさしく解説

JavaScript初心者向けに「Math.random()」の使い方をやさしく解説。0以上1未満のランダムな小数の生成から、整数のランダム抽選まで基本を丁寧に紹介。

`${num}: 偶数` のように変数と文字列を組み合わせる方法を解説

【JavaScript】テンプレートリテラルで変数と文字列を簡単に組み合わせる方法

テンプレートリテラルを使えば、JavaScriptで変数と文字列を直感的に組み合わせることができます。+記号を使った結合よりも読みやすく、効率的なコードが書ける基本文法を解説します。

追記

if (num % 2 === 0) {
  p.textContent = 'あたり';
} else {
  p.textContent = 'はずれ';
}

このように書き換えれば、簡単なくじ引きアプリを作ることもできます。

もしnumが偶数（2で割った余りが0）なら、
- pという要素に「あたり」というテキストを表示します。
そうでない場合（else）、つまりnumが奇数（2で割った余りが1）なら、
- pという要素に「はずれ」というテキストを表示します。

要するに、偶数なら「あたり」、奇数なら「はずれ」と表示する処理です。

剰余演算子を使ったミニアプリもチェック！

const greets = ['こんにちは', 'おはよう', 'こんばんは', 'ハロー', 'お疲れ様です'];

このような配列に格納された挨拶を順番に表示させるにはどうしたらいいでしょうか。

greets[0] が「こんにちは」になります。
剰余演算子を使うと、配列の最後まで行ったあとに最初に戻るように表示できます。

👇こちらでわかりやすく解説しています。

初心者向け！JavaScriptでクリックごとにメッセージを切り替える方法

配列を使ったテキスト切り替えの基本コードを公開。コピペで確実に動くので、複数のメッセージを順番に表示するロジックを迷わず実装できます。

ランダム生成した数字が偶数か奇数かを判定する方法

解説

1. HTML部分

2. JavaScript部分

まとめ

追記

剰余演算子を使ったミニアプリもチェック！

おすすめのプログラミング学習サービス