デモページ rgbでランダムな色を出力 [DOMイベント] [JavaScript] #初心者

今まで学習してきた内容を使って簡単なデモページを作成していこうと思います。

デモページの内容：

h1とボタンのある一覧画面を作成します。
ボタンをクリックするたびにランダムで、背景色と、h1の中身が変化します。
変化の内容は、rgb表記の色の背景画面と、その使ったrgbの値をh1として画面に出力させます。

こちらでは、作成した内容を要約しながら、作成手順や具体的に使用した関数やロジックの内容をまとめていけたらと思います。

アプリの内容紹介

作成手順：

HTMLファイルを作成します。
1-1. h1を作成
1-2. buttonを作成
1-3. scriptタグでJavaScriptファイルと接続
JavaScriptファイルを作成します。
2-1. button要素の取得
2-2. h1要素の取得
2-3. button要素にイベントハンドラーの追加
2-4. clickイベント処理を実装

clickイベント処理の中身
・ランダムな色をrgbで作成。
・作成したランダムなrgbの値をh1として表示
・作成したランダムなrgbの色をbackgroundcolorとして表示

また、作成したランダムなrgbの色の値の合計値が200以下の場合、
h1の表示文字色の色を白色に出力します。

HTML ファイル

まず、HTMLファイルでは、JavaScriptファイルの読み込みをします。

bodyの最下部にJavaScriptファイルへの接続を記載します。

<script src="app.js"></script>

h1には、最初の表示する画面として、ようこそ!と入力しておきます。
また、buttonに関しても、ボタン要素を作成し、中身をクリックしてねと記載しておきます。

<h1>ようこそ！</h1>

<button>クリックしてね</button>

HTML要素はシンプルにbuttonとh1要素の２つだけとします。

JavaScript ファイル

続いてJavaScriptファイルにロジックを記載していきます。

まずは、h1要素とbutton要素の２つを取得します。

const button = document.querySelector('button');
const h1 = document.querySelector('h1');

続いて、取得したbutton要素にclickイベントを追加していきます。
さらに、clickされた際のイベントとして下記を追加していきます。

・ランダムなrgbの色の値を出力する関数makeRandColorを変数newColorに保存します。
・保存したnewColorの値をbodyのbackgroundColorとして設定します。
・h1のinnerTextとしてnewColorの値を設定します。

button.addEventListener('click',function() {
    const newColor = makeRandColor();
    document.body.style.backgroundColor = newColor;
    h1.innerText = newColor;

JavaScrip ファイルのロジック「ランダムなrgbの色を作る」

function makeRandColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    return `rgb(${r},${g},${b})`;
}

function makeRandColor関数を定義。
それぞれ、r、g、bと変数を３つ作成して、それぞれにランダムな値を保存します。
ランダムな値の作成
・Math.floor関数(与えられた数値以下の最大の整数を返す)と
・Math.random関数(0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返す。)を使い、
・この関数に対して、必要なrgbの数0〜255なので、値の数としては「256個」を掛ける「*」
作成したr、g、bの値をテンプレートリテラルを使用し、rgb()としてreturnしてあげる。

JavaScrip ファイルのロジック「rgbの値をとる」

また、出力させる背景色が暗いと、同時に出力されるh1のテキストが見えづらくなってしまうため、　
h1の文字色を白色に変更するロジックを記載したいと思います。

const rgbValues = newColor.match(/\d+/g);

    const r = parseInt(rgbValues[0]);
    const g = parseInt(rgbValues[1]);
    const b = parseInt(rgbValues[2]);

    //RGBの合計値を計算して条件をチェック
    if (r + g + b < 200) {
        h1.style.color = 'white';
    } else {
        h1.style.color = 'black';
    }
});

rgbValuesという変数を作成します。
newColorで取得した数値(strung)「例：（124,13,7)」に対してmatchメソッドをかけます。
2-1. matchメソッドとは、引数に設定された正規表現に一致する部分文字列を検索して配列として返すものです。
2-2. ここでの正規表現とは、(/\d+/g)の部分で、
これは、１つ以上の数字に一致するパターンを示しています。
また、gフラグにより、一致するパターンを全て抽出します。
取得したrgbValuesの値は、配列の文字列になるので、その各々の数値に対してparseIntをかけることでnumber型に変換します。
取得したそれぞれの数値の合計を元に、if文を作成します。
4-1. もし、r+g+bの合計値が200より小さかったらh1のstyleのcolorをwhiteにし、
そうでなかったらblackにするロジックを記載しています。

JavaScriptファイルのまとめ：

const button = document.querySelector('button');
const h1 = document.querySelector('h1');

button.addEventListener('click', function() {
    const newColor = makeRandColor();
    document.body.style.backgroundColor = newColor;
    h1.innerText = newColor;

    //RGBの値を解析
    const rgbValues = newColor.match(/\d+/g);

    const r = parseInt(rgbValues[0]);
    const g = parseInt(rgbValues[1]);
    const b = parseInt(rgbValues[2]);

    //RGBの合計値を計算して条件をチェック
    if (r + g + b < 200) {
        h1.style.color = 'white';
    } else {
        h1.style.color = 'black';
    }
});

function makeRandColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    return `rgb(${r},${g},${b})`;
}

デモページ rgbでランダムな色を出力 [DOMイベント] [JavaScript]

目次：