【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と呼ばれる配列に表示したいコンテンツを追加し、ページが読み込まれた際にランダムなインデックスを生成して対応するコンテンツを表示します。

まとめ

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