https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/how-to-use-math-random-to-generate-random-value-with-javascript/
https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/how-to-use-math-random-to-generate-random-value-with-javascript/

JavaScriptで「ランダムな値」を生成するMath.random()の使い方を理解しよう

JavaScript上では関数で使用したり、セキュリティを高める都合上乱数が必要になるケースが多々あります。

その他にも一定の確率で処理を分けたいケースもあります。

そんな時に便利なのが「乱数」です。

JavaScriptでは、「乱数」を簡単に実行できる関数が用意されています。

Math.random()の使い方

構文

関数(メソッド)意味返り値
Math.random()浮動小数点の擬似乱数を返す(0以上1未満)数値
ランダム関数

デモコード

基本的に、下記の様にランダムな少数を取得したり、出力結果に一定の値を足したり、掛け算をしたりすることが多いです。

JavaScript
Math.random(); //0以上1未満のランダムな少数
Math.floor(Math.random() * 100); //0以上100未満のランダムな整数
10 + Math.floor( Math.random() * 10); //10以上20未満のランダムな整数

使用例

せっかくなので、使用例を1つ紹介します。

下記のデモコードでは、乱数を使用して、ボタンをクリックするたびに、ランダムにグラデーションの色を変えています。

Output
Pug
.container.my-5
  button#button.mb-4 Button
   div#rectangle
 
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}

#rectangle {
	width: 100%;
  height: 150px;
  --start: hsl(0, 100%, 50%);
  --end: hsl(180, 100%, 50%);
  background-image: linear-gradient(-90deg, var(--start), var(--end));
}
JavaScript
/** 長方形 */
const rectangle = document.getElementById('rectangle');

// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.querySelector('#button').addEventListener('click', onClickAction);

/** ボタンをクリックする度に、長方形のグラデーション色を変える */
function onClickAction() {
  // 0~359の間のランダムな数を取得する
  const randomValue = Math.trunc( Math.random() * 360 );
  // グラデーションの開始色と終了色を決定
  const randomColorStart = `hsl(${randomValue}, 100%, 50%)`; //取得したカラーコード
  const randomColorEnd = `hsl(${randomValue + 180}, 100%, 50%)`; //取得したカラーコードの補色

  // 長方形のグラデーションのための変数(--startと--end)を変更
  rectangle.style.setProperty('--start', randomColorStart);
  rectangle.style.setProperty('--end', randomColorEnd);
}

ボタンを押すと2色のグラデーションが変化します。

ちなみに、このサンプルでは、まずスタート地点のカラーコードを求めて、その上でその値に180を足した値(補色)を終了地点にしています。

インストラクター
コメント

コメントを残す