【JavaScript】アクセスするたびにランダムでコンテンツを表示する方法

Web開発において、ページのリフレッシュやアクセスのたびに異なるコンテンツを表示したい場合があります。例えば、サイトの訪問者に毎回新しいメッセージや引用を提供することで、ユーザーエクスペリエンスを向上させることができます。この記事では、JavaScriptを使用してシンプルに実現できる方法をご紹介します。

スポンサーリンク

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ランダムコンテンツ表示</title>
</head>
<body>
  <div id="randomContent"></div>

  <!-- JavaScriptの実装はこちらに追加 -->
</body>
</html>

JavaScript

次に、JavaScriptを使ってページが読み込まれるたびに異なるコンテンツを表示するコードを実装します。

<script>
  // ランダムなコンテンツのリスト
  const contentList = [
    "コンテンツ1",
    "コンテンツ2",
    "コンテンツ3",
    // 追加のコンテンツをここに追加
  ];

  // ページが読み込まれたときに呼び出される関数
  window.onload = function() {
    // ランダムなインデックスを生成
    const randomIndex = Math.floor(Math.random() * contentList.length);

    // ランダムなコンテンツを表示
    document.getElementById("randomContent").innerText = contentList[randomIndex];
  };
</script>

このスクリプトでは、contentListと呼ばれる配列に表示したいコンテンツを追加し、ページが読み込まれた際にランダムなインデックスを生成して対応するコンテンツを表示します。

よくある質問（FAQ）

Q. JavaScriptでランダムにコンテンツを表示するには？
A. Math.random()で0以上1未満の乱数を生成し、Math.floor()で配列のインデックスに変換します。例：array[Math.floor(Math.random() * array.length)]でランダム要素を取得できます。
Q. ページ読み込みのたびにランダムなコンテンツを表示するには？
A. DOMContentLoadedイベントでランダム選択処理を実行し、対象要素のinnerHTMLやsrcを更新します。複数要素の中から一つ表示する場合はdisplay切り替えが簡単です。
Q. ランダム表示で同じものが連続しないようにするには？
A. 前回表示したインデックスを変数に保存し、同じインデックスが選ばれた場合は再抽選するループ処理を実装します。候補が少ない場合はシャッフル後に順番に表示する方法も有効です。

まとめ

広告やメインビジュアルなどをランダムで表示したい場合に便利です。