JavaScript - 背景色を変更する方法 - 配列からランダムに色を選ぶには？

クリックされたときに背景を違う色に変えよう

ウェブページに表示される要素は、その見た目を CSS によって装飾されていますよね。JavaScript を使うと、色や大きさなどの見た目、スタイルを変えることができますよ。

今回は、JavaScript を使って背景色のスタイルを変更する方法を紹介します。記事の後半では、色をランダムに変えるために使う配列や Math.random()、Math.floor() について解説します。

この記事を読むと分かること

document.querySelector()
関数 function(){}
style.backgroundColor
addEventListener()
配列
Math.random()
Math.floor()
length プロパティ

ユーザーの操作に応じて JavaScript を実行させる基本的な方法は知っていますか？document.querySelector() や addEventListener() について詳しく知りたい方は、以下の記事から読むことをお勧めします。

JavaScript - ボタンクリックでメッセージを表示する方法【初心者向け】

ユーザーの操作をきっかけに動く JavaScript の書き方を紹介します。ボタンのクリックに反応するシンプルなコードを書きながら、要素の取得やイベント、イベントハンドラーやイベントリスナーなどの基本を解説します。

PyxofyPyxofy

背景色を変えるサンプルプロジェクト

クリックで背景の色が変わる動きを、下のサンプルで試してみてください。

See the Pen JavaScript - Change Background Color on Click by Pyxofy (@pyxofy) on CodePen.

これから、基本編と応用編に分けて背景色を変える方法を見ていきましょう。

【基本編】背景色を変える方法
【応用編】背景色をランダムに変える方法

基本編では、クリックすると1回だけ背景が違う色に変わるようにします。応用編では、クリックするたびにいろいろな色に変わるようにしていきますよ。

【基本編】背景色を変える方法

最初に紹介するのは、ユーザーのクリックによって背景色を1回だけ変える方法です。要素のスタイルを変更する基本的な考え方を、順を追って分かりやすく説明していきますね。

HTML と CSS で背景色を変えるエリアを作る

まず、HTML を書きます。<div> 要素で背景色を変えるエリアを作ってください。ここでは container というクラスをつけました。<h1> 要素はなくても問題ありません。

<div class="container">
  <h1>click!</h1>
</div>

CSS で .container のサイズを指定します。

.container {
  width: 500px;
  height: 500px;
  border: 5px solid lightgray;
}

背景色を変えるエリア

背景色を変えるエリアを用意できたら、JavaScript を書いていきます。

要素を取得する

JavaScript で最初にすることは、要素の取得です。クラス .container で要素を選び出し、変数に格納しましょう。

const container = document.querySelector('.container');

関数を定義する

次に、関数を作ります。JavaScript でどんなことをしたいかというと、「背景の色を変更する」という処理です。処理は関数として書きます。changeColor という名前で関数を定義していきましょう。

function changeColor() {
  
  //ここに処理を書く
  // …
  
}

関数については、以下の記事をご覧ください。

JavaScript - 関数の基本 - 関数宣言と関数式【初心者向け】

プログラミングをする際、関数の知識は欠かせません。関数を使えば、同じコードを何度も書くことなく特定の処理を実行できるようになります。関数の書き方、パラメータや引数、return 文や戻り値、巻き上げなどの意味を学びましょう。

PyxofyPyxofy

要素のスタイルを変える方法

要素の見た目、スタイルを変えるためには、style のあとにプロパティを書き、新しいプロパティ値を代入します。背景色の新しいプロパティ値として、灰色 gray を設定してみましょう。

container は、背景色を変える要素への参照です。
ドット . に続けて、style を書きます。
ドット . に続けて、プロパティを指定します。 backgroundColor は要素の背景色を表すプロパティです。
代入演算子 = のあとに、設定したい値を引用符で囲んで書きます。

function changeColor() {
  container.style.backgroundColor = 'gray';
}

複数語からなるプロパティ名は、CSS では background-color のようにハイフン - でつなげて書きますよね。一方、JavaScriptでは backgroundColor のように、キャメルケースが使われます。

さて、背景の色を灰色にする関数を定義できたら、ユーザーのクリックに反応してこの関数が実行されるようにしていきますよ。

イベントリスナーを設定する

クリックをきっかけに関数が実行されるように、イベントリスナーを設定しましょう。

container は、背景色を変える要素への参照です。
ドット . に続けて、addEventListener() を書きます。
第１引数は、イベントの種類 'click' です。
第２引数は、実行したい関数名です。

container.addEventListener('click', changeColor);

完成コード - 背景色を変える

クリックで背景の色を灰色に変えるコードが完成です。

//************************************
// クリックで背景の色を灰色に変えるコード
//***********************************

const container = document.querySelector('.container');

function changeColor() {
  container.style.backgroundColor = 'gray';
}

container.addEventListener('click', changeColor);

次のセクションでは、このコードを応用して、背景をいろいろな色にランダムに変える方法を解説します。

【応用編】背景色をランダムに変える方法

先に完成コードをご覧ください。

//***************************************
// クリックで背景の色をランダムに変えるコード
//**************************************

const container = document.querySelector('.container');

const colors = ['gray', 'brown', 'blue', 'yellow'];

function changeColor() {
   container.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}

container.addEventListener('click', changeColor);

背景をいろいろな色にランダムに変えるためのポイントは、次のとおりです。

配列：複数の色を選べるようにする。
Math.random() と Math.floor()：ランダムな整数を取得する。
length プロパティ：配列の要素の数を取得する。

では、これらのポイントを具体的に説明していきますね。

配列とは？

背景をいろいろな色に変えるためには、配列を使います。配列は、複数の値を格納することができる特別な変数です。

配列は const で宣言するのが一般的です。
どんな種類の値が入っているのかが分かるような名前をつけます。
代入演算子 = のあとに、角括弧 ［］ を書きます。
［］ の中に、カンマ , で区切って値を並べます。

構文：

const 配列の名前 = [値1, 値2, 値3,...];

ここで作りたいのは、いろいろな色を格納した配列です。名前を colors とし、４つの色を引用符で囲んで並べてみましょう。

const colors = ['gray', 'brown', 'blue', 'yellow'];

このように、配列には複数の値が含まれます。配列内のどれかひとつの値を選び出したいときは、配列名に加えて「インデックス」を使いますよ。

配列内の要素を取得する方法

配列に格納した値一つひとつを、要素と呼びます。要素にはそれぞれ、インデックス（添字）という番号が順番につけられます。

JavaScript配列の要素とインデックス

配列内の要素を取得するためには、配列名のあとに角括弧 ［］ を書き、インデックス番号を指定します。

構文：

配列名[インデックス]

例として、上で作った配列 colors の要素を取得する方法を見てみましょう。

配列の最初の要素を取得するときは、colors[0] と書きます。
配列の２番目の要素を取得するときは、colors[1] と書きます。

const colors = ['gray', 'brown', 'blue', 'yellow'];

colors[0]; // gray
colors[1]; // brown

最初の要素のインデックスは「 1 」ではなく「 0 」です。インデックスは 0 から始まる、ということに注意してくださいね。

Math.random() と Math.floor()

背景の色をランダムに変えるためには、配列内の要素をランダムに取得できるようにします。そのためには、角括弧 ［］ に入れるインデックス番号に乱数を指定します。乱数を作るために使うのが、Math.random() です。

Math.random()

Math.random()は、0 以上 1 未満までの乱数を返します。

Math.random() の例：

Math.random(); // 0.593450901266489
Math.random(); // 0.020302804230656
Math.random(); // 0.205746075952858

上の例でも分かるように、Math.random() で返される乱数は少数です。これを配列のインデックス番号として扱えるように、整数にしましょう。そのために使うのが、Math.floor() です。

Math.floor()

Math.floor()は、() の中に指定した数以下で最大の整数を返します。分かりやすいように、いくつかの例を下にあげますね。

Math.floor() の例：

Math.floor(10.99);  // 10
Math.floor(10.01);  // 10
Math.floor(1.01);   // 1
Math.floor(0.99);   // 0
Math.floor(-10.01); // -11
Math.floor(-10.99); // -11

整数を返す Math.floor() と乱数を返す Math.random() を組み合わせてMath.floor(Math.random()) と書くと、整数の乱数を作ることができます。ここで作りたい整数の乱数は、配列のインデックス番号として使う「 0 」「 1 」「 2 」「 3 」です。

lengthプロパティ

配列のインデックス範囲内で整数の乱数を作るためには、Math.floor(Math.random()) の Math.random() に、配列の要素の数を掛けます。要素の数は、lengthプロパティで表すことができますよ。書き方は、配列名.length です。

length プロパティの例：

const colors = ['gray', 'brown', 'blue', 'yellow'];

colors.length; // 4

配列のインデックス番号として使うための、整数の乱数を作りましょう。length プロパティを使って、配列 colors の要素の数を Math.random() に掛けてください。

Math.floor(Math.random() * colors.length); // 0〜3までの整数の乱数

Math.random()は、0 以上 1 未満（ 0.999... ）までの乱数を返すのでしたね。なので、colors.length で返される「 4 」を掛けると、「 0 〜 3 」までの整数の乱数となります。

配列内の要素をランダムに取得する方法

さて、配列内の要素を取得する方法は覚えていますか？配列名[] の角括弧 [] の中に、インデックスを指定するんでしたね。配列 colors の要素をランダム取得するために、Math.floor(Math.random() * colors.length) を [] の中に書きましょう。

colors[Math.floor(Math.random() * colors.length)];

関数 changeColor の内容を、「背景色を配列からランダムに選ばれた色に変更する」という処理に変更します。ランダムに選び出された配列の要素を、backgroundColor プロパティに代入してください。

function changeColor() {
   container.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}

完成コード - 背景色をランダムに変える

クリックするたびに、背景色が gray、 brown、 blue、yellow のどれかに変わるコードが完成です。

//***************************************
// クリックで背景の色をランダムに変えるコード
//**************************************

const container = document.querySelector('.container');

const colors = ['gray', 'brown', 'blue', 'yellow'];

function changeColor() {
   container.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}

container.addEventListener('click', changeColor);