【JavaScript】サンプルボタン作成 - その2(クラス利用) - オンプレ系インフラエンジニアがAzureを勉強する

はじめに

JavaScriptを勉強し始めました。
Reactのありがたみを知るために、簡単なサンプルボタンを下記パターンで書いて比較してみます。
それぞれの書き方の差を確認するために書いたので、実装としては良い書き方じゃないところもあります。

比較パターン

クラス利用無し
【JavaScript】サンプルボタン作成 - その１ - オンプレ系インフラエンジニアがAzureを勉強する
クラス利用有り(この記事)
【JavaScript】サンプルボタン作成 - その2(クラス利用) - オンプレ系インフラエンジニアがAzureを勉強する
React利用有り-関数コンポーネント使用ver.
【JavaScript】サンプルボタン作成 - その3(React利用 - 関数コンポーネントver.) - オンプレ系インフラエンジニアがAzureを勉強する
React利用有り-クラスコンポーネント使用ver.
【JavaScript】サンプルボタン作成 - その4(React利用 - クラスコンポーネントver.) - オンプレ系インフラエンジニアがAzureを勉強する

題材

下記のようなボタンをサンプルにします。
【要件】
OKボタンをクリックするとNGボタンに変わる
OKボタン、NGボタンともにマウスオーバーで色が変わる
ボタンにカーソルを合わせるとマウスカーソルが変化する
f:id:mitsunooon:20201020222502g:plain

共通部分(CSS)

CSSは一律共通にしています。

/* ボタンの基本にするスタイル */
/* OKの時 */
.sampleButton-ok {
    width: 128px;
    height: 40px;
    margin: 8px;
    background-color: #ff3535;
    border: solid 1px #ff3535;
    border-radius: 4px;
    color: #fff;
    font-size:12px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

/* OKの時のマウスオーバー */
.sampleButton-ok:hover {
    background-color: #da3232;
}

/* NGの時の基本スタイル(※OKボタンからの差分のみ) */
.sampleButton-ng {
    background-color: #fff;
    border: solid 1px #3553ff;
    color: #3553ff;
}

/* NGの時のマウスオーバー */
.sampleButton-ng:hover{
    background-color: #eee;
}

HTML/CSS/JavaScript-クラス利用有り

使っているのはHTML/CSS/JavaScriptだけですが、クラスの形にしました。
クラスの形にすると同じボタンの量産が少し楽になります。
developer.mozilla.org

index.html

ボタンをクリックしたときの挙動についてはここでは書かず、後からindex.jsを読み込むようにします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>SampleButtonテスト</title>
</head>
<body>
    <!-- Sampleボタン -->
    <div id="samplebutton" class="sampleButton-ok">OK</div>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

index.js

クリックしたときの具体的な挙動はindex.jsに書いてます。
OKNGの切り替え基準は同じです。

class SampleButton {
    // コンストラクター
    constructor(_button) {
        // ボタンのクリックイベントを設定する
        _button.addEventListener('click', this.click);
    }

    // クリックイベントで実行する処理
    click() {
        // NGボタンのCSSが適用されているかを判断する
        if (!this.classList.contains('sampleButton-ng')) {
            //クラスの追加
            this.classList.add('sampleButton-ng');
            //テキストの書き換え
            this.textContent = "NG";
        } else {
            //クラスの削除
            this.classList.remove('sampleButton-ng');
            //テキストの書き換え
            this.textContent = "OK";
        }
    }
}
// ボタンインスタンスを作成する。
//指定したidにSampleButtonを適用している
let samplebutton = new SampleButton(document.getElementById('samplebutton'));

ボタンを増やす場合

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>SampleButtonテスト</title>
</head>
<body>
    <!-- Sampleボタン -->
    <div id="samplebutton" class="sampleButton-ok">OK</div>
    <div id="samplebutton2" class="sampleButton-ok">OK</div>
    <div id="samplebutton3" class="sampleButton-ok">OK</div>
    <div id="samplebutton4" class="sampleButton-ok">OK</div>
    <div id="samplebutton5" class="sampleButton-ok">OK</div>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

index.js

class SampleButton {
    // コンストラクター
    constructor(_button) {
        // ボタンのクリックイベントを設定する
        _button.addEventListener('click', this.click);
    }

    // クリックイベントで実行する処理
    click() {
        // NGボタンのCSSが適用されているかを判断する
        if (!this.classList.contains('sampleButton-ng')) {
            //クラスの追加
            this.classList.add('sampleButton-ng');
            //テキストの書き換え
            this.textContent = "NG";
        } else {
            //クラスの削除
            this.classList.remove('sampleButton-ng');
            //テキストの書き換え
            this.textContent = "OK";
        }
    }
}

// ボタンインスタンスを作成する。
//指定したidにSampleButtonを適用している
let samplebutton = new SampleButton(document.getElementById('samplebutton'));
let samplebutton2 = new SampleButton(document.getElementById('samplebutton2'));
let samplebutton3 = new SampleButton(document.getElementById('samplebutton3'));
let samplebutton4 = new SampleButton(document.getElementById('samplebutton4'));
let samplebutton5 = new SampleButton(document.getElementById('samplebutton5'));

コード全体

コード全体は下記Githubにあげています。
github.com

おわりに

次はReactを使ってみます。