【JavaScript】指定した範囲の乱数を生成するサンプルプログラム

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

この記事では、 JavaScriptで指定した範囲の乱数を生成するを

サンプルプログラム
実行結果
プログラム解説

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

前提条件：実行環境について
指定した範囲の乱数を生成するサンプルプログラム
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
プログラム解説
まとめ：指定した範囲で乱数を求めてみよう！

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

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

OS	Windows10

指定した範囲の乱数を生成するサンプルプログラム

サンプルプログラムでは

HTML
JavaScript

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

乱数を

10から30の範囲
100から200の範囲

の2パターンで2回ずつ生成して結果を表示させます。

フォルダ構成は以下のようになっています。

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>指定した範囲の乱数を生成するサンプルプログラム</title>
    </head>
    <body>
        <h2>指定した範囲の乱数を生成するサンプルプログラム</h2>
        <h3>10から30の範囲で乱数を生成</h3>
        <strong>1回目</strong>
        <div id="resultRandomNum1"></div>
        <strong>2回目</strong>
        <div id="resultRandomNum2"></div>
        <h3>100から200の範囲で乱数を生成</h3>
        <strong>1回目</strong>
        <div id="resultRandomNum3"></div>
        <strong>2回目</strong>
        <div id="resultRandomNum4"></div>
        <script src="js\sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>指定した範囲の乱数を生成するサンプルプログラム</title>

</head>

<body>

<h2>指定した範囲の乱数を生成するサンプルプログラム</h2>

<h3>10から30の範囲で乱数を生成</h3>

<h3>100から200の範囲で乱数を生成</h3>

</body>

</html>

JavaScriptサンプルプログラム

// 10から30の範囲で乱数を生成
// 1回目
var randomNum1 = generateRandomNumbers(10, 30)
var resultRandomNum1 = document.getElementById('resultRandomNum1');
resultRandomNum1.innerHTML = randomNum1

// 2回目
var randomNum2 = generateRandomNumbers(10, 30)
var resultRandomNum2 = document.getElementById('resultRandomNum2');
resultRandomNum2.innerHTML = randomNum2

// 100から200の範囲で乱数を生成
// 1回目
var randomNum3 = generateRandomNumbers(100, 200)
var resultRandomNum3 = document.getElementById('resultRandomNum3');
resultRandomNum3.innerHTML = randomNum3

// 2回目
var randomNum4 = generateRandomNumbers(100, 200)
var resultRandomNum4 = document.getElementById('resultRandomNum4');
resultRandomNum4.innerHTML = randomNum4

// 指定した範囲の乱数を生成
function generateRandomNumbers(min, max){
    return Math.floor((Math.random() * (max - min + 1))) + min
}

// 10から30の範囲で乱数を生成

// 1回目

var randomNum1 = generateRandomNumbers(10, 30)

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

resultRandomNum1.innerHTML = randomNum1

// 2回目

var randomNum2 = generateRandomNumbers(10, 30)

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

resultRandomNum2.innerHTML = randomNum2

// 100から200の範囲で乱数を生成

// 1回目

var randomNum3 = generateRandomNumbers(100, 200)

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

resultRandomNum3.innerHTML = randomNum3

// 2回目

var randomNum4 = generateRandomNumbers(100, 200)

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

resultRandomNum4.innerHTML = randomNum4

// 指定した範囲の乱数を生成

function generateRandomNumbers(min, max){

return Math.floor((Math.random() * (max - min + 1))) + min

}

実行結果

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

JavaScriptで指定した範囲の乱数を生成するサンプルプログラム
指定した範囲の乱数を生成できたことが確認できました。
※乱数なので、実行するたびに返される値は異なります。

プログラム解説

乱数を生成している

function generateRandomNumbers(min, max){
    return Math.floor((Math.random() * (max - min + 1))) + min
}

function generateRandomNumbers(min, max){

return Math.floor((Math.random() * (max - min + 1))) + min

}

を解説していきます。

ざっくり分けると
JavaScriptの指定した範囲の乱数を生成するサンプルプログラム
と分けることができます。

「乱数値を生成」から解説します。
Math.randomメソッドで乱数を生成していますが、0以上1未満の

0.43524960814804525
0.34739421521127967
0.16544713945965017

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

(max - min + 1)

1	(max - min + 1)

でどれくらいの範囲で乱数を生成するのか？を求めて、Math.randomメソッドに掛けます。
最大値を含むために「+ 1」をしています。
生成した乱数には小数点以下が含まれるため、Math.floorメソッドで切り捨てを行います。

「乱数値を生成」で生成した整数に対して「最小値を設定」で最小値を足すことで指定した範囲の乱数を生成することができます。

関数内で使っているメソッドについては、詳しくはこちらの記事をご参考ください。

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

Math.floorメソッド
【JavaScript】小数点以下を切り捨てできるMath.floorメソッドについて解説します

まとめ：指定した範囲で乱数を求めてみよう！

以上がJavaScriptで指定した範囲の乱数を生成するサンプルプログラムでした！

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