JavaScript | イベント処理での「普通の関数」と「アロー関数」の使い分け

イベント処理での「普通の関数」と「アロー関数」の使い分け

イベント処理では「クリックされた要素をthisで参照したいのか」「外側のthisを保持したいのか」で、普通の関数とアロー関数を使い分けます。

基本ルール

• 普通の関数（functionキーワード）
  • イベントリスナー内のthisは「イベントを受けた要素」になる。
  • DOM要素をthisで扱いたいときに便利。
• アロー関数
  • thisは外側のスコープに固定される。
  • クラスやオブジェクトのインスタンスを参照したいときに便利。
  • 代わりに「イベント発生元の要素」はevent.targetを使う。

例1: ボタン要素をthisで参照したい

<button id="btn">クリック</button>
<script>
  const btn = document.getElementById("btn");

  // 普通の関数
  btn.addEventListener("click", function() {
    console.log(this); // <button id="btn">...</button>
    this.style.backgroundColor = "yellow";
  });
</script>

<button id="btn">クリック</button>
<script>
  const btn = document.getElementById("btn");

  // 普通の関数
  btn.addEventListener("click", function() {
    console.log(this); // <button id="btn">...</button>
    this.style.backgroundColor = "yellow";
  });
</script>

👉 thisが「クリックされた要素」になるので、直接スタイル変更できる。

例2: クラスの中でインスタンスを参照したい

class App {
  constructor(button) {
    this.count = 0;
    button.addEventListener("click", () => {
      // アロー関数なのでthisはAppインスタンス
      this.count++;
      console.log("クリック回数:", this.count);
    });
  }
}

const btn = document.getElementById("btn");
new App(btn);

class App {
  constructor(button) {
    this.count = 0;
    button.addEventListener("click", () => {
      // アロー関数なのでthisはAppインスタンス
      this.count++;
      console.log("クリック回数:", this.count);
    });
  }
}

const btn = document.getElementById("btn");
new App(btn);

👉 アロー関数を使うと、thisが常にAppインスタンスを指す。
普通の関数だとthisはボタン要素になってしまう。

例3: アロー関数で要素を参照したいとき

btn.addEventListener("click", (event) => {
  console.log(event.target); // クリックされた要素
});

btn.addEventListener("click", (event) => {
  console.log(event.target); // クリックされた要素
});

👉 アロー関数ではthisは使えないが、event.targetで代用できる。

まとめ（使い分けの指針）

• 要素をthisで扱いたい → 普通の関数
• 外側のオブジェクトやクラスのインスタンスを参照したい → アロー関数
• 要素を参照したいけどアロー関数を使いたい → event.targetを使う

初心者向けに一言でまとめると：
「要素を触るなら普通の関数、インスタンスを触るならアロー関数」