はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。今回はJavaScriptを使用して簡単なcounterプログラムを作った時に感じた事をまとめてみました。

JavaScriptでcounterプログラムを作ってみた

実際に作ったのが下記のような見た目のcounterプログラムになります。

コードは以下になります。

HTMLコード

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Counter2</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
  </head>
  <body>
    <div class="counter">
      <div class="counter-number" id="js-counter">0</div>
      <button type="button" class="button js-button">-</button>
      <button type="button" class="button js-button">+</button>
      <button type="button" class="button" id="js-reset-button">Reset</button>
      <button type="button" class="button js-button">+2</button>
    </div>
    <script src="./counter.js"></script>
    <script src="./reset.js"></script>
  </body>
</html>

CSSコード

.counter {
  text-align: center;
  padding: 20px;
  border: 2px solid #000;
}

.counter-number {
  font-size: 50px;
  margin-bottom: 10px;
}

.button {
  font-size: 20px;
  padding: 10px 20px;
  border: 0;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  margin: 0 5px;
}

.button:hover {
  opacity: 0.8;
  transition: opacity 0.25s;
}

JSコード1


(() => {
  const $counter = document.getElementById("js-counter");
  let clickCount = 0;
  let firstClick = true;

  const clickHandler = (e) => {
    const $targetButton = e.currentTarget;
    let currentCount = parseInt($counter.textContent);

    console.log("Button clicked:", $targetButton.textContent);
    console.log("Current count:", currentCount);
    console.log("Click count:", clickCount);

    // 初めてクリックされたときにアラートを表示
    if (firstClick) {
      alert("100回まで高橋名人のように連打して!");
      firstClick = false;
    }

    clickCount++;

    // 100回目のクリック時にアラートを表示
    if (currentCount === 100) {
      alert("マインドフルネスできましたね");
    }

    // 101回目のクリック時にアラートを表示
    if (currentCount === 101) {
      alert("1000回まで押したら・・・");
    }

    // 300回目のクリック時にアラートを表示
    if (currentCount === 300 || currentCount === 301) {
      alert("負けないで、ほらそこにゴールは近づいてる");
    }

    // 600回目のクリック時にアラートを表示
    if (currentCount === 600 || currentCount === 601) {
      alert("揺れる思い、体中感じて");
    }

    // 900回目のクリック時にアラートを表示
    if (currentCount === 900 || currentCount === 901) {
      alert("桜並木のサライの空へ");
    }

    // 1000回目のクリック時にアラートを表示  =がひとつだとずっとalertが表示されるから注意
    if (currentCount === 1000 || currentCount === 1001) {
      alert("これが没頭ということですね。");
    }

    if (currentCount === 200) {
      alert("+2を押せるようになりました");
      // $plus2Button.disabled = false;
    }

    if ($targetButton.textContent === "+") {
      $counter.textContent = currentCount + 1;
    } else if ($targetButton.textContent === "-") {
      $counter.textContent = currentCount - 1;
    } else if ($targetButton.textContent === "+2") {
      console.log("Attempting to increment by +2");
      if (clickCount < 200) {
        alert("まだ押すことができません");
      } else {
        $counter.textContent = currentCount + 2;
      }
    }
  };

  const buttons = document.getElementsByClassName("js-button");
  for (let index = 0; index < buttons.length; index++) {
    buttons[index].addEventListener("click", (e) => clickHandler(e));
  }

  // 初期状態で+2ボタンを無効化
  // $plus2Button.disabled = true;
})();

JSコード2

(() => {
  const $counter = document.getElementById("js-counter");

  const clickHandler = () => {
    $counter.textContent = 0;
  };

  document
    .getElementById("js-reset-button")
    .addEventListener("click", clickHandler);
})();

当初私が考えていたclass、ID

最初に「-」「+」「Reset」の仕様を考えました。以下の内容です。

   <div class="counter">
      <div class="counter-number" id="js-counter">0</div>
      <button type="button" class="button js-button">-</button>
      <button type="button" class="button js-button">+</button>
      <button type="button" class="button" id="js-reset-button">Reset</button>
    </div>

その後「+2」の仕様を追加したいと思いました。
そこで私はResetボタンを真似て下記の名前でidを追加しました。
しかしこの仕様では、+2ボタンはCSSおよびJSが反映されませんでした。

     <button type="button" class="button js-button" id="js-plus2-button">+2</button>

何がダメだったのか？

結論から言うと、class="button js-button"というクラスがあるのに、それに追加した形でid="js-plus2-button"を加えたのが良くありませんでした。classのjs-buttonという表記とidのjs-〇〇-buttonの部分が被ってしまい、プログラムが混乱してしまっていた。
原因の詳細と改善した考察は以下になります。

1. IDとクラスの混同の可能性
id はページ全体で一意（他の要素と重複しない）である必要があるため、もし id="js-plus2-button" に重複や設定ミスがあった場合、JavaScriptがどのボタンを操作するべきか混乱してしまいます。id の重複や誤設定が原因でイベントが正しく動作しなかった可能性がある。

2. クラスを使うことで簡潔に処理
class="js-button" だけにしたことで、全ての js-button クラスのボタンを同じように処理できるようになりました。これにより、IDの指定による問題を回避し、JavaScriptがボタンを正しく操作できた可能性がある。

3. JavaScriptでの処理がシンプルに
JavaScriptでボタンにイベントを付ける際、クラスを使ってまとめて操作する方が簡単です。例えば、以下のようにクラス名でボタンを取得してイベントを設定するコードを使うと、全ての js-button クラスのボタンが対象になります。

const buttons = document.getElementsByClassName("js-button");
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    // ボタンがクリックされたときの処理
  });
}

まとめ

id を使って特定のボタンを操作しようとしていた部分で問題が発生していたため、クラス（class="js-button"）だけを使ってシンプルにしたことで、JavaScriptの処理がうまくいくようになったのです。
プログラムが混乱するようなclass,IDの指定の仕方はしないように心掛けようと思いました。特に今回のように名前が一部被ってしまう事が無いようにしたいと思います。

最後までご覧いただき本当にありがとうございました！！