【JavaScript】ランダムな数値（乱数）の生成とCSS変数操作への応用

2026年1月24日

概要

JavaScriptで「サイコロを振る」「ランダムな背景色を作る」といった不規則な処理を行う場合、Math.random() メソッドを使用します。

このメソッドは単体では「0以上1未満の小数」しか生成しませんが、Math.floor() などと組み合わせることで、指定した範囲の整数（例：1〜100）を作り出すことができます。

本記事では、基本の乱数生成ロジックと、それを応用してクリックするたびに要素のグラデーションカラーをランダムに変更する実装を紹介します。

仕様（入出力）

入力: ユーザーによるボタンクリック操作
出力:
1. 0〜360の範囲のランダムな整数（色相用）の生成
2. 生成された数値をCSS変数（カスタムプロパティ）に適用し、画面上の長方形の色を変化させる

基本の使い方

Math.random() を目的に合わせて加工する基本式です。

目的	実装コード	結果の例
0以上1未満の小数	`Math.random()`	`0.123...`, `0.987...`
0〜99の整数	`Math.floor(Math.random() * 100)`	`0`, `55`, `99`
10〜19の整数	`10 + Math.floor(Math.random() * 10)`	`10`, `15`, `19`

コード全文（HTML / JavaScript）

HTML (index.html)

表示用の長方形と、トリガーとなるボタンを配置します。CSS変数 --hue-start と --hue-end でグラデーションの色を制御できるようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Color Generator</title>
    <style>
        body {
            font-family: sans-serif;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        /* 色が変わるターゲット要素 */
        .color-box {
            width: 300px;
            height: 200px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            
            /* CSS変数（初期値） */
            --hue-start: 0;
            --hue-end: 40;
            
            /* HSL色空間を使用したグラデーション */
            background: linear-gradient(
                135deg, 
                hsl(var(--hue-start), 100%, 60%), 
                hsl(var(--hue-end), 100%, 50%)
            );
            
            transition: background 0.5s ease;
        }

        .trigger-button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 4px;
        }
        
        .trigger-button:hover {
            background-color: #555;
        }
    </style>
    <script src="random-color.js" defer></script>
</head>
<body>
    <div class="color-box" id="target-rectangle"></div>
    <button class="trigger-button" id="change-btn">色を変更する</button>
</body>
</html>

JavaScript (random-color.js)

ボタンがクリックされるたびにランダムな色相（0〜360）を生成し、DOM要素のCSS変数を書き換えます。

/**
 * 指定された範囲のランダムな整数を生成するユーティリティ関数
 * @param {number} max - 最大値（この値は含まない）
 * @returns {number} 0以上max未満の整数
 */
const getRandomInt = (max) => {
    // Math.random() : 0以上1未満のランダムな小数
    // Math.floor()  : 小数点以下を切り捨てて整数にする
    return Math.floor(Math.random() * max);
};

/**
 * カラー変更イベントハンドラ
 */
const updateBoxColor = () => {
    // 操作対象の要素を取得
    const rectangle = document.querySelector("#target-rectangle");
    
    // 0〜360の間でランダムな数値を生成（色相環の角度）
    const randomHue = getRandomInt(360);
    
    // グラデーションの開始色と終了色（40度ずらす）を設定
    const startHueVal = randomHue;
    const endHueVal = randomHue + 40;

    // CSS変数（カスタムプロパティ）を更新して色を変更
    // HSLのH（色相）部分だけを書き換えます
    rectangle.style.setProperty("--hue-start", startHueVal);
    rectangle.style.setProperty("--hue-end", endHueVal);
    
    console.log(`新しい色相: ${startHueVal} -> ${endHueVal}`);
};

// イベントリスナーの設定
const button = document.querySelector("#change-btn");
if (button) {
    button.addEventListener("click", updateBoxColor);
}

カスタムポイント

範囲指定の実装:Math.floor(Math.random() * (max - min) + min) という公式を使うことで、「100から200の間」といった任意の範囲での乱数生成が可能になります。
色のバリエーション:今回は彩度（Saturation）と輝度（Lightness）を固定していますが、これらもランダムにすることでパステルカラーやダークカラーなど様々なトーンを表現できます。

注意点

暗号学的安全性:Math.random() は予測可能な乱数生成アルゴリズムを使用しているため、パスワード生成やセキュリティトークンなどの「予測されてはいけない値」には絶対に使用しないでください。その場合は crypto.getRandomValues() を使用します。
偏りの可能性:Math.round()（四捨五入）を使って整数化すると、最小値と最大値が出る確率が他の数値の半分になってしまうため、整数生成には基本的に Math.floor()（切り捨て）を使用するのが定石です。

応用

配列からのランダム抽出（おみくじ）

生成した乱数を配列のインデックス（添字）として使うことで、リストの中からランダムに一つを選ぶことができます。

const fortunes = ["大吉", "中吉", "小吉", "凶"];
const randomIndex = Math.floor(Math.random() * fortunes.length);
console.log(`今日の運勢: ${fortunes[randomIndex]}`);