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

マサト
書いた人 マサト
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

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

今回は、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文」に関しては、次の記事でたくさんの事例と共に詳しく解説しているので参考にしてみてください!

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

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

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

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

実行結果:

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

まとめ

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

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

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

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

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


無料体験レッスン実施中

今あなたはこんな悩みをお持ちではないでしょうか?

「つまづいてばかりで学習が進まない…」
「どこまで勉強すればいいのか、終わりが見えない…」
「習得できたとしてもどうやって仕事につなげればいいのかわからない…」

プログラミング学習やキャリアに関してお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像をから詳しいサービス内容をご確認ください。

cta_js2

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

マサト

マサト

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