JavaScriptで、配列の中身をシャッフルするのに便利なサンプルコード

JavaScritpで配列の要素をシャッフルする関数やメソッドは用意されていません。

なので、ご自身で関数を組む必要があります。

有名なのは「Fisher Yates(フィッシャーイェーツのアルゴリズム)」です。

これを元にしたサンプルコードを紹介しますので、参考にしてください。

サンプルコード

シャッフルに使う関数

まずは、シャッフルに利用するサンプルコードを紹介します。

私の場合は、この関数をどんな開発でも利用する様に整理しているJSスクリプト(自分用のブートストラップ)に格納しています。

JavaScript
/**
 * 配列をシャッフルします。
 * 元の配列は変更せず、新しい配列を返します。
 * @param sourceArr 元の配列
 * @returns シャッフルされた配列
 */
function shuffleArray(sourceArr) {
  // 元の配列の複製を作成
  const array = sourceArr.concat();
  // Fisher–Yatesのアルゴリズム
  const arrayLength = array.length;
  for (let i = arrayLength - 1; i >= 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [array[i], array[randomIndex]] = [array[randomIndex], array[i]];
  }

  return array;
}

関数を利用したデモ

サンプルコードとして、数字をシャッフルして新しい配列に格納するサンプルコードを紹介します。

Output
シャッフルされる前の配列を出力 1,2,3,4,5,6,7,8,9,10
シャッフルされたあとの配列を出力
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th シャッフルされる前の配列を出力
					td 1,2,3,4,5,6,7,8,9,10
				tr
					th シャッフルされたあとの配列を出力
					td#targetText
JavaScript
const targetText = document.getElementById('targetText');
const sampleDatas = [1,2,3,4,5,6,7,8,9,10];
const sampleDatasShuffled = shuffleArray(sampleDatas);

/**
 * 配列をシャッフルします。
 * 元の配列は変更せず、新しい配列を返します。
 * @param sourceArr 元の配列
 * @returns シャッフルされた配列
 */
function shuffleArray(sourceArr) {
  // 元の配列の複製を作成
  const array = sourceArr.concat();
  // Fisher–Yatesのアルゴリズム
  const arrayLength = array.length;
  for (let i = arrayLength - 1; i >= 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [array[i], array[randomIndex]] = [array[randomIndex], array[i]];
  }

  return array;
}

targetText.textContent = sampleDatasShuffled;
インストラクター
コメント

コメントを残す