jQueryで「ミニロト」番号ジェネレータを作ってみた

2014/09/08 2017/12/06

JavaScript でランダムな文字列なり数値を作成するのってどうするんだ、と思い調査しました。
その時についでに「ミニロト」番号のジェネレータを作ったので、晒してみます。

Javascriptで乱数

Math.random()

Javascriptで乱数を発生させる場合は Math.random() 関数を使います。
引数なしで返り値が 0.0 以上、1.0 未満の乱数を返すという、若干「？？？」となってしまいがちですが、実例を見ればなんとなく解ると思います。

for (var i=0; i<10; i++) {
    console.log(Math.random());
}

for (var i=0; i<10; i++) {

console.log(Math.random());

}

結果の一例は以下の様な感じ。

0.7201108081159188
0.8400530997003633
0.9837428758596342
0.9568856325106788
0.3239662292339288
0.7520360994217516
0.46303849109382667
0.8411066573238926
0.48799327216937505
0.004728576068071755

0.7201108081159188

0.8400530997003633

0.9837428758596342

0.9568856325106788

0.3239662292339288

0.7520360994217516

0.46303849109382667

0.8411066573238926

0.48799327216937505

0.004728576068071755

任意の範囲の乱数を取得したい場合は、以下のようにします。
サンプルとして、1～15の範囲で10個、発生させます。

for (var i=0; i<10; i++) {
    var maxNum = 15;
    var ret = Math.ceil(Math.random() * maxNum);

    console.log(ret);
}

for (var i=0; i<10; i++) {

var maxNum = 15;

var ret = Math.ceil(Math.random() * maxNum);

console.log(ret);

}

結果。

Math.ceil()

Math.ceil() は、小数点以下の値を切り上げした結果を返す関数です。
結果のサンプルは以下のようになります。

Math.ceil(0.04222680765458953)　⇒　1
Math.ceil(14.292958431967962)　⇒　15
Math.ceil(9.063451149698416)　⇒　10

Math.ceil(0.04222680765458953)　⇒　1

Math.ceil(14.292958431967962)　⇒　15

Math.ceil(9.063451149698416)　⇒　10

ミニロト番号ジェネレータ

1～31を5個

以上を踏まえて、ミニロト用の番号ジェネレータを作ってみます。
ミニロトの仕様は 1～31 の重複なし番号を 5個です。

まずは、1～31 を 5個ってところから。
先ほどの式をそのまま使えます。

// 作成個数
var count = 5;

// 最大値
var maxNum = 31;

for (var i=1; i<count; i++) {
    tmpVal = Math.ceil(Math.random() * maxNum);

    console.log(tmpVal);
}

// 作成個数

var count = 5;

// 最大値

var maxNum = 31;

for (var i=1; i<count; i++) {

tmpVal = Math.ceil(Math.random() * maxNum);

console.log(tmpVal);

}

ここまでは何も考えずに作れますね。

重複なし処理

次に、重複なしって処理を加えます。
考え方は『作成した数値が既にある場合は再度作成する』って風にしました。

// 作成個数
var count = 5;

// 最大値
var maxNum = 31;

// 生成した乱数を格納する配列を初期化
var genArray = new Array();

// 生成した乱数を格納している配列の長さ（生成した乱数の数）を初期化
var generatedCount = 0;

// count回数 Math.random() で乱数(1～maxNum)を発生
for(var i=0 ; i<count; i++){
    var tmpVal = Math.ceil(Math.random() * maxNum);

    // 今まで生成された乱数と同じ場合は、再度乱数を発生
    for(var j=0; j<generatedCount; j++) {
        if(tmpVal == genArray[j]){
            tmpVal = Math.ceil(Math.random() * maxNum);
            j= -1;
        }
    }
    genArray[i] = tmpVal;
    generatedCount++;
}
console.log(genArray);

// 作成個数

var count = 5;

// 最大値

var maxNum = 31;

// 生成した乱数を格納する配列を初期化

var genArray = new Array();

// 生成した乱数を格納している配列の長さ（生成した乱数の数）を初期化

var generatedCount = 0;

// count回数 Math.random() で乱数(1～maxNum)を発生

for(var i=0 ; i<count; i++){

var tmpVal = Math.ceil(Math.random() * maxNum);

// 今まで生成された乱数と同じ場合は、再度乱数を発生

for(var j=0; j<generatedCount; j++) {

if(tmpVal == genArray[j]){

tmpVal = Math.ceil(Math.random() * maxNum);

j= -1;

}

genArray[i] = tmpVal;

generatedCount++;

}

console.log(genArray);

結果例
配列で返しています。

 [16, 11, 19, 24, 4]

1	[16, 11, 19, 24, 4]

あとはこれをjQueryを使って表示させれば出来上がり。

なのですが、ちょっと凝ってみます。
数字がうまく昇順で並んでいないので、ソートさせます。

// 作成個数
var count = 5;

// 最大値
var maxNum = 31;

// 生成した乱数を格納する配列を初期化
var genArray = new Array();

// 生成した乱数を格納している配列の長さ（生成した乱数の数）を初期化
var generatedCount = 0;

// count回数 Math.random() で乱数(1～maxNum)を発生
for(var i=0 ; i<count; i++){
    var tmpVal = Math.ceil(Math.random() * maxNum);

    // 今まで生成された乱数と同じ場合は、再度乱数を発生
    for(var j=0; j<generatedCount; j++) {
        if(tmpVal == genArray[j]){
            tmpVal = Math.ceil(Math.random() * maxNum);
            j= -1;
        }
    }
    genArray[i] = tmpVal;
    generatedCount++;
}
console.log(genArray);  // ←(1)

// 昇順並び替え
genArray = genArray.sort(sortNumber);

console.log(genArray);  // ←(2)

// ソート用の、数を比較する関数
function sortNumber(a,b){
    return a - b;
}

// 作成個数

var count = 5;

// 最大値

var maxNum = 31;

// 生成した乱数を格納する配列を初期化

var genArray = new Array();

// 生成した乱数を格納している配列の長さ（生成した乱数の数）を初期化

var generatedCount = 0;

// count回数 Math.random() で乱数(1～maxNum)を発生

for(var i=0 ; i<count; i++){

var tmpVal = Math.ceil(Math.random() * maxNum);

// 今まで生成された乱数と同じ場合は、再度乱数を発生

for(var j=0; j<generatedCount; j++) {

if(tmpVal == genArray[j]){

tmpVal = Math.ceil(Math.random() * maxNum);

j= -1;

}

genArray[i] = tmpVal;

generatedCount++;

}

console.log(genArray); // ←(1)

// 昇順並び替え

genArray = genArray.sort(sortNumber);

console.log(genArray); // ←(2)

// ソート用の、数を比較する関数

function sortNumber(a,b){

return a - b;

}

これで、以下のようになります。

 [8, 20, 9, 5, 3]   // ←(1)
 [3, 5, 8, 9, 20]   // ←(2)

1 2	[8, 20, 9, 5, 3] // ←(1) [3, 5, 8, 9, 20] // ←(2)

仕様はこれで満たせました。
あとはボタンを押した時に実行させ、数字を表示させるだけです。
その辺りは実際のデモをのソースを見て頂ければと思います。

なお、結果数字の表示には jQueryのライブラリである『jquery.textAnimation』を使用させて頂いています。

jquery.textAnimation

デモ

デモはこちらから。

-Javascript,jQuery
-javascript, jquery, js, Math.ceil, Math.random(), ジェネレータ, ミニロト

: 「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた

以前作成した「クリックしたらツールチップを表示するスクリプト」がQiitaでいい感じに改造されていたのに影響を受け、もう少しだけ上手に書いた(と思う) バージョン2がようやく出来上がったので晒してみたいと思います。