JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでランダムな数値を生成する方法｜Math.random()の使い方を解説

JavaScriptのMath.random()関数は、0以上1未満の範囲でランダムな浮動小数点数を生成するために使用されます。戻り値は「0以上・1未満」であり、1自体は含まれない点に注意してください。

この関数を活用すれば、サイコロのようなランダムな整数の生成や、くじ引き・シャッフル処理など、さまざまな場面で乱数を利用できます。

Math.random()で1〜10のランダムな整数を生成する方法

1から10までのランダムな整数を取得するには、Math.random()の結果に10を掛け、Math.floor()で小数点以下を切り捨てた後、1を加算します。

数式で表すと以下のようになります。

Math.floor(Math.random() * 10) + 1

  • Math.random() * 10：0以上10未満のランダムな小数を生成
  • Math.floor()：小数点以下を切り捨てて0〜9の整数にする
  • + 1：1を加算することで1〜10の範囲にする

サンプルコード

以下は、ボタンをクリックするたびに1〜10のランダムな整数を画面に表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Random</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>JavaScript Random</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、1〜10のランダムな数値が生成されます
</h3>
<script>
   let sampleEle = document.querySelector('.sample');
   document.querySelector('.Btn').addEventListener('click',()=>{
      let num = Math.floor((Math.random()*10))+1;
      sampleEle.innerHTML = '生成された数値 = ' + num;
   })
</script>
</body>
</html>

実行結果

ページを開くと、以下のように「CLICK HERE」ボタンが表示されます。

JavaScriptでランダムな数値を生成する方法｜Math.random()の使い方を解説

「CLICK HERE」ボタンをクリックすると、生成されたランダムな数値が赤字で表示されます。クリックするたびに、毎回異なる数値が表示されます。

JavaScriptでランダムな数値を生成する方法｜Math.random()の使い方を解説

コードの解説

このサンプルでは、querySelector()で.sampleクラスの表示領域と.Btnクラスのボタンを取得し、ボタンに対してクリックイベントリスナーを登録しています。

ボタンがクリックされると、Math.floor((Math.random()*10))+1によって1〜10のランダムな整数が生成され、innerHTMLを使って画面に結果が出力されます。

なお、範囲を変更したい場合は「10」の部分を任意の最大値に置き換えるだけで対応できます。例えば1〜100の乱数を生成したい場合は、Math.floor(Math.random() * 100) + 1と記述します。

  1. JavaScriptでランダムな16進数カラーコード(HEX)を生成する方法

    JavaScriptを使えば、ランダムな16進数のカラーコード(HEXコード)を簡単に生成できます。この記事では、ボタンをクリックするたびにランダムな色が表示されるシンプルなサンプルを紹介します。 実装例 以下のコードでは、「GENERATE」ボタンをクリックするとランダムなHEXカラーコードが生成され、その色がボックスの背景に適用されると同時に、コード自体も画面に表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" />

  2. JavaScriptでランダムカラーを生成する方法【サンプルコード付き】

    JavaScriptを使えば、ボタンをクリックするたびに要素の背景色をランダムに切り替えるといった動的な演出を簡単に実装できます。この記事では、jQueryと組み合わせて16進数のカラーコード（#RRGGBB）をランダムに生成し、指定した要素に適用する方法を、具体的なサンプルコードとともに解説します。 ランダムカラー生成の基本構文 JavaScriptでランダムな色を要素に適用する際の基本的な構文は次の通りです。 $("#yourIdName").css("background-color", yourCustomFunctionNameToGetR