【JavaScript入門】乱数の作り方(範囲指定/重複なし/ランダム文字列)

こんにちは、ライターのマサトです!

今回は、JavaScriptで「乱数」を作る方法を学習します!

JavaScriptの乱数は、数学的なメソッドを提供する組み込みオブジェクト「Math」を使って、さまざまなタイプのランダム値を生成することが出来るのが特徴です。

この記事では、

  • 基本的な乱数の作り方について
  • 指定した範囲の乱数生成について
  • 乱数による配列の要素指定について
  • 乱数プログラムを関数化する方法について
  • 重複しない乱数の作り方について
  • ランダムな文字列を作成する方法

など基本的な手法から応用的な手法についても学習していきます!

これらの内容を踏まえながら、JavaScriptにおける乱数について分かりやすく解説しますので、ぜひ参考にしてみてください!

「乱数」を作ってみよう!

それでは、まず最初に基本的な「乱数」の作り方から見ていきましょう!

JavaScriptで乱数を作るには、「Math」オブジェクトの「random()」メソッドを使用します。

次のサンプルで、一般的な使い方を見てみましょう!

出力結果は…

となります。

このサンプルで分かるように、「Math.random()」は0〜1未満(1は入らない)までの小数による乱数を生成することが出来るわけです。

JavaScriptでは、この構文をベースにして、さまざまな種類の乱数を作成していくことになりますので、忘れないようにしておきましょう!

乱数の「範囲」を指定しよう!

基本的な乱数の作り方を覚えたところで、今度は任意の範囲における乱数を作ってみましょう!

まずは、簡単なサンプルとして「0 〜 10」の範囲で乱数を作るプログラムを見ていきます。

出力結果は…

となります。

範囲を決めた乱数を作るときには、「Math.random()」に最大値を掛けることで実現します。

しかし、注意が必要なのは「Math.random()」は0〜1未満(0〜0.9999・・・・)の少数を返すという点です。

つまり、「0 〜 10」の範囲を作りたい場合、最大値の10をそのまま掛けてしまうと「0 〜 9」の範囲になってしまうというわけです。そのため、サンプルコードでは最大値に1を足して「11」を掛けることで、「0 〜 10」の範囲を設定しているのです。

ちなみに、現状だと小数点の乱数になっているので、これを扱いやすい整数にしておきましょう!

出力結果は…

となります。

整数にするには、小数点以下をバッサリと切り捨てれば良いので、同じくMathオブジェクトで提供されている「floor()」メソッドを使えばOKです!

さらに、応用技として「最小値 〜 最大値」を任意に決めて乱数の範囲を作ってみましょう!

基本的な作り方は、次のとおりです!

1つ注意点として、ここで言う「最大値」ですが、先ほどのサンプルでも解説したとおり、例えば「0 〜 10」であれば、10に1を足した「11」が「最大値」であるという意味なので間違わないようにしましょう!

具体的なサンプル例として、「5 〜 10」の範囲で乱数を作ってみましょう!

先ほどの構文に当てはめると、「5 〜 10」なので最大値に1を足した11から最小値を引いて「6」を「random」メソッドに掛けます。最後に、最小値「5」を足してあげれば、「5 〜 10」までの範囲における乱数を生成することが出来ますね。

これは言い換えれば、「0 〜 5」までの乱数を生成して最後に「5」を足すことで、「5 〜 10」の範囲を作っていると考えることも出来ますね!

配列を乱数で指定しよう!

次に、乱数を使うケースが多い「配列」での扱い方について学習しましょう!

一般的には、配列の要素をランダムに取得できれば良いのですが、生成された乱数を配列のインデックス番号として扱えるようにするのがポイントでしょう。

次のサンプルで、具体的に見てみましょう!

出力結果は…

となります。

ここでポイントになるのが、「random」メソッドに掛けている配列の「length」です。

これまでの学習において、「random」メソッドに掛けるのは乱数の範囲となる「最大値」だったわけですが、配列の場合の最大値というのは、言い換えれば「配列の要素数」になるわけです。

なぜなら、要素数よりも大きな値を指定してしまうと、配列の要素が存在しないのでエラーになるからです。

乱数を返す「関数」を作ってみよう!

さて、JavaScriptにおける乱数の扱い方を学習してきましたが、毎回「Math.random()」を書かなければいけないのは面倒ですよね?

そこで、便利に扱えるように独自の「関数」を作ってみましょう!
関数と言っても難しく考える必要はありません。これまで学習してきた乱数のコードを、プログラム中で簡単に呼び出せるようにするだけです!

次のサンプルは、乱数の範囲を設定できる一般的な関数になります。

「getRandom()」関数の中身は、これまで学習してきた乱数を生成するコードそのままですね。

関数の引数として、「最大値・最小値」を受け取るようにしており、その値を乱数のコードに当てはめて結果を「return」で返しています。

次のサンプルでは、「getRandom()」関数を使って「10 〜 20」の範囲で乱数を生成しています。

出力結果は…

となります。

このサンプルのように、関数を一度作ってしまえば、あとは「getRandom()」を呼び出すだけなので非常に効率が良いのが分かります。

重複しない乱数を作成しよう!

ここからは、少し高度な乱数テクニックを勉強してみましょう!

これまで見てきた「乱数」は、文字通りランダムな数値の生成でしたが、当然ながら重複する数値も生成されてしまいます。

しかし、場合によっては重複を避けたい場合もあるわけです。そのような時に、指定された範囲内で重複のない乱数を生成する方法として、配列を活用するテクニックがあるのでご紹介致しいます!

例えば「1〜9」の範囲であれば、配列として[1,2,3,4,5,6,7,8,9]を用意し、それぞれの要素をシャッフルして取り出せば重複しない乱数が作成できるというわけです。

次のサンプルで、具体的な方法を見てみましょう!
(配列のシャッフルに関しては、有名なアルゴリズム「Fisher–Yates shuffle」を利用します)

出力結果は…

となります。

このサンプルの流れとしては、まず「1〜9」までの数値を格納した配列を用意し、各要素をシャッフルしてから値を順番に取り出しているだけです。シャッフルアルゴリズム以外は、基本的なJavaScriptだけなのでそれほど難しいプログラムではありません。

また、配列の要素を順番に表示するために使っている「forEach文」に関しては、次の記事でたくさんの事例と共に詳しく解説しているので参考にしてみてください!

【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ!
更新日 : 2019年6月5日

ランダムな文字列を作成する方法

ここでは、ランダムな文字列を作成する方法を解説します。

ランダムな文字列を作成するには、Math.randomでランダムな値を取得し、その値をMath.floorで整数にして文字を指定します。

次のプログラムで確認してみましょう。

実行結果:

このようにしてランダムな文字列を作成することができました。

まとめ

今回は、JavaScriptにおける「乱数」の作り方をひと通り学習しました!

ここで、ポイントをおさらいしておきましょう!

  • 乱数を作成するには、「Math.random」メソッドを使おう!
  • JavaScriptの乱数は少数点なので、「Math.floor」で切り捨てよう!
  • 範囲を指定する場合は、最大値+1を「random」メソッドに掛けよう!
  • 配列を乱数で指定する場合は、最大値に「length」メソッドを使おう!
  • 乱数のコードは、いつでも呼び出せるように関数化しよう!

これらの内容を踏まえて、ぜひ自分でも実際にコードを書いて実行し、どのような出力結果になるのかを確認するようにしておきましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説