今回はJavaScriptでランダムな数を使いたい場合に使える、乱数を返すメソッドを紹介します。
クリックするたびにランダムな数が返ってきたり、ページを読み込む度にランダムな見た目に変更される、アニメーションをランダムに動かしたい場合などに使えます。
現場でもたまに、ランダムな動きをしたいって言うクライアントさんはいるのでしっかりと覚えておきましょう。
どんな場合に使う？
- ランダムな確率で処理を行いたい場合
- アニメーションや要素の見た目にランダム性を加えたい場合
| 難易度（MAX10） | ★★★★☆☆☆☆☆☆ |
ランダムな乱数を取得する方法
| メソッド | 意味 |
|---|---|
| Math.random | 浮動小数点の擬似乱数を返す（0以上1未満） |
Math.random()は、0以上1未満の浮動小数点の擬似乱数を返します。
使い方は以下のとおりです。
Math.random();
Math.floor(Math.random() * 100); //0~99の数をランダムに返す
1 + Math.floor(Math.random() * 10); //1~10の数をランダムに返す以下はボタンをクリックする度にグラデーションカラーがランダムに変わるサンプルです。
Math.randomの参考程度にどうぞ。
HTML
<button class="colorbutton">クリックで色が変わる</button>
<div class="colorbox"></div>CSS
.colorbutton{
width: 100%;
}
.colorbox{
width: 100%;
height: 100%;
--start: hsl(0, 100%, 50%);
--end: hsl(322, 100%, 50%);
background-image: linear-gradient(-135deg, var(--start), var(--end));
}JavaScript
const colorbox = document.querySelector('.colorbox')
document.querySelector('.colorbutton').addEventListener('click', onClickcolorbutton)
function onClickcolorbutton() {
const randomColor = Math.trunc(Math.random() * 360);
const randomColorStart = 'hsl(${randomColor}, 100%, 50%)';
const randomColorEnd = 'hsl(${randomColor + 40}, 100%, 50%)';
colorbox.style.setProperty('--start', randomColorStart)
colorbox.style.setProperty('--end', randomColorEnd)
}以上が「ランダムな乱数を取得する方法：JavaScriptの基礎14」でした。
