【PR】を含みます。

フロントエンド

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

JavaScriptで既存のHTML要素をランダムに表示する方法

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

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

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

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

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

サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
サンプル6

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

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

HTML
Copy
  1. <div class="random_box">
  2.   <div class="random_item">
  3.     <img src="image URL" alt="サンプル">
  4.   </div>
  5.   <div class="random_item">
  6.     <img src="image URL" alt="サンプル">
  7.   </div>
  8.   <div class="random_item">
  9.     <img src="image URL" alt="サンプル">
  10.   </div>
  11.   <div class="random_item">
  12.     <img src="image URL" alt="サンプル">
  13.   </div>
  14.   <div class="random_item">
  15.     <img src="image URL" alt="サンプル">
  16.   </div>
  17.   <div class="random_item">
  18.     <img src="image URL" alt="サンプル">
  19.   </div>
  20. </div>
CSS
Copy
  1. .random_box {
  2.   display: flex;
  3.   gap: 30px;
  4.   flex-wrap: wrap;
  5.   padding: 0 20px;
  6. }
  8. .random_item {
  9.   width: calc((100% - 60px) / 3);
  10. }
  12. .random_item img {
  13.   width: 100%;
  14.   height: auto;
  15. }
JavaSctipt
Copy
  1. //読み込み時に実行
  2. shuffleElements();
  4. function shuffleElements() {
  5.   let randomBox = document.querySelectorAll('.random_box');
  7.   // randomBoxがnullまたはundefinedであるかチェック
  8.   if (!randomBox || randomBox === 0) {
  9.     return; // 要素が見つからない場合、関数を終了
  10.   }
  12.   for (let i = 0; i < randomBox.length; i++) {
  13.     let elements = randomBox[i].querySelectorAll('.random_item');
  15.     // elementsがnullまたはundefinedであるかチェック
  16.     if (!elements || elements.length === 0) {
  17.       return; // 要素が見つからない場合、関数を終了
  18.     }
  20.     let elementsArray = Array.from(elements);
  22.     // Fisher-Yatesで配列をランダムに並び替え
  23.     for (let j = elementsArray.length - 1; j > 0; j--) {
  24.       let randomIndex = Math.floor(Math.random() * (j + 1));
  25.       [elementsArray[j], elementsArray[randomIndex]] = [elementsArray[randomIndex], elementsArray[j]];
  26.     }
  28.     // randomBoxをクリア
  29.     while (randomBox[i].firstChild) {
  30.       randomBox[i].removeChild(randomBox[i].firstChild);
  31.     }
  33.     // ランダムに並び替えた要素を再配置
  34.     elementsArray.forEach(function(element) {
  35.       randomBox[i].appendChild(element);
  36.     });
  37.   }
  38. }

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

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

サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
サンプル6

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

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

HTML
Copy
  1. <div class="fixed_random-box">
  2.   <div class="random_item -fixed">
  3.     <img src="image URL" alt="サンプル">
  4.   </div>
  5.   <div class="random_item">
  6.     <img src="image URL" alt="サンプル">
  7.   </div>
  8.   <div class="random_item">
  9.     <img src="image URL" alt="サンプル">
  10.   </div>
  11.   <div class="random_item">
  12.     <img src="image URL" alt="サンプル">
  13.   </div>
  14.   <div class="random_item">
  15.     <img src="image URL" alt="サンプル">
  16.   </div>
  17.   <div class="random_item">
  18.     <img src="image URL" alt="サンプル">
  19.   </div>
  20. </div>
CSS
Copy
  1. .fixed_random-box {
  2.   display: flex;
  3.   gap: 30px;
  4.   flex-wrap: wrap;
  5.   padding: 0 20px;
  6. }
  8. .random_item {
  9.   width: calc((100% - 60px) / 3);
  10. }
  12. .random_item img {
  13.   width: 100%;
  14.   height: auto;
  15. }
JavaSctipt
Copy
  1. //読み込み時に実行
  2. fixedShuffleElements();
  4. function fixedShuffleElements() {
  5.   let fixedRandomBox = document.querySelectorAll('.fixed_random-box');
  7.   // fixedRandomBoxがnullまたはundefinedであるかチェック
  8.   if (!fixedRandomBox || fixedRandomBox === 0) {
  9.     return; // 要素が見つからない場合、関数を終了
  10.   }
  12.   for (let i = 0; i < fixedRandomBox.length; i++) {
  13.     let elements = fixedRandomBox[i].querySelectorAll('.random_item');
  15.     // elementsがnullまたはundefinedであるかチェック
  16.     if (!elements || elements.length === 0) {
  17.       continue; // 要素が見つからない場合、処理をスキップ
  18.     }
  20.     let elementsArray = Array.from(elements);
  22.     // -fixedクラスを持つ要素を取得
  23.     let fixedElements = elementsArray.filter(function(element) {
  24.       return element.classList.contains('-fixed');
  25.     });
  27.     // -fixedクラスを持つ要素を除いた要素を取得
  28.     let nonFixedElements = elementsArray.filter(function(element) {
  29.       return !element.classList.contains('-fixed');
  30.     });
  32.     // 非固定要素をFisher-Yatesでランダムに並び替え
  33.     for (let j = nonFixedElements.length - 1; j > 0; j--) {
  34.       let randomIndex = Math.floor(Math.random() * (j + 1));
  35.       [nonFixedElements[j], nonFixedElements[randomIndex]] = [nonFixedElements[randomIndex], nonFixedElements[j]];
  36.     }
  38.     // fixedRandomBoxをクリア
  39.     while (fixedRandomBox[i].firstChild) {
  40.       fixedRandomBox[i].removeChild(fixedRandomBox[i].firstChild);
  41.     }
  43.     // 固定要素を先頭に、それ以外の要素を後ろに配置
  44.     fixedElements.forEach(function(element) {
  45.       fixedRandomBox[i].appendChild(element);
  46.     });
  48.     nonFixedElements.forEach(function(element) {
  49.       fixedRandomBox[i].appendChild(element);
  50.     });
  51.   }
  52. }

アルゴリズムを学びたい方におすすめの1冊

アイコン画像

もみじ

アルゴリズムとそれを支える数学について基礎から学びたい人にオススメの一冊です。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-フロントエンド
-