JavaScript で 配列 を シャッフル する 方法

2015年2月15日 20:45 0 件のコメント

配列を ランダム に シャッフル する アルゴリズム は Fisher-Yates法 というものが有名なようなので、それを JavaScript 向けに実装してみました。 元々の配列（Array）を拡張する方法、jQuery を拡張する方法もあわせて掲載しています。

Fisher-Yates法

Fisher-Yates シャッフル は Knuth シャッフル としても知られているものだそうです。 最初の考案は 1938年 にもさかのぼる古いもののようです。

基本コード

まずは純粋に基本となるコードを掲載します。 これを元にした、配列(Array) の拡張、jQuery の拡張は後に記載します。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
* 指定された配列を Fisher–Yates法 で シャッフルします。
* （注意：引数に渡した配列自体をシャッフルします。）
* @param    number[]    arr     シャッフルしたい配列
* @return   number[]    シャッフルされた配列
*/
var shuffle = function (arr) {
    var i, j, tmp, length;
 
    for (length = arr.length, i = length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        tmp = arr[i];
        arr[i] = arr[j];
        arr[j] = tmp;
    }
 
    return arr;
};

配列(Array)の機能拡張として shuffle メソッド を追加する方法

配列自体を拡張したい場合、上記のメソッドを Array のプロトタイプへ設定すれば可能となります。 いわゆる prototype拡張 といったところです。 配列を引数として取らない代わりに、this を利用しているところがポイントです。

?
1
2
3
4
5
6
7
8
9
10
11
12
Array.prototype.shuffle = function () {
    var i, j, tmp, length;
 
    for (length = this.length, i = length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        tmp = this[i];
        this[i] = this[j];
        this[j] = tmp;
    }
 
    return this;
};

jQuery の プラグイン として shuffle メソッド を追加する方法

jQuery に shuffle メソッド を拡張する場合、プラグインとして機能追加します。 具体的には以下のようなコードになります。

jquery.shuffle.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function (window, document, $, undefined) {
    $.fn.shuffle = function () {
        var i, j, tmp, length;
 
        for (length = this.length, i = length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            tmp = this[i];
            this[i] = this[j];
            this[j] = tmp;
        }
 
        return this;
    };
})(window, document, jQuery);

ちなみに、上記の jQuery.shuffle を利用して、リスト（li）をシャッフルするコード(HTML と JavaScript)は以下のようになります。

?
1
2
3
4
5
6
7
<ul id='list'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
?
1
$('#list li').shuffle().appendTo('#list');

参考記事

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！