JavaScript | 配列の値をランダムにシャッフルする方法

2021-12-05JavaScript 配列,JavaScript

JavaScriptで配列の要素、値をランダムに並び替える（シャッフルする）方法を紹介しています。

JavaScriptにはshuffle関数はないので、用途に合わせてコードを書くか、配列やオブジェクトのランダムな並び替えが可能な機能があるライブラリを使う方法になるかと思います。

1. 配列の値をランダムにシャッフルする

配列の値をランダムにシャッフルする

配列をランダムに並び替える方法のひとつです。

サンプルでは配列からランダムな数値のキー名を持つオブジェクトを作成して値を配列に戻しています。

キー名が数値の場合は数値が小さい順に並びますので、それを利用しています。

生成するランダムの数値はもっと少なくても良いですが、配列の値の数より少ないと無限ループしてしまいます。
また、無駄なやり直し処理を発生させない為に、想定される配列の値の数より一桁以上は多くしておくと良いでしょう。

let array = ['apple', 'banana', 'pine', 'grape'];

function shuffle(array) {
	// 空のオブジェクトを作成する
	let obj = {};

	// 受け取った配列を繰り返す
	for (let i = 0; i < array.length; i++) {

		// ランダムな数値を生成する ※配列の数より少ないと永久ループする
		let rand = Math.floor(Math.random() * 10000000);

		// 同じキー名がないか判別する
		if (!obj[rand]) {
			// 同じキー名がない場合にobjに追加する
			obj[rand] = array[i];
		} else {
			// 同じキー名ある場合、やり直す
			i--;
		}

	}

	// 作成したオブジェクトの値から配列を作成して返す
	return Object.values(obj);
}

array = shuffle(array);

console.log(array);
// ['grape', 'banana', 'apple', 'pine']

オブジェクトの値を使った配列に変換するのにObject.values()メゾッドを利用しています。