【JavaScript】サンプルボタン作成 - その１ - オンプレ系インフラエンジニアが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だけを使い、素直に書いた場合です。

index.html

index.htmlでボタンをクリックしたときにJavaScriptの関数を呼び出すようにしています。

<!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>
    <script type="text/javascript" src="./index.js"></script>
    <!-- Sampleボタン -->
    <div id="samplebutton" class="sampleButton-ok" onclick="OnSampleButtonClick()">OK</div>
</body>
</html>

index.js

クリックしたときの具体的な挙動はindex.jsに書いてます。
CSSの適用状態で場合分けしてます。

//SampleButton
function OnSampleButtonClick() {
    const samplebutton = document.getElementById("samplebutton");

    // sampleButton-ngクラスが適用されているか確認
    if (!samplebutton.classList.contains('sampleButton-ng')) {
        //クラスの追加
        samplebutton.classList.add('sampleButton-ng');
        //テキストの書き換え
        samplebutton.textContent = "NG";
    } else {
        //クラスの削除
        samplebutton.classList.remove('sampleButton-ng');
        samplebutton.textContent = "OK";
    }
}

コード全体

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

おわりに

次は上記をクラス利用した形に書き直してみます。