エンジニアの将来って?

現在7年目のCOBOL→Java→C#エンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

JavaScriptで乱数を生成

こんにちは。たいらです。
今回の記事はJavaScriptのアウトプット記事です。
JavaScriptのrandom()メソッドを使って、乱数を発生させるプログラムを作成してみました。
その乱数を使って、動物の英語名クイズを作ってみました。

 目次

フォルダ構成

フォルダ構成は下記の通りです。

f:id:Tairax:20171010210421p:plain

作ったプログラム

今回作ったのは乱数を発生させるための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> 

解説

乱数を発生させている箇所はここです。

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までの乱数ができるというわけです。

実行結果

早速表示させてみましょう!

f:id:Tairax:20171010212208p:plain

何の乱数が生成されたか分からないので、適当に鳥ボタンを押します。

f:id:Tairax:20171010212434p:plain

正解とalertが出ました!

f:id:Tairax:20171010212529p:plain

不正解が出ることを願いつつ、適当にネズミボタンを押しましょう。

f:id:Tairax:20171010212636p:plain

不正解のalertが出ました!

まとめ

いかがでしたか? JavaScriptの乱数の仕様について、皆さんが少しでも理解が深まったのであれば幸いです。
ではでは~(・ω・)ノシ

参考にさせて頂いたサイト様

乱数を扱う-JavaScript入門

random関数 - Mathクラス - JavaScript入門

他にも勉強記事を書いています。
良ければ、ご参考ください。

毎日最低1時間勉強している私がお伝えする、勉強を始めたきっかけと続けるコツ - エンジニアの将来って?

JavaのTreeSetの特徴を分かりやすく解説します。 - エンジニアの将来って?

JavaScriptのlastModifiedを使って、現在表示しているページの最終更新日とファイル名を取得して表示させる - エンジニアの将来って?