TypeScript/JavaScriptで重複しないランダムな数字の乱数配列をスマートに作る方法
目次
こんにちは。
ふとTypeScriptで書いているWebサイトで重複しない乱数配列を生成したくなったので、方法をまとめておきます。
ランダムに配列から複数の要素を重複なく抽出したいときに応用できます。
初心者の方にもわかりやすく解説するつもりです。
やりたいこと
- 重複しない整数の乱数配列を生成する。
- 抽出される数字の上限と、生成する配列の長さは好きに決めたい。
例えば、0~9の整数のうち、4つをランダムに抜き出した配列を作りたいとします。
結果の例 : [5, 9, 6, 3]
[4, 6, 4, 9]のように同じ数字が2回出てくるのはNGです。
【結論】 TypeScriptで重複しない整数の乱数配列を作る方法
以下のコードでできました。
const maxLength = 4 //生成する配列の長さ
const maxNum = 10 // 生成される乱数の上限(9までの場合は10)
const array:Array<number> = [] //配列を初期化
while(array.length < maxLength){ // 配列が指定した長さになるまで繰り返す
let n = Math.floor(Math.random() * maxNum) // 乱数を生成
!array.includes(n) && array.push(n) // 配列に含まれている数字ではない場合、配列に追加
}
基本的なところから順番に解説します。
【解説1】 while文を使って、配列が指定した長さになるまでループ処理
while(array.length < maxLength){ ... }
while()は()内がtrueである限り{ ... }の処理を繰り返します。array配列の要素の数を.lengthメソッドで取得しています。
maxLengthで指定した数になるまで、while(){}の処理は繰り返されます。
arrayの要素数は空配列[]で初期化したため最初は0ですが、【解説3】の部分で増えていきます。
【解説2】 指定した上限値以下の乱数を生成する方法
JavaScriptのMathを使います。数式に関する基本的なメソッドが提供されています。
let n = Math.floor(Math.random() * maxNum)
Math.floor()で()内に与えた数より小さい最大の整数を返します。- 例)
- 1.5 → 1
- 206 → 206
- -10.5 → -11
- 例)
Math.random()で0以上1未満(1は含まない)の乱数を生成します。- この値を取得したい乱数の上限値と掛ける(×)ことで、ランダムな整数が取得できます。
参考リンク
【解説3】 生成した乱数がすでに配列に含まれている数字ではない場合のみ、その乱数を配列に追加する方法
if文でもできますが、ちょっとカッコつけて&&で書いています。なんとなくモダンな感じ。
!array.includes(n) && array.push(n)
- ブール値(true/false)の頭に
!をつけると、その値が反転します。 - 配列の
.include()メソッドによって、arrayがnを含んでいるかブール値で返します。 &&は左側がtrueなら右側を返します。左側がfalseなら何もしません。- 配列の
.push()メソッドで配列に要素を追加します。
よって、
arrayがn(生成した乱数)を含まないなら、arrayにnを追加する。
ということが実現できました。
まとめ
というわけで今回はTypeScript(JavaScript)で重複しないランダムな数字の配列を作る方法をまとめてみました。
乱数列の生成は様々な場面で使えそうですね。
このブログではサイドバーに表示されているAmazonの商品リンクの生成に使っています。商品リンクのリストを予め作っておき、今回の方法で取得したランダムな番号の商品を抜き出して画面表示させています。ページを更新したり他のページに遷移すると、表示される商品が別の商品に切り替わるはずです。
ちなみに思い通りのランダムな数字が作れているか確認したい場合は、console.log(array)でコンソールにarrayの中身を表示させてみると良きです。
以上、ご参考になれば幸いです。
それでは〜
