JavaScriptの乱数を完全解説！10選の使い方＆応用例

はじめに
●JavaScriptで乱数を生成する基本
- ○Math.random()の使い方
●乱数生成のサンプルコード
- ○サンプルコード1：整数の乱数生成
- ○サンプルコード2：範囲指定で乱数生成
●乱数の応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptで乱数を使いこなせるようになります。

乱数を生成する基本から応用例まで、初心者でも分かるように詳しく解説しています。

サンプルコードも豊富に用意しましたので、ぜひ参考にしてください。

●JavaScriptで乱数を生成する基本

JavaScriptでは、Math.random()関数を使用して乱数を生成します。

この関数は、0以上1未満の範囲でランダムな小数を返します。

○Math.random()の使い方

Math.random()関数は次のように使用します。

const randomNumber = Math.random();
console.log(randomNumber);

●乱数生成のサンプルコード

○サンプルコード1：整数の乱数生成

0以上10未満の整数の乱数を生成する方法です。

const randomNumber = Math.floor(Math.random() * 10);
console.log(randomNumber);

○サンプルコード2：範囲指定で乱数生成

指定した範囲内で乱数を生成する方法です。

ここでは、5以上15未満の整数の乱数を生成してみましょう。

const min = 5;
const max = 15;
const randomNumber = Math.floor(Math.random() * (max - min) + min);
console.log(randomNumber);

このコードでは、乱数の範囲を指定するために、変数minとmaxを設定しています。

乱数生成部分では、Math.random()の結果に(max - min)を掛け、その結果にminを足し、Math.floor()で小数点以下を切り捨てて整数にしています。

●乱数の応用例

○サンプルコード3：乱数を使ったクイズアプリ

乱数を使ってクイズの問題をランダムに表示するアプリを作成します。

const questions = [
  "日本の首都はどこ？",
  "リンゴの英語は？",
  "地球は何型？"
];

const randomNumber = Math.floor(Math.random() * questions.length);
const randomQuestion = questions[randomNumber];
console.log(randomQuestion);

このコードでは、まずquestions配列にクイズの問題を格納しています。

そして、乱数を生成し、配列のインデックスに使用してランダムな問題を表示しています。

○サンプルコード4：乱数を使ったスロットマシン

乱数を使ってシンプルなスロットマシンを作成します。

const symbols = ["🍇", "🍒", "🍊", "🍋", "🍉"];

function spin() {
  const randomIndex = Math.floor(Math.random() * symbols.length);
  return symbols[randomIndex];
}

console.log(spin(), spin(), spin());

このコードでは、まずsymbols配列にスロットマシンのシンボルを格納しています。

spin()関数を使って、シンボルをランダムに選択し、スロットの結果を表示しています。

○サンプルコード5：乱数を使った画像切り替え

乱数を使って画像をランダムに切り替える機能を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像切り替え</title>
</head>
<body>
  <img id="image" src="image1.jpg" alt="画像1">
  <button onclick="changeImage()">画像を変更</button>
  <script>
    const images = [
      "image1.jpg",
      "image2.jpg",
      "image3.jpg"
    ];

    function changeImage() {
      const randomNumber = Math.floor(Math.random() * images.length);
      const newImage = images[randomNumber];
      document.getElementById("image").src = newImage;
    }
  </script>
</body>
</html>

このコードでは、HTMLの<img>タグで画像を表示し、<button>タグで画像切り替えボタンを作成しています。

changeImage()関数を使って、配列imagesからランダムな画像ファイル名を選択し、画像のsrc属性を変更しています。

○サンプルコード6：乱数を使ったパスワード生成

乱数を使ってランダムなパスワードを生成します。

function generatePassword(length) {
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let password = "";

  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * characters.length);
    password += characters[randomIndex];
  }

  return password;
}

console.log(generatePassword(10));

このコードでは、generatePassword()関数によって、指定した長さのランダムなパスワードを生成しています。

charactersに使用可能な文字を格納し、乱数を使ってランダムなインデックスを取得し、パスワードに追加しています。

○サンプルコード7：乱数を使ったシャッフル機能

乱数を使って配列の要素をシャッフルします。

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [array[i], array[randomIndex]] = [array[randomIndex], array[i]];
  }

  return array;
}

const numbers = [1, 2, 3, 4, 5];
console.log(shuffle(numbers));

このコードでは、shuffle()関数によって配列の要素をシャッフルしています。

Fisher-Yatesアルゴリズムを使って、乱数を利用して配列内の要素を入れ替えています。

○サンプルコード8：乱数を使ったランダム配色

乱数を使ってランダムな色を生成します。

function randomColor() {
  const randomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
  return `rgb(${randomNumber(0, 255)}, ${randomNumber(0, 255)}, ${randomNumber(0, 255)})`;
}

document.body.style.backgroundColor = randomColor();

このコードでは、randomColor()関数を使って、乱数を利用してRGB値を生成しています。

randomNumber()関数で、0から255までの乱数を生成し、それをrgb形式にして返しています。

最後に、生成された色を背景色に設定しています。

○サンプルコード9：乱数を使った広告表示

乱数を使ってランダムに広告を表示する方法を紹介します。

const ads = [
  { image: 'ad1.jpg', link: 'https://example.com/ad1' },
  { image: 'ad2.jpg', link: 'https://example.com/ad2' },
  { image: 'ad3.jpg', link: 'https://example.com/ad3' }
];

function displayRandomAd() {
  const randomNumber = Math.floor(Math.random() * ads.length);
  const ad = ads[randomNumber];

  const adElement = document.createElement('a');
  adElement.href = ad.link;
  adElement.innerHTML = `<img src="${ad.image}" alt="広告">`;
  document.body.appendChild(adElement);
}

displayRandomAd();

このコードでは、広告の配列adsからランダムに広告を選択して表示しています。

displayRandomAd()関数で、乱数を使ってランダムな広告を選び、<a>要素を作成し、画像を挿入して、ページに追加しています。

○サンプルコード10：乱数を使ったアニメーション

乱数を使ってランダムなアニメーションを作成する方法を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ランダムアニメーション</title>
  <style>
    .box {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');

    function randomAnimation() {
      const randomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
      box.style.top = `${randomNumber(0, window.innerHeight - 50)}px`;
      box.style.left = `${randomNumber(0, window.innerWidth - 50)}px`;
    }

    setInterval(randomAnimation, 1000);
  </script>
</body>
</html>

このコードでは、HTMLで<div>要素を作成し、<div>要素を赤い四角形のボックスとしてスタイル設定し、randomAnimation()関数を使って乱数を使ったアニメーションを実装しています。

この関数では、乱数を生成して、ボックスの位置を変更しています。

最後に、setInterval()関数を使って1秒ごとにボックスの位置をランダムに変更しています。