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(), ジェネレータ, ミニロト

: 【JS】「コナミコマンド」入力でアクションを起こすスクリプトを作ってみた

以前より作ってみたかった「コナミコマンド」スクリプトを、時間が空いたところで作ってみました。

: 【JS】マウスオーバーでブロックごとスライドしてくるナビゲーションバーをjQueryで組んでみた

マウスオーバーすると画面外に隠れていたナビゲーションバー、HTMLでいうところのリストタグでできた部分がスライドして出てくるスクリプトは調べていていくつか見たのですが、メニュー部分そのもの（HTMLでいうところのULタグ）が出てくるってのは見かけなかったので、自分で作ってみました。

: 【jQuery】下方へスクロールしたらトップへ戻るボタンを表示して、スムーズにページトップへ帰るスクリプトを組んでみた

下スクロールでふわっと表示させ、クリックすると上部へスルスルっと戻って消えるというスクリプトを組んでみました。戻るボタンもテキストではなく画像にし、ファイル名末尾に「_on」をつけた画像で差し替えも行なっています。

: Twitter風にページ上部にメッセージを通知するスクリプトを2種、jQueryで組んでみた

ツイッター風の通知バーを作りたくなり、jQueryで組んでみましたので、公開。コード自体はほんの少しなんですが、なかなかうまく行かず結構時間が掛かってしまった…。

: 【JS】チェックボックスでフォームの disabled を設定/解除するスクリプトをjQueryで組んでみた

チェックボックスでフォームのdisabledを制御するjQueryのスクリプトを作成したので忘備録としてポストします。

PREV: 眼から鱗な「桃」の皮のむき方を教えてもらった。
NEXT: 2014年9月の中秋の名月と前日のお月さま。

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

Javascriptで乱数

Math.random()

Math.ceil()

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

1～31を5個

重複なし処理

デモ

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,291)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,575)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (255,032)

【歴史】江戸幕府歴代将軍一覧 (142,980)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,969)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (128,047)