JavaScriptで特定の範囲のランダムな数値を生成する関数を作成する方法

2024-04-02

JavaScriptで2つの数値の間のランダムな数値を生成する方法

Math.random() を使用する方法

最も簡単な方法は、 Math.random() 関数を使用する方法です。

// 0から1までのランダムな数値を生成
const randomNumber = Math.random();

// 1から10までのランダムな数値を生成
const randomNumber = Math.random() * 10 + 1;

// 5から20までのランダムな数値を生成
const randomNumber = Math.floor(Math.random() * (20 - 5 + 1)) + 5;

Math.random() は、0から1までの擬似乱数を生成します。

  • 1から10までのランダムな数値を生成するには、Math.random() に 10 を掛けて、1 を足します。
  • 5から20までのランダムな数値を生成するには、以下の式を使用します。
Math.floor(Math.random() * (20 - 5 + 1)) + 5
  • Math.floor() は、小数点以下の桁を切り捨てます。
  • 20 - 5 + 1 は、5から20までの範囲を表します。

Math.floor() と Math.random() を組み合わせた方法

より正確なランダムな数値を生成するには、 Math.floor()Math.random() を組み合わせた方法を使用します。

// 5から20までのランダムな数値を生成
const randomNumber = Math.floor(Math.random() * (20 - 5 + 1)) + 5;

라이브러リを使用する方法

random-js などのライブラリを使用する方法もあります。

const random = require('random-js');

// 5から20までのランダムな数値を生成
const randomNumber = random.integer(5, 20);

ライブラリを使用すると、より複雑なランダムな数値を生成することができます。

その他の方法

上記以外にも、様々な方法でランダムな数値を生成することができます。

  • Date.now() を使用して、現在時刻に基づいたランダムな数値を生成することができます。
  • crypto.getRandomValues() を使用して、より安全なランダムな数値を生成することができます。

JavaScriptで2つの数値の間のランダムな数値を生成するには、いくつかの方法があります。




// 0から1までのランダムな数値を生成
const randomNumber = Math.random();

// 1から10までのランダムな数値を生成
const randomNumber = Math.random() * 10 + 1;

// 5から20までのランダムな数値を生成
const randomNumber = Math.floor(Math.random() * (20 - 5 + 1)) + 5;

console.log(randomNumber);
// 5から20までのランダムな数値を生成
const randomNumber = Math.floor(Math.random() * (20 - 5 + 1)) + 5;

console.log(randomNumber);
const random = require('random-js');

// 5から20までのランダムな数値を生成
const randomNumber = random.integer(5, 20);

console.log(randomNumber);
// Date.now() を使用して、現在時刻に基づいたランダムな数値を生成
const randomNumber = Date.now();

// crypto.getRandomValues() を使用して、より安全なランダムな数値を生成
const randomNumber = crypto.getRandomValues(new Uint32Array(1))[0];

console.log(randomNumber);

実行例

5
12
17
1638421091234
1234567890



2つの数値間のランダムな数値を生成する他の方法

// 5から20までのランダムな数値を生成
const numbers = Array.from({length: 16}, (_, i) => i + 5);
const randomNumber = numbers[Math.floor(Math.random() * numbers.length)];

console.log(randomNumber);

この方法は、まず5から20までの数値を要素とする配列を作成します。

  • 次に、Math.random() で配列の長さのランダムなインデックスを取得します。
  • 最後に、配列のそのインデックスにある数値をランダムな数値として返します。
// 5から20までのランダムな数値を生成
let randomNumber;
for (let i = 5; i <= 20; i++) {
  if (Math.random() < 1 / (20 - 5 + 1)) {
    randomNumber = i;
    break;
  }
}

console.log(randomNumber);
  • ランダムな数値が 1 / (20 - 5 + 1) より小さい場合は、現在のループカウンタをランダムな数値として返します。
// 5から20までのランダムな数値を生成
let randomNumber;
while (true) {
  randomNumber = Math.floor(Math.random() * (20 - 5 + 1)) + 5;
  if (randomNumber >= 5 && randomNumber <= 20) {
    break;
  }
}

console.log(randomNumber);

この方法は、while ループを使用して、5から20までのランダムな数値が生成されるまでループを繰り返します。

  • 生成された数値が5から20までの範囲内であれば、ループを終了して、ランダムな数値を返します。

第三者ライブラリの使用

特定の範囲のランダムな数値を生成する関数を作成する

特定の範囲のランダムな数値を生成する関数を作成することで、コードをより簡潔にすることができます。

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 5から20までのランダムな数値を生成
const randomNumber = getRandomNumber(5, 20);

console.log(randomNumber);

TypeScript の場合は、Math.random() の返値型を number ではなく number | undefined にすることができます。

function getRandomNumber(min: number, max: number): number | undefined {
  if (min > max) {
    throw new Error('min must be less than or equal to max');
  }
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 5から20までのランダムな数値を生成
const randomNumber = getRandomNumber(5, 20);

if (randomNumber !== undefined) {
  console.log(randomNumber);
}

javascript random


えっ、createElementはもう古い!?jQueryで賢くHTML要素を生成する方法

document. createElement は、JavaScript で HTML 要素を作成する標準的な方法です。 jQuery でも同様の機能を提供しており、いくつかの利点があります。jQuery で document. createElement と同等の機能を提供する方法はいくつかあります。...


jQueryのdatepickerプラグインで日付を選択・取得する方法

jQueryを使って、現在の日付を簡単に取得する方法をご紹介します。2つの方法を紹介しますので、状況に合わせて使い分けてください。方法1: new Date() を使うnew Date() コンストラクタを使って、現在の日付を表す Date オブジェクトを作成します。...


Vue.js で watch オプション、computed プロパティ、Vuex を使ってネストされたデータを監視する

watch オプションは、データプロパティの変更を監視し、変更が生じたときにコールバック関数を呼び出すために使用されます。ネストされたデータの場合、watch オプションを使用して、親オブジェクトと子オブジェクトの両方または一方のみを監視できます。...


constructorでcomponentWillMount()の処理を実行

React Hooksは、クラスベースのコンポーネントのライフサイクルイベントを関数コンポーネントで利用可能にする機能です。 componentWillMount() は、コンポーネントがマウントされる直前に呼び出されるライフサイクルイベントです。...


React.forwardRefとカスタムrefプロップの使い分け:迷ったらコレ!

React でコンポーネントに参照 (ref) を渡すには、主に 2 つの方法があります。React. forwardRef: React 16. 3 で導入された標準的な方法で、コンポーネントを forwardRef 関数でラップすることで実現します。...