2014/02/18

コンテンツのランダム表示を実現!Math.randomメソッドで乱数を生成する方法

【JavaScript】Math.randomメソッドで乱数を生成

ユーザーがページにアクセスする度に表示を変えたいという場合に,Math.randomメソッドを使用して生成した乱数を利用できます.

広告の表示などで毎回同じコンテンツが出ることを避けられ,ユーザーを飽きさせない仕掛けを作ることが出来ます.

目次

Math.random()メソッドの使い方

JavaScriptで乱数を生成するには,Math.random()メソッドを使用します.

var random = Math.random();

Math.random()メソッドは0以上1未満の少数値を返します.
生成される乱数は擬似乱数であり,乱数の種(seed)を指定することは出来ず,またパラメータを与えることもありません.

上記の方法では,少数値の乱数が生成されます.
整数値の乱数は以下のように記述することで求めることが出来ます.

//0~9までの整数による乱数
var random = Math.floor(Math.random() * 10);

//1~10までの整数による乱数
var random = Math.floor(Math.random() * 10) + 1;

//0~99までの整数による乱数
var random = Math.floor(Math.random() * 100);

//1~5までの整数による乱数
var random = Math.floor(Math.random() * 5) + 1;

掛ける数値を変更することで,乱数の範囲を変更することが出来ます.

動作サンプル

まとめ

アラートが出現する度に,違う値を生成しているのがわかると思います.

画像を使用したコンテンツに応用すれば,ユーザーに毎度違うコンテンツの提供が可能です.クリック率の向上に悩んでる方はこういうアプローチもどうでしょうか.