jsWaffleでAndroidアプリを作ろう！クイズアプリ編⑤
サクウェブＴＶはコチラ↓↓↓
では、前回までに作ったクイズアプリをランダム出題形式に変更してみます。
どうやってランダム出題形式にするかというと、今回はクイズデータの格納されている変数listの中身をシャッフルしてしまう方法をとることにしましょう。
配列をシャッフルする処理は関数にまとめてしまいます。
script.jsの$(function(){◆◆});の◆◆の部分の一番最後に（どこでもいいですが）以下のスクリプトを追記してください。
function shaffle(arr){
for(var i=0;i<arr.length;i++){
var num = Math.floor(Math.random()*arr.length);
var temp = arr[num];
arr[num] = arr[i];
arr[i] = temp;
}
return arr;
}
これは引数に渡した配列をシャッフルするための関数です。
説明をしましょう。
for(var i=0;i<arr.length;i++)
の部分で引数で渡された配列arrの中身を全て順にループ処理をする宣言をします。
ループ処理の中身は
var num = Math.floor(Math.random()*arr.length); var temp = arr[num]; arr[num] = arr[i]; arr[i] = temp;
となっています。
まず、Math.random()で０～１までの乱数を取得し、それにarr.length（配列の要素の個数）を掛けることで０～配列の個数までの乱数を生成します。
乱数は浮動小数ですので、小数点以下を切り捨てて整数にするためにMath.floor()を適用します。すると、０から配列の個数－１までの整数が得られます。
それを、変数numに代入しているわけです。
現在、クイズの問題は３問ですので、配列の要素は３つとなります。
したがって、ここまでの処理で得られる数字は０～２までのいずれかの整数ということになります。
さて、このあとは具体例をあげながら説明していきます。
例えば、今for文のループ１回目だとしましょう。つまり変数iには０が格納されています。そして、さきほどの方法で取得した整数numが２だったとしましょう。
すると、整数numの取得後の処理は
var temp = arr[2];
となり、arrに格納されている配列のうち、キーが2になっているものをtempに代入してとっておきます。
この処理の理由はその下の
var arr[num] = arr[i];
でarr[num]が（今回の例ではarr[2]が）書きかえられてしまうからです。
つまり書きかえられる前の値をtempに一時的に保管しておく意図があるわけです。
例としては、numは２、iは０ですから、
var arr[2] = arr[0];
となりarr[2]の内容はarr[0]が代入され書きかえられます。
最後に
arr[0] = temp;
とすることでもともとarr[2]に入っていたものをarr[0]に代入して書きかえます。
これをfor文で配列の個数回繰り返すわけです。
つまり何が行われているかわかるでしょうか？
要するにもともとある配列の要素を２つ選び出してきて、中身を交換する作業を配列の個数回繰り返すことで配列の要素をバラバラにしているわけです。
これがshaffle関数の仕組みです。
さて、だいぶ説明が長くなってしまいました。
実際にシャッフルしてクイズとして出題する処理は次回にしましょう。
