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

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

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

ランダムカラー生成の基本構文

JavaScriptでランダムな色を要素に適用する際の基本的な構文は次の通りです。

$("#yourIdName").css("background-color", yourCustomFunctionNameToGetRandomColor());

対象となる要素のセレクターに対して、独自に定義した「ランダム色取得関数」の戻り値を background-color プロパティに設定するだけです。

サンプルコード

以下は、ボタンをクリックするたびに正方形のdiv要素の背景色がランダムに変化する完全なHTMLサンプルです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="chooseColor" style="width:100px;height:100px;background-color:#FF0"></div>
<button onclick="pickRandomColor()">Click the button to get random color</button>
</body>
<script>
   //getColorCode() を呼び出すたびに新しいカラーコードを返します。
   function getColorCode() {
      var makeColorCode = '0123456789ABCDEF';
      var code = '#';
      for (var count = 0; count < 6; count++) {
         code =code+ makeColorCode[Math.floor(Math.random() * 16)];
      }
      return code;
   }
   //ボタンクリック時に呼び出される関数。
   function pickRandomColor() {
      $("#chooseColor").css("background-color", getColorCode());
   }
</script>
</html>

コードの仕組み

ポイントは getColorCode() 関数の中身です。使用可能な文字列「0123456789ABCDEF」から、Math.random() * 16 で生成した乱数を Math.floor() で整数化し、インデックスとして1文字ずつ取り出します。これを6回繰り返して「#」の後ろに連結することで、毎回異なる16進数カラーコードを作り出しています。

さらに pickRandomColor() 関数内では、jQueryの .css() メソッドを使って、生成されたカラーコードをdiv要素の背景色に反映しています。

プログラムの実行方法

上記のコードを anyName.html（index.html でも可）という名前で保存します。VS Codeエディタを使用している場合は、ファイルを右クリックして「Open with Live Server」を選択すれば、ブラウザ上ですぐに動作を確認できます。

実行結果

初期状態では、インラインスタイルで指定された黄色（#FF0）が表示されます。以下が出力イメージです。

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

続いて、ボタン「Click the button to get random color」をクリックした後の様子がこちらです。クリックするたびに背景色がランダムに変化します。

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

このように、わずか十数行のコードでランダムカラーの生成と適用を実現できました。デモページやUIのアクセント演出など、さまざまな場面で応用できるテクニックなので、ぜひ自分のプロジェクトでも活用してみてください。

  1. JavaScriptの列挙型（Enum）とは？オブジェクトを使った実装方法をわかりやすく解説

    JavaScriptには列挙型が組み込まれていない JavaScriptは、TypeScriptやJavaなどの言語と異なり、列挙型（Enum）を標準機能としてサポートしていません。そのため、JavaScriptで列挙型のようなものを実現するには、オブジェクトを使って自前で実装する必要があります。 本記事では、オブジェクトを利用してJavaScriptで列挙型を再現する方法を、実際のコード例とともにわかりやすく解説します。 オブジェクトで列挙型を実現する基本の考え方 JavaScriptで列挙型を作る最もシンプルな方法は、キー（名前）と値をペアにしたオブジェクトを定義することです。以下の例で

  2. 乱数生成器(RNG)とは?仕組みからゲームへの活用まで徹底解説

    乱数生成器(RNG)とは? 乱数生成器(Random Number Generator、RNG)とは、その名の通り、必要なタイミングで毎回ランダムな数値を取得する仕組みのことです。以前に生成された数値からパターンを推測することはできません。この数値はアルゴリズムまたはハードウェアデバイスによって生成され、予測可能な結果を回避するために非常に重要です。まるで地球上での私たちの人生のようで、次の瞬間何が起こるか誰にも分かりません。誰も自分のRNGコントローラーがどこにあるのか知らないのですから。 乱数生成アルゴリズムはビデオゲームで広く使われており、プレイするたびに異なる結果をもたらします。同じス