JavaScript乱数完全解説!10選使い方&応用例

乱数初心者向けライブラリ作成と活用方法の解説JS
この記事は約11分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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);

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

乱数生成部分では、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秒ごとにボックスの位置をランダムに変更しています。

●注意点と対処法

乱数を利用する際には、次の注意点があります。

  1. 乱数は本当の意味での「ランダム」ではなく、疑似ランダムです。
    そのため、セキュリティに関連する処理などで厳密なランダム性が求められる場合には適切な方法を検討してください。
  2. 乱数生成によるパフォーマンスへの影響を考慮し、適切な範囲で乱数を利用してください。

対処法として、セキュリティに関連する処理では、より安全な乱数生成方法を検討してください。

また、パフォーマンスの問題がある場合には、乱数生成の回数や範囲を最適化することで改善が可能です。

●カスタマイズ方法

乱数を利用するコードは、様々な場面でカスタマイズが可能です。

例えば、次のようなカスタマイズが考えられます。

  1. 乱数を利用して、さまざまなアニメーションやエフェクトを実現する。
  2. 乱数を使って、ユーザーによるインタラクションに応じてコンテンツを変更する。
  3. 乱数を用いて、データの可視化やグラフィックデザインに活用する。

まとめ

乱数を利用することで、多様なコンテンツや機能を実現することができます。

注意点と対処法を理解し、カスタマイズ方法を活用して、独自のプロジェクトに役立ててください。

乱数を使ったアプリケーションは、ユーザーに新鮮な印象を与えることができ、エンゲージメントを向上させることにもつながります。