JavaScriptでランダムな値の取得を使えるようになると、いろんなものをランダムで取得できるようになります。
例えば、ものすごく簡単なもので言うとおみくじ。
↓とりあえずクリック！
ランダムな値は、下記を使うことによって取得できます。
Math.random();Math.random()は、0以上1未満の数字（0〜0.9999…）をランダムで取得してくれます。
逆に「この配列からランダムに値を取得してくれる」というプロパティはJavaScriptには存在しません。
配列から何か値をランダムで取得したい場合、Math.random()を応用するという形になります。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます！
それでは本文へ、レッツゴー！
まずは乱数を取得する
Math.random()は、0以上1未満の数字（0〜0.9999…）をランダムに取得することができます。
サンプルコード
<script>
console.log(Math.random());
</script>ではこの乱数を使って、どのように配列からランダムな値を取得することができるのでしょうか？
乱数の範囲を自由に変更する
0〜0.9999…の値を取得するMath.random()の範囲を変更する方法についてですが、これはとても原始的な方法を使います。
それはMath.random()で得た乱数に数字をかけて、小数点を切り捨てるという方法です。
少しわかりにくいかと思いますので、サンプルコードを使って見ていきましょう。
サンプルコード
0〜99の整数をランダムでHTMLに出力しています。
<p class="randomNumBox"></p>
<script>
const randomNum = Math.floor(Math.random() * 100);
document.querySelector('.randomNumBox').textContent = randomNum;
</script>querySelectorが分からない方はこちら
textContentが分からない方はこちら
例えば0〜99の整数をランダムに取得したい場合、
Math.random() * 100とすることで、0から100未満（0〜99.999…） の数字が取得できるようになります。
さて、小数が邪魔ですね。
Math.floor(値)を使うことで、小数点を切り捨てることができます。
Math.floor(Math.random() * 100)少数を切り捨てることで、0〜99の値をランダムに取得することができるようになりました。
では、ここで得た方法を使って、実際に配列からランダムに値を取得してみましょう！
少し余談ですが、Math.ceil(値)で少数を切り上げてくれます。
これを使った場合、1〜100の乱数になります。
四捨五入はMath.round(値)ででき、0〜100までの乱数になるのですが、0と100だけ出現確率が低くなってしまうのでここでは使いません。
配列の要素をランダムに取得する方法
ここでは配列についてはある程度わかっていることが前提で話を進めていきます。
配列から1つの要素を取り出す場合、その要素に振り当てられた番号が必要でしたね。
配列名[番号]つまり、この番号の部分をランダムな値にすればいい！
それでは、一番最初に体験してもらったおみくじのコードを見ていきましょう。
おみくじのコードと解説
今回おみくじの配列は「大吉、吉、中吉、小吉、凶、大凶」の6種類用意されています。
つまり、0〜5までのランダムな値を取得することで、この配列の要素をランダムで取得することができます。
Math.floor(Math.random() * 6)これで0〜5までの値をランダムで取得できるようになりました。
ただこれだと、配列の数が変わった時に随時書き換えが必要になるので、あまりスマートではありません。
確か配列の数を取得する記述方法がありましたね。
配列名.lengthこれで今回は6という配列数を自動的に取得することができます。
これを踏まえると、
Math.floor(Math.random() * 配列名.length)と記述することで、配列の取得に必要な値をランダムで取得しれくれます。
それでは、おみくじのコードを見てみましょう。
<button class="omikujiButton">おみくじ</button>
<p class="omikujiResult"></p>
<script>
// おみくじボタンとおみくじを出力する場所を取得
const omikujiButton = document.querySelector('.omikujiButton');
const omikujiResult = document.querySelector('.omikujiResult');
// おみくじの配列を定義
const omikuji = ['大吉', '吉', '中吉', '小吉', '凶', '大凶']
// おみくじボタンを押したら発火するイベント
omikujiButton.addEventListener('click', function(){
// ランダムな値取得
const randomNum = Math.floor(Math.random() * omikuji.length);
// 取得した値を、配列の番号部分に入れて出力
omikujiResult.textContent = omikuji[randomNum];
});
</script>addEventListenerについて分からない方はこちら
ねえ、あっという間におみくじができちゃった！
