【PR】を含みます。

フロントエンド

【JavaScript】既存のHTML要素をランダムに表示する(並び替える)方法

JavaScript 既存のHTML要素をランダムに表示する(並び替える)方法

JavaScriptで既存のHTML要素をランダムに表示する(並び替える)方法を解説します。

また、先頭の要素は固定してそれ以外の要素をランダムに表示する方法も解説しています。

ランダムアルゴリズムとして、偏りが少ないといわれているFisher-Yatesを採用しています。

【サンプル】既存のHTML要素をランダムに並び替え

ページを更新するたびに、下記画像がランダムな順番で表示されます。

サイコロ1
サイコロ2
サイコロ3
サイコロ4
サイコロ5
サイコロ6

【実装コード】既存のHTML要素をランダムに並び替え

下記HTML・CSS・JavaScriptをコピペすることで既存のHTML要素をランダムに表示することができます。

Copyをクリックするとコピーできます。

HTML
Copy
<div class="random-box">
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
</div>
CSS
Copy
.random-box {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 0 20px;
  opacity: 0;
}
.random-box.is-visible {
  opacity: 1;
}
.random-item {
  width: calc((100% - 60px) / 3);
}
.random-item img {
  width: 100%;
  height: auto;
}
JavaScript
Copy
//読み込み時に実行
shuffleElements();
function shuffleElements() {
  const randomBox = document.querySelectorAll('.random-box');
  // 要素が見つからない場合、関数を終了
  if (!randomBox.length) {
    return;
  }
  for (let i = 0; i < randomBox.length; i++) {
    let elements = randomBox[i].querySelectorAll('.random-item');
    // 要素が見つからない場合、処理をスキップ
    if (!elements.length) {
      continue;
    }
    let elementsArray = Array.from(elements);
    // Fisher-Yatesで配列をランダムに並び替え
    for (let j = elementsArray.length - 1; j > 0; j--) {
      let randomIndex = Math.floor(Math.random() * (j + 1));
      [elementsArray[j], elementsArray[randomIndex]] = [elementsArray[randomIndex], elementsArray[j]];
    }
    // randomBoxをクリア
    while (randomBox[i].firstChild) {
      randomBox[i].removeChild(randomBox[i].firstChild);
    }
    // ランダムに並び替えた要素を再配置
    elementsArray.forEach(function(element) {
      randomBox[i].appendChild(element);
    });
    randomBox[i].classList.add('is-visible');
  }
}

【サンプル】先頭のHTML要素は固定して、その他の要素をランダムに並び替え

ページを更新するたびに、先頭の画像（サイコロ1）は固定のままで、それ以外の画像はランダムな順番で表示されます。

サイコロ1
サイコロ2
サイコロ3
サイコロ4
サイコロ5
サイコロ6

【実装コード】先頭のHTML要素は固定して、その他の要素をランダムに並び替え

下記HTML・CSS・JavaScriptをコピペすることで先頭のHTML要素は固定して、その他の要素をランダムに並び替えることができます。

Copyをクリックするとコピーできます。

HTML
Copy
<div class="fixed-random-box">
  <div class="random-item is-fixed">
    <img src="image URL" alt="サンプル">
  </div>
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
  <div class="random-item">
    <img src="image URL" alt="サンプル">
  </div>
</div>
CSS
Copy
.fixed-random-box {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 0 20px;
  opacity: 0;
}
.fixed-random-box.is-visible {
  opacity: 1;
}
.random-item {
  width: calc((100% - 60px) / 3);
}
.random-item img {
  width: 100%;
  height: auto;
}
JavaScript
Copy
//読み込み時に実行
fixedShuffleElements();
function fixedShuffleElements() {
  const fixedRandomBox = document.querySelectorAll('.fixed-random-box');
  // 要素が見つからない場合、関数を終了
  if (!fixedRandomBox.length) {
    return;
  }
  for (let i = 0; i < fixedRandomBox.length; i++) {
    let elements = fixedRandomBox[i].querySelectorAll('.random-item');
    // 要素が見つからない場合、処理をスキップ
    if (!elements.length) {
      continue;
    }
    let elementsArray = Array.from(elements);
    // is-fixedクラスを持つ要素を取得
    let fixedElements = elementsArray.filter(function(element) {
      return element.classList.contains('is-fixed');
    });
    // is-fixedクラスを持つ要素を除いた要素を取得
    let nonFixedElements = elementsArray.filter(function(element) {
      return !element.classList.contains('is-fixed');
    });
    // 非固定要素をFisher-Yatesでランダムに並び替え
    for (let j = nonFixedElements.length - 1; j > 0; j--) {
      let randomIndex = Math.floor(Math.random() * (j + 1));
      [nonFixedElements[j], nonFixedElements[randomIndex]] = [nonFixedElements[randomIndex], nonFixedElements[j]];
    }
    // fixedRandomBoxをクリア
    while (fixedRandomBox[i].firstChild) {
      fixedRandomBox[i].removeChild(fixedRandomBox[i].firstChild);
    }
    // 固定要素を先頭に、それ以外の要素を後ろに配置
    fixedElements.forEach(function(element) {
      fixedRandomBox[i].appendChild(element);
    });
    nonFixedElements.forEach(function(element) {
      fixedRandomBox[i].appendChild(element);
    });
    fixedRandomBox[i].classList.add('is-visible');
  }
}

まとめ

JavaScriptでHTML要素をランダムに並び替える方法を解説しました。

実装のポイント

  • Fisher-Yatesアルゴリズムを使用して偏りのないランダム並び替えを実現
  • DOM要素を配列に変換してから並び替え、再配置する
  • 先頭要素を固定したい場合は、is-fixedクラスで要素を分類

使用場面の例

  • 商品一覧の表示順序をランダム化
  • 画像ギャラリーの表示順序を変更
  • クイズの選択肢をランダムに並び替え
  • おすすめ記事の表示順序をランダム化

注意点

  • ページ読み込み時に実行されるため、毎回異なる順序で表示される
  • SEOを考慮する場合は、重要なコンテンツは固定表示を検討
  • 大量の要素がある場合は、パフォーマンスに注意

上記のコードをコピペして、ご自身のプロジェクトに合わせてカスタマイズしてください。

-フロントエンド
-