JavaScriptで余りによって画像を切り替える方法｜%演算子とpromptを使った初心者向け解説

JavaScriptの授業や課題でよく出るのが、「入力された数字によって表示内容を変える」というプログラムです。

特に「3で割った余りによって画像を切り替える」という問題は、条件分岐と%（余り演算子）の基本を学ぶ定番課題になっています。

この記事では、promptで整数を入力し、その値を3で割った余りによって3種類の画像を表示するJavaScriptの作り方を、初心者向けにわかりやすく解説します。

%（パーセント）演算子とは？

JavaScriptの「%」は、割り算の余りを求める演算子です。

つまり、「3で割った余り」が0・1・2のどれになるかで処理を分ければ、3種類の画像を切り替えられます。

課題で必要になる基本の流れ

今回の課題は、大きく分けると次の流れになります。

1. promptで数字を入力
2. 3で割った余りを調べる
3. if文で条件分岐する
4. 画像を表示する

この4つが理解できれば、課題はかなり解けるようになります。

実際のJavaScriptコード例

まずは完成形を見てみましょう。

<script>let num = parseInt(prompt("整数を入力してください"));let amari = num % 3;if(amari == 0){    document.write('<img src="image0.jpg">');}else if(amari == 1){    document.write('<img src="image1.jpg">');}else{    document.write('<img src="image2.jpg">');}</script>

画像ファイル名は、自分の画像名に変更してください。

コードを1行ずつ解説

① promptで入力する

prompt("整数を入力してください")

これは入力ウインドウを表示します。

ユーザーが数字を入力できるようになります。

② parseIntで整数化する

parseInt()

promptは文字列として入力を受け取るため、そのままだと計算できない場合があります。

そのため、parseIntで整数へ変換しています。

③ %で余りを求める

num % 3

ここが今回の課題の核心です。

入力された数字を3で割った余りが、0・1・2のどれになるか調べています。

④ if文で分岐する

if(amari == 0)

余りが0なら画像A、1なら画像B、2なら画像Cを表示しています。

「余りによって表示を変える」というのが、この課題の目的です。

画像を表示する方法

画像表示には、document.writeを使っています。

document.write('<img src="image0.jpg">');

srcの部分を自分の画像ファイル名へ変更してください。

初心者がよく間違えるポイント

「=」と「==」を間違える

条件比較では「==」を使います。

if(amari == 0)

「=」だけだと代入になってしまいます。

画像パスが違う

画像が表示されない場合、ファイル名ミスが非常に多いです。

HTMLファイルと同じ場所に画像を置くと簡単です。

parseIntを書き忘れる

文字列のまま計算すると、意図しない動作になる場合があります。

整数化は忘れないようにしましょう。

switch文で書く方法もある

if文以外にswitch文でも書けます。

switch(amari){    case 0:        document.write('<img src="image0.jpg">');        break;    case 1:        document.write('<img src="image1.jpg">');        break;    case 2:        document.write('<img src="image2.jpg">');        break;}

学校によってはswitch文を使う授業もあります。

実際の動作イメージ

このように、余りごとに表示が変わります。

まとめ

JavaScriptで「3で割った余りによって画像を切り替える」課題では、%演算子とif文が重要になります。

まずpromptで入力し、%で余りを求め、その結果によって画像表示を分岐する流れを理解すると、かなり応用が効くようになります。

最初は難しく感じても、「余りが0・1・2になるだけ」と考えると理解しやすくなるので、ぜひ実際にコードを書いて試してみてください。