はじめに
アンケートを取る機能において、ユーザーがチェックボックスの一番上の項目しかチェックしない問題に直面しました。改善策の一つとしてチェックボックスの項目をランダムに表示させるようします。本記事では、JavaScriptを使用してランダムに表示される方法を書いています。
TL;DR
- Math.random() は0から1未満の浮動小数点数を生成する。
- Math.random() - 0.5 は-0.5から0.5までの浮動小数点数を生成する。
- Math.random() - 0.5 を使用することで、範囲指定のランダムな数値を得やすくなる。
Math.random() とは
Math.random() メソッドは、0以上1未満のランダムな浮動小数点数を生成します。以下はその基本的な使い方です。
index.js
const random = Math.random(); // 0以上1未満のランダムな数値を生成
Math.random() - 0.5 の使い方
Math.random() - 0.5 を使うことで、-0.5から0.5までの浮動小数点数を生成できます。この値を利用することで、特定の範囲のランダムな数値を得ることができます。以下はその例です。
index.js
const randomInRange = Math.random() - 0.5; // -0.5から0.5までのランダムな数値を生成
この値を活用することで、範囲指定のランダムな数値を簡単に得ることができます。例えば、-10から10までのランダムな整数を生成するには以下のようにします。
index.js
const randomIntInRange = Math.floor(Math.random() * 21) - 10; // -10から10までのランダムな整数を生成
この式では、0から20のランダムな数値を生成し、最後に-10を引くことで-10から10までのランダムな整数を得ています。
ランダムにする関数の例
ランダムに配列をシャッフルする際に、Math.random() - 0.5 を使用した shuffleArray() 関数を以下に示します。
index.js
function shuffleArray<T>(array: T[]): T[] {
const shuffledArray = [...array]; // 配列をコピー
// 要素のランダムな順序を生成
shuffledArray.sort(() => Math.random() - 0.5);
return shuffledArray;
}
// 使用例
const originalArray = [1, 2, 3, 4, 5];
const shuffledArray = shuffleArray(originalArray);
console.log(shuffledArray); // シャッフルされた配列が表示されます
この関数を使用することで、与えられた配列の要素がランダムに並び替えられ、シャッフルされた配列が得られます。
- Array.prototype.sort() メソッドと組み合わせて使用しています
- sort() メソッドは、比較関数を引数として受け取り、その関数が返す値に基づいて配列の要素を並び替えます。
- 比較関数が負の値を返した場合、最初の要素を前に移動し、正の値を返した場合、最初の要素を後ろに移動します。ゼロを返した場合、要素は移動しません。
おわりに
真のランダムシャッフルを実現するには、フィッシャー–イェーツのシャッフルアルゴリズムを使用するのがいいみたい