JavaScriptでランダムな値を扱う

はじめに

(2024-07-21追記) コメントでご指摘いただいた内容について更新しました。
大変勉強になりました。ありがとうございます。

時々使うかもしれないランダムな値の扱い方。
検索でも様々なものが出てきますが、自分なりに勉強したことをまとめます。

使用するプロパティ・メソッド

Math.random() 静的メソッド
今回のメイン。0以上1未満の乱数を返します。

Math.floor(num) 静的メソッド
num以下で最大の整数を返します。

length プロパティ
配列の要素の数を返します。

flat(depth) メソッド
配列を引数depthの深さだけフラット化したものを返します。
depthを省略した場合は1とみなします。

sort(fn) メソッド
ソート順を定義する関数fnに従って元の配列をソートし、その結果を返します。
fnの戻り値が正か負かによって、並びが変わります。

ランダムな整数を取得する

以下の変数min, maxには整数が代入されることを想定しています。

0以上max以下のランダムな整数を取得する

const max = 100;
console.log(Math.floor(Math.random() * (max + 1)));
  // 例: 51

min以上max以下のランダムな整数を取得する

const min = -100;
const max = 100;
console.log(Math.floor(Math.random() * (max - min + 1)) + min);
  // 例: -88

配列からランダムな要素を取り出す

一次元配列からランダムな要素を取り出す

(2024-07-21追記) at()メソッドについてコメントでご紹介いただきました。これは引数を整数に変換して配列の添字とするので、以下のコードで同様の結果が得られるようです。

console.log(array.at(Math.random() * array.length));

const array = ['Cannondale', 'Cervélo', 'Colnago', 'Canyon', 'Corratec'];
console.log(array[Math.floor(Math.random() * array.length)]);
  // 例: Cervélo

二次元配列からランダムな要素を取り出す

const array = [
    ['Cannondale', 'EF Education-EasyPost'],
    ['Cervélo', 'Team Visma | Lease a Bike'],
    ['COLNAGO', 'UAE Team Emirates'],
    ['Canyon', 'Alpecin-Deceuninck'],
    ['Corratec', 'Team corratec - Vini Fantini'],
];

console.log(array[Math.floor(Math.random() * array.length)][0]);
  // 例: Canyon

二次元配列から完全ランダムに要素を取り出す

const array = [
    ['Cannondale', 'EF Education-EasyPost'],
    ['Cervélo', 'Team Visma | Lease a Bike'],
    ['COLNAGO', 'UAE Team Emirates'],
    ['Canyon', 'Alpecin-Deceuninck'],
    ['Corratec', 'Team corratec - Vini Fantini'],
];
const flatArray = array.flat();

console.log(flatArray[Math.floor(Math.random() * flatArray.length)]);
  // 例: EF Education-EasyPost

オブジェクトの配列からランダムな要素を取り出す

const array = [
    { bike: 'Cannondale', team: 'EF Education-EasyPost' },
    { bike: 'Cervélo', team: 'Team Visma | Lease a Bike' },
    { bike: 'COLNAGO', team: 'UAE Team Emirates' },
    { bike: 'Canyon', team: 'Alpecin-Deceuninck' },
    { bike: 'Corratec', team: 'Team corratec - Vini Fantini' },
];

console.log(array[Math.floor(Math.random() * array.length)].bike);
  // 例: Corratec

配列をランダムに並べ替える

一次元配列をランダムに並べ替える

(2024-07-21追記) このコードは並べ替え結果に偏りがあることについてコメントでご指摘いただきました。新しい記事で偏りを解消したコードについて紹介しています。

const array = ['Cannondale', 'Cervélo', 'Colnago', 'Canyon', 'Corratec'];
console.log(array.sort(() => Math.random() - 0.5));
  // 例: ['Canyon', 'Colnago', 'Cervélo', 'Corratec', 'Cannondale']

二次元配列やオブジェクトの配列でも同様の手順で並べ替えることができます。

おわりに

Math.random()と他のメソッドの組み合わせで、多様な処理を実現できそうだと感じました。
例えば配列から複数要素を取り出したり文字列をランダムに並べ替えたりすることも簡単にできそうです。