【JavaScript】Math.random()でランダムな数(乱数)を作成する!

(この記事は2022年9月9日に投稿されました。)

JavaScsiptでランダムな数(乱数)を作成する方法として、Math.random()があります。

Math.random()とはランダムな数を作成するメソッドであり、ランダムな数値を返り値として返します。

Math.random()でランダムな数を作成した例

そのため、おみくじや、サイコロなど判定をランダムにしたい場合に使用することができます。

また、Math.random()で取得できるランダムな数は「0以上1未満」というように範囲が決まっています。

しかし、カスタムすることで、10から100や、5から50などランダムで取得できる数値の範囲を設定することができます。

そして、Math.random()でランダムで取得した数値を利用することで、表示する文字列や配列の値などを操作することもできます。

今回はJavaScriptのMath.random()でランダムな数(乱数)を作成する方法について紹介していきます。




この記事はこんな方におすすめ
・JavaScriptを使ってランダムな数を作成したい人
・ランダムな確率で処理を行いたい人
・アニメーションにランダム要素を加えたい人

Math.random()とは

Math.random()とは、ランダムな数(以下を乱数)を作成することができるメソッドなります。

作成する数値の範囲は決まっており、「0以上1未満」となります。

Math.random()の書き方

Math.random()の書き方は下記のようになります。

Mathクラスを呼び出した後にrandom()を指定することで使用すことができます。

Math.random()のパラメータ

Math.random()にパラメータはありません。

Math.random()の返り値

Math.random()返り値はランダムに作成された数値になります。

Math.random()でランダムな数(乱数)を作成するサンプルコード

Math.random()でランダムな数(乱数)を作成するサンプルコードをご紹介します。

⚫︎ Main.js

⚫︎ 実行結果

Math.random()でランダムな数(乱数)を作成した結果

Math.random()によってランダムな数(乱数)が作成されています。

そのため「0.44…」と「0.93…」が表示されています。

Math.random()で範囲を設定してランダムな数(乱数)を作成する場合

先程もご紹介しましたが、Math.random()は「0以上1未満」の乱数を作成します。

しかし、Math.random()は範囲を設定してランダムな数(乱数)を作成することができます。

ここでは、下記の2つのパターンについてご紹介します。

  1. 0以上n未満のランダムな数(乱数)を作成する場合
  2. n以上m未満のランダムな数(乱数)を作成する場合

0以上n未満のランダムな数(乱数)を作成する場合

0以上n未満のランダムな数(乱数)を作成する場合はMath.random()の後ろに四則演算子を使用します。

例えば、0以上100未満のランダムな数(乱数)を作成する場合は下記のコードのようになります。

⚫︎ Main.js

⚫︎ 実行結果

0以上n未満のランダムな数(乱数)を作成する場合にMath.random()を使用した結果

Math.random()の後ろに100をかけることで0以上100未満のランダムな数(乱数)を作成することができます。

そのため「19.1…」と「16.9…」が表示されています。

n以上m未満のランダムな数(乱数)を作成する場合

0n以上m未満のランダムな数(乱数)を作成する場合はMath.random()の前後に四則演算子を使用します。

例えば、10以上20未満のランダムな数(乱数)を作成する場合は下記のコードのようになります。

⚫︎ Main.js

⚫︎ 実行結果

n以上m未満のランダムな数(乱数)を作成する場合にMath.random()を使用した結果

作成した乱数に10を掛け、その後にMath.floor()を使用することで、小数点を切り捨てています。

そのため「29.5…」と「72.6…」が表示されています。

Math.random()で整数のランダムな数(乱数)のみを作成する場合

Math.random()で整数のランダムな数(乱数)のみを作成する場合は、Math.trunc()を使用します。

Math.trunc()とは、指定した数値の整数部分を取得するメソッドになります。

そのため、n倍した乱数に対してMath.trunc()を使用することで、整数のランダムな数(乱数)のみを作成することが可能になります。

⚫︎ Main.js

⚫︎ 実行結果

Math.random()で整数のランダムな数(乱数)のみを作成した結果

Math.random()で作成した乱数を100倍し、その数値にMath.trunc()を使用することで、整数の乱数のみを作成しています。

そのため「0から100」までの整数を範囲とした乱数が作成されています。

Math.random()で作成した乱数をもとに他の値を取得する場合

先ほどまではMath.random()で乱数を作成していましたが、乱数を利用することで他の値を取得することができます。

ここでは下記の2つのパターンで作成した乱数をもとに他の値を取得します。

  1. 文字列をランダムで取得する場合
  2. 配列をランダムで取得する場合

文字列をランダムで取得する場合

Math.random()は、文字列をランダムで取得する場合に使用することができます。

⚫︎ Main.js

⚫︎ 実行結果

Math.random()で文字列をランダムで取得した結果

Math.random()で作成した乱数を文字列のインデックスに指定することで、文字列の文字をランダムに取得することができます。

また、for文の繰り返し処理を使って、文字数の回数文ランダムに文字を取り出しています。

そして、繰り返し処理の回数やMath.random()の範囲を設定するために、lengthプロパティを使用しており、Math.round()によってランダムで取得した数値を四捨五入しています。

lengthについて詳しく知りたい場合は下記の記事をご参考下さい。

Math.round()について詳しく知りたい場合は下記の記事をご参考ください。

配列をランダムで取得する場合

また、Math.random()は、配列をランダムで取得する場合にも使用することができます。

⚫︎ Main.js

⚫︎ 実行結果

Math.random()で配列をランダムで取得した結果

Math.random()で作成した乱数を配列のインデックスに指定することで、配列の中身をランダムに取得することができます。

そして、こちらも繰り返し処理の回数やMath.random()の範囲を設定するために、lengthプロパティを使用しています。

また、こちらもMath.round()によってランダムで取得した数値を四捨五入しています。

Math.random()を使用する様々なケース

Math.random()を使用する様々なケースについてご紹介します。

作成した乱数によって表示する文字を変える

Math.random()で作成した乱数によって表示する文字を変えることができます。

例えば、こちらの処理を利用することでおみくじのアプリを作成することができます。

⚫︎ index.html

⚫︎ 実行結果

Math.random()で作成した乱数によって表示する文字を変えた結果

Math.random()で作成された乱数によってどの文字列を表示させるか分岐させています。

そのためボタンを押すと「中吉」、「大吉」のようにおみくじの運勢が表示されます。

ランダムに取得した数値をCSSに使用する

Math.random()でランダムに取得した数値をCSSに使用することができます。

例えば、こちらの処理を使用することで、背景色をランダムに変えることができます。

⚫︎ index.html

⚫︎ 実行結果

Math.random()でランダムに取得した数値をCSSに使用した結果

背景色のRBGの数値をMath.random()でランダム化しています。

そのためボタンを押すと、ページの背景色がランダムに変化します。

まとめ

⚫︎ Math.random()とは乱数を作成することができるメソッドである

⚫︎ Math.random()にパラメータはない

⚫︎ Math.random()は0以上1未満の小数を含む数値を返り値として返す

⚫︎ 0以上、n未満の範囲で乱数を作成する場合はMath.random()の後ろに四則演算子を使用する

⚫︎ n以上、m未満の範囲で乱数を作成する場合はMath.random()の前後に四則演算子を使用する

⚫︎ Math.random()で作成した乱数を使用することで文字列の文字や配列の値をランダムに取り出すことができる

⚫︎ Math.random()は、下記のようなケースで使用すことができる
・作成した乱数によって表示する文字を変える
・ランダムに取得した数値をCSSに使用する

コメントを残す

メールアドレスが公開されることはありません。