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

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

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

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

この記事では、

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

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

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

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

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

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

//生成した乱数を変数「random」に代入する
var random = Math.random();

console.log( random );

出力結果は…

0.28230041446763

となります。

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

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

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

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

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

var random = Math.random() * 11;

console.log( random );

出力結果は…

2.608635983586865

となります。

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

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

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

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

var random = Math.floor( Math.random() * 11 );

console.log( random );

出力結果は…

5

となります。

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

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

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

Math.random() * ( 最大値 - 最小値 ) + 最小値;

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

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

//最小値「5」と最大値から最小値を引いた「6」を使う
var random = Math.floor( Math.random() * 6 ) + 5;

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

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

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

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

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

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

var items = ['リンゴ', 'イチゴ', 'メロン', 'バナナ'];

//最大値は配列の「要素数」にする
var random = Math.floor( Math.random() * items.length );

console.log( items[random] );

出力結果は…

メロン

となります。

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

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

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

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

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

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

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

//最大値・最小値を引数に持つ関数
function getRandom( min, max ) {
    var random = Math.floor( Math.random() * (max + 1 - min) ) + min;
  
    return random;
}

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

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

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

var result = getRandom( 10, 20 );

console.log( result );



function getRandom( min, max ) {
    var random = Math.floor( Math.random() * (max + 1 - min) ) + min;
  
    return random;
}

出力結果は…

17

となります。

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

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

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

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

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

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

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

var arr = [1,2,3,4,5,6,7,8,9];
var a = arr.length;

//シャッフルアルゴリズム
while (a) {
    var j = Math.floor( Math.random() * a );
    var t = arr[--a];
    arr[a] = arr[j];
    arr[j] = t;
}

//シャッフルされた配列の要素を順番に表示する
arr.forEach( function( value ) {console.log( value )} );

出力結果は…

7
6
9
3
8
1
2
4
5

となります。

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

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

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

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

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

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

var len = 8;
var str = "abcdefghijklmnopqrstuvwxyz";
var strLen = str.length;
var result = "";

for (var i = 0; i < len; i++) {
  result += str[Math.floor(Math.random() * strLen)];
}

console.log(result);

実行結果：

ebhgajiv

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

まとめ

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

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

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