中山テック 代表の中山です。
さて、当ホームページで何かをしている訳ではないのですが、ランダムに画像表示させたいと思いました。
こちらはWordPressで作成しているのでPHPでも制御できるのですが・・・
あえてのJavascript制御で表示します（ｷﾘｯ
まぁ理由はありまして・・・どこでもかんたんに作れてリファレンスとして残したかったためです。
ではどのように制御するのでしょうか、早速お話したいと思います。
目次
どんなページにするか
10枚画像を用意し、その中からランダムで3枚表示するだけの簡単なプログラムです。
※画面表示時
プログラミング勉強している方は是非一度作ってからご覧頂ければと思います。
HTML
テーブルを使う
<table>
<tr>
<td id="showGazou1"></td>
<td id="showGazou2"></td>
</tr>
<tr>
<td id="showGazou3"></td>
</tr>
</table>これだけです。
縦3枚だと画面スクショが取れなくなること、横3枚だと1枚の画像が小さくなってしまうためこの作りです。
スクショ撮らなくて良いのであれば横でも縦でも並べて問題ないと思います。
テーブルではなくDEVタグで自由度を高めるのもヨシ。
順番
onloadで明示的にHTML⇒Javascriptと読み込んでいるなら別ですが、そうでなければ上から処理が行われます。
つまり、Javascript⇒HTMLとすると「そんなIDねーよ」と怒られてしまうのでHTML⇒Javascriptの並びがベスト。
Javascript
動的に表示させる定数定義を行う
//-----------------------------
// 画像表示定数エリア
//-----------------------------
// 画像表示DIVのID名
const gazouString = "showGazou" ⇒①
const imgHTML = {
before:'<img style="width:80%" src="',
after:'" />'
} ⇒②①は画像表示のためのID名称です。
3枚表示させるので、showGazouの文字列と数値1～3を動的に取得・指定します。
そのため、本文の方にこれらのプログラムは配置しません。共通定数のため。
②は画像表示のためのHTMLを定義します。
imgタグで指定する画像URL(後述)の前後を定数にし、表示の際にURLと繋ぎます。
画像一覧をリスト化する
const showGazouArray = [ ⇒①
'https://nakayama-tech.com/wp-content/uploads/2023/10/blog-20220603-95.jpg',
【中略】
'https://nakayama-tech.com/wp-content/uploads/2023/01/blog-20230102-thumb-1.jpg'
⇒②
];①はconstで完全固定のリスト化してます。
このリストにはプログラム制御中に新たなURLを入れることは出来ません。
constを付与すると強制的に定数化されるのです。
②10個ある画像のうち最後のURLを示しています。
最後はカンマ（,）は不要です。
横並びにすると分かりやすいのですが・・・・
showGazouArray = [a,b,c,d];この時最後の配列にカンマは入れませんよね。縦にするとつい忘れがちなので、是非覚えておいてください。
画像取得と表示
//表示画像数
var gazouNum = 3; ⇒①
for(let i=0;i<gazouNum;i++) { ⇒②
// ランダム
var rand;
// DIVIDの名前（showGazou+数値）
var idNameTmp;
idNameTmp = gazouString + (i+1); ⇒③
// ランダム数値ゲット
rand = Math.floor(Math.random() * showGazouArray.length); ⇒④
// ランダム数値から、配列のインデックスを指定して広告のコードを取得
document.getElementById(idNameTmp).innerHTML = imgHTML.before + showGazouArray[rand] + imgHTML.after; ⇒⑤
}①は表示する画像数を設定します。②を3で固定しても良いですが、forループに固定値を入れたくないため変数化してます。
ループは処理が重くなるので、多少でもリスクがあれば直接いじってバグらないようにしたいです。
②は画像表示のループ処理です。
forループの真ん中はループ回数を指しますが、0スタートのため回数未満としてます（上記コードの場合は0から2までループ）。
③は画像表示HTML「showGazou」生成ロジックです。
HTML上では「showGazou1」「showGazou2」「showGazou3」を定義しています。
②のループは0スタートということで、+1してHTMLのID名を生成しております。
④はランダムの数値をゲットします。
Math.random()は0以上1未満の数値を返却します。
そこに配列の数（10）を乗算します。
例えばrandの返却値が0だったら10乗算しても0。そこに配列0、つまり1つ目の画像を取ります。
0.99であれば10乗算して9.9。切り捨てになるので9番目の配列の画像を取ります。
生成したID（1回目のループであればshowGazou1）にinnerHTMLでタグを挿入します。
まず、imgの定数の前を設定、そして配列のURL、後を設定する処理となっています。
HTMLの項で説明しましたが、DIVの箱だけ用意されているのでimgの命令を追加します。結果的に
<img style="width:80%" src="https://nakayama-tech.com/wp-content/uploads/2023/07/blog-20230726-03.jpg">とコードが表示されていました。
結果
ランダムの数値は問題ありませんでした。
あとは配列に設定したURLがしっかり読み込めているかを確認します。
1回目は全て違う値が返却されました。
毎度ランダム関数を呼んでいるため、数値が重複する可能性もあります。
2回目、うなぎの画像が重複しました。
配列の10番目（インデックスは9）に相当します。
対する炙りトロの画像は配列の1番目（インデックスは0）。
奇しくも初めと最後の画像が表示されました！
3回目は〆鯖を除き、違う画像が表示されました。
というか夜中に使う画像じゃない・・・
このように、ランダム関数で数値を取得⇒配列からURL取得して表示するということが出来ました。
※画像は中山競馬場福麺さん、八柱一心水産様、バーベキューのお肉(あじてさんお取り寄せ）
まとめ
さて、ランダムで数値を生成して画像を表示させるという手法をご紹介しました。
単純な例ではありますが、応用することでより良い使い方があると思います。
是非ご自身のWEBページ等で活用頂けたら嬉しいです。
最後までご覧頂き、ありがとうございました。
