スライドショースライドショー

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

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

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

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

ランダムな文字列を作成するには、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における「乱数」の作り方をひと通り学習しました!

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

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

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

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

おすすめコンテンツ

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

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