【JavaScript】乱数を生成できるMath.randomメソッドについて解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptで乱数を生成できるMath.randomメソッドについて

Math.randomメソッドとは
Math.randomメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件：実行環境について
Math.randomメソッドとは
Math.randomメソッドを解説するプログラムの概要
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
まとめ：Math.randomメソッドを使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

Math.randomメソッドとは

Math.randomメソッドとは、0以上1未満の乱数を生成して返すメソッドです。
乱数なので、実行するたびに異なる値が返されます。

使い方サンプルは以下です。

var result = Math.random()

1	var result = Math.random()

変数resultには

0.43524960814804525
0.34739421521127967
0.16544713945965017

というような値が返されます。

では、次の章で実際に使ってみます。

Math.randomメソッドを解説するプログラムの概要

Math.randomメソッドを解説するプログラムでは、

HTML
JavaScript

の2ファイルを使います。

Math.randomメソッドで3回乱数を生成し、結果をHTMLに表示させます。

フォルダ構成は以下のようになっています。
Math.randomメソッドを解説するフォルダ構成

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Math.randomメソッドサンプル</title>
    </head>
    <body>
        <h2>Math.randomメソッドサンプル</h2>
        <h3>1回目</h3>
        <div id="resultRandomNum1"></div>
        <h3>2回目</h3>
        <div id="resultRandomNum2"></div>
        <h3>3回目</h3>
        <div id="resultRandomNum3"></div>
        <script src="js\sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Math.randomメソッドサンプル</title>

</head>

<body>

<h2>Math.randomメソッドサンプル</h2>

</body>

</html>

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

HTMLで外部のJavaScriptを読み込むやり方を解説します

JavaScriptサンプルプログラム

// 1回目の乱数生成
var randomNum1 = Math.random()
var resultRandomNum1 = document.getElementById('resultRandomNum1');
resultRandomNum1.innerHTML = randomNum1

// 2回目の乱数生成
var randomNum2 = Math.random()
var resultRandomNum2 = document.getElementById('resultRandomNum2');
resultRandomNum2.innerHTML = randomNum2

// 3回目の乱数生成
var randomNum3 = Math.random()
var resultRandomNum3 = document.getElementById('resultRandomNum3');
resultRandomNum3.innerHTML = randomNum3

// 1回目の乱数生成

var randomNum1 = Math.random()

var resultRandomNum1 = document.getElementById('resultRandomNum1');

resultRandomNum1.innerHTML = randomNum1

// 2回目の乱数生成

var randomNum2 = Math.random()

var resultRandomNum2 = document.getElementById('resultRandomNum2');

resultRandomNum2.innerHTML = randomNum2

// 3回目の乱数生成

var randomNum3 = Math.random()

var resultRandomNum3 = document.getElementById('resultRandomNum3');

resultRandomNum3.innerHTML = randomNum3

getElementByIdメソッド
innerHTMLプロパティ

については、こちらの記事をご参考ください。

getElementByIdメソッド
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します

innerHTMLプロパティ
【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します

実行結果

作成したHTMLをブラウザで開きます。

JavaScriptのMath.randomメソッドを解説

乱数が生成できていることが確認できました。

まとめ：Math.randomメソッドを使ってみよう

以上がJavaScriptのMath.randomメソッドについての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ