JavaScript 初心者でも安心！配列からランダム値を取得する方法

2024-04-02

JavaScript 配列からランダム値を取得する方法

Math.random() と Math.floor() を使う方法

Math.random() 関数を使い、0から配列の長さまでのランダムな浮動小数点数を得ます。
Math.floor() 関数を使って、その浮動小数点数を整数に切り捨てます。
切り捨てた整数をインデックスとして配列にアクセスし、その値を取得します。

例：

const fruits = ["apple", "banana", "orange", "grape"];

const randomIndex = Math.floor(Math.random() * fruits.length);
const randomFruit = fruits[randomIndex];

console.log(randomFruit); // ランダムな果物が表示される

Fisher-Yates シャッフルを使う方法

Fisher-Yates シャッフルアルゴリズムを使って、配列の要素をランダムに並び替えます。
配列の先頭要素を取得します。

const fruits = ["apple", "banana", "orange", "grape"];

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

shuffle(fruits);

const randomFruit = fruits[0];

console.log(randomFruit); // ランダムな果物が表示される

どちらの方法でも、JavaScript 配列からランダム値を取得することができます。

Math.random() と Math.floor() を使う方法 は、シンプルで分かりやすいです。ただし、配列が大きい場合、ランダム性が低くなる可能性があります。
Fisher-Yates シャッフルを使う方法 は、ランダム性がより高いですが、コードが少し複雑になります。

一般的には、配列が小さい場合は Math.random() と Math.floor() を使う方法 、配列が大きい場合は Fisher-Yates シャッフルを使う方法 を使うのがおすすめです。

上記以外にも、ライブラリを使ってランダム値を取得する方法もあります。

これらのライブラリを使うと、より簡単にランダム値を取得することができます。

JavaScript 配列からランダム値を取得するには、いくつかの方法があります。それぞれの特徴を理解して、目的に合った方法を選びましょう。

Math.random() と Math.floor() を使う方法

const fruits = ["apple", "banana", "orange", "grape"];

const randomIndex = Math.floor(Math.random() * fruits.length);
const randomFruit = fruits[randomIndex];

console.log(randomFruit); // ランダムな果物が表示される

Fisher-Yates シャッフルを使う方法

const fruits = ["apple", "banana", "orange", "grape"];

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

shuffle(fruits);

const randomFruit = fruits[0];

console.log(randomFruit); // ランダムな果物が表示される

Lodash を使う方法

const fruits = ["apple", "banana", "orange", "grape"];

const _ = require("lodash");

const randomFruit = _.sample(fruits);

console.log(randomFruit); // ランダムな果物が表示される

Underscore.js を使う方法

const fruits = ["apple", "banana", "orange", "grape"];

const _ = require("underscore");

const randomFruit = _.random(fruits);

console.log(randomFruit); // ランダムな果物が表示される

上記のコードは、ブラウザのコンソールや、Node.js などの環境で実行できます。
配列の内容や、ランダム値の取得方法を自由に変更できます。

JavaScript 配列からランダム値を取得するその他の方法

Array.prototype.sort() と Math.random() を使う方法

Array.prototype.sort() 関数を使って、配列の要素をランダムな順序に並び替えます。

const fruits = ["apple", "banana", "orange", "grape"];

fruits.sort(() => Math.random() - 0.5);

const randomFruit = fruits[0];

console.log(randomFruit); // ランダムな果物が表示される

for...of ループと Math.random() を使う方法

for...of ループを使って、配列の要素をランダムな順序でループします。
ループの中で、Math.random() 関数を使ってランダムな値を取得し、その値が 0.5 より大きい場合はループを抜けます。
ループを抜けた時点で、現在の要素がランダム値となります。

const fruits = ["apple", "banana", "orange", "grape"];

for (const fruit of fruits) {
  if (Math.random() > 0.5) {
    const randomFruit = fruit;
    console.log(randomFruit); // ランダムな果物が表示される
    break;
  }
}

ES6 の Symbol と Map を使う方法

ES6 の Symbol を使って、ランダムなキーを生成します。
Map オブジェクトを使って、ランダムなキーと配列の要素を関連付けます。
Map オブジェクトの values() メソッドを使って、ランダムな値を取得します。

const fruits = ["apple", "banana", "orange", "grape"];

const randomKey = Symbol();
const map = new Map([
  [randomKey, fruits[0]],
  [Symbol(), fruits[1]],
  [Symbol(), fruits[2]],
  [Symbol(), fruits[3]],
]);

const randomFruit = map.values().next().value;

console.log(randomFruit); // ランダムな果物が表示される