バニラJavaScriptで要素のクリック数をカウントする方法

要素のクリック数をカウントするのは、JavaScriptで実装できる最もシンプルな処理のひとつです。必要なのは、クリック数を保存するための変数を宣言し、対象となる要素にaddEventListenerメソッドを設定することだけです。

ここでは、ホームボタンのようなボタン要素のクリック数を追跡したい場合を例に、具体的な手順を見ていきましょう。

HTMLマークアップ

まず、HTMLのbutton要素を作成し、button-homeというクラス名を付けます。

<button class="button-home">Home</button>

JavaScriptコード

次に、以下のコードをJavaScriptファイルに追加してください（コードの詳細は後ほど解説します）。

let buttonHome = document.querySelector(".button-home")
let CountButtonHomeClicks = 0

buttonHome.addEventListener("click", function() {
  CountButtonHomeClicks += 1
  console.log(CountButtonHomeClicks)
})

実行結果は以下のようになります。

上のボタン要素には、押しやすくするために少しCSSスタイルを追加しています。

JavaScriptコードの解説

• まず、querySelector()メソッドを使ってbutton要素のbutton-homeクラスを選択し、その結果をbuttonHome変数に代入します。
• 次に、クリック数を保存するためのCountButtonHomeClicks変数を宣言し、初期値として0を設定します。
• 続いて、addEventListener()メソッドを使って、buttonHomeにイベントリスナーを登録します。
• イベントリスナーの中では、監視するイベントとして'click'を指定し、クリックイベントが発生するたびに実行されるfunction()を定義しています。
• 関数内では、クリックイベントが発生するたびにCountButtonHomeClicks変数に1を加算します。加算には+=（プラスイコール）演算子を使用します。
• 最後に、console.log()を使って、CountButtonHomeClicks変数の値をクリックごとに出力します。

これで、特定の要素のクリック数をカウントする方法がわかりました。

覚えておくと良いポイント

• 上記のコードはES6の構文を使用しています。ES5環境で使う場合は、letをvarに置き換えるだけで同じように動作します。
• この例で使用している関数は、名前を持たないことから匿名関数（無名関数）と呼ばれます。関数式や関数宣言とは異なる点に注意しましょう。
• 匿名関数は再利用できません。複数のイベントで同じ関数を呼び出したい場合は、関数式または関数宣言を使用してください。

上記のコード一式は、CodePenでも確認できます。