こんにちは。たいら(@tairaengineer2)です。
この記事では、 JavaScript の乱数を発生させるrandomメソッドについて解説します。
スポンサーリンク
乱数を発生させるrandomメソッドとは
randomメソッドは、乱数を発生させるメソッドです。
Math.random()関数は、0–1（0以上、1未満）の範囲で浮動小数点の擬似乱数を返します。
その範囲ではほぼ均一な分布で、ユーザーは範囲の拡大をすることができます。
Math.random() - JavaScript | MDNから引用させて頂きました
randomメソッドは、下記のように書くと乱数を取得できます。
var sample = Math.random();では、次の章で実際に使ってみます。
解説で使うプログラム
今回作ったのは乱数を発生させるためのJavaScriptを1ファイル、それを表示するためのHTMLを1ファイル作りました。
JavaScript
// 動物の配列
var animalList = new Array("dog","cat","bird","mouse","monkey");
// 動物の日本語名の配列
var animalJPNList = new Array("犬","猫","鳥","ネズミ","サル");
// 生成した乱数を格納
var random;
/**
* 乱数を発生させる関数
*/
function question() {
// 0から4までの乱数を生成
random = Math.floor(Math.random() * 5);
// テキストボックスに動物の英語名を格納
document.quiz.elements[0].value = animalList[random];
}
/**
* ボタンが押下されたとき判定する関数
* @param button 押されたボタン
*/
function push(button) {
// 押下されたボタンのidとvalueを取得
var id = button.id;
var value = button.value;
// 押下されたボタンがテキストボックス内の英語名と一致しているか判定
if (id == animalList[random]) {
alert("正解！");
question();
} else {
alert("不正解！\n正解は" + animalJPNList[random]);
question();
}
}HTML
<!DOCTYPE html>
<html>
<head>
<title>乱数</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script type="text/javascript" src="../script/CreateRondom.js"></script>
</head>
<body onload="question()">
<form name="quiz">
<input type="text" value="" id="textBox">
<input type="button" value="犬" id="dog" onclick="push(this)">
<input type="button" value="猫" id="cat" onclick="push(this)">
<input type="button" value="鳥" id="bird" onclick="push(this)">
<input type="button" value="ネズミ" id="mouse" onclick="push(this)">
<input type="button" value="サル" id="monkey" onclick="push(this)">
</form>
</body>
</html> フォルダ構成
フォルダ構成は下記の通りです。
実行結果
早速表示させてみましょう！
何の乱数が生成されたか分からないので、適当に鳥ボタンを押します。
正解とalertが出ました！
不正解が出ることを願いつつ、適当にネズミボタンを押しましょう。
不正解のalertが出ました！
解説
乱数を発生させている箇所はここです。
Math.random() * 5この「*5」というのがポイントです。
もし「*5」をしないと、0から1未満の乱数が生成されます。
今回作った配列の長さは5です。
返ってくる乱数が0から1未満だと、配列を指定することができません。
なので、生成した乱数に対して「*5」をします。
そうすると、返ってくる乱数が0から4.999…未満になります。
0から4.999…未満の乱数に対して、
Math.floor(Math.random() * 5);floorメソッドを使って、小数点以下を切り捨てています。
切り捨てることで、0から4までの乱数ができるというわけです。
スポンサーリンク
まとめ：乱数を使ってみよう！
以上が乱数を作成するrandomメソッドについての解説でした！
乱数を作成するとき、ぜひ使ってみてください。
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
ほかにもJavaScript解説記事を書いてます。
よければご参考ください。
【JavaScript】matchメソッドを使って、正規表現で文字列判定するやり方を解説します
【JavaScript】lastModifiedを使って、現在表示しているページの最終更新日とファイル名を取得して表示させる