【JavaScript】イベントオブジェクト（`e`）って何？ なんで必要なの？

# JavaScriptのイベントオブジェクト（`e`）ってなに？ ボタン変数だけでよくないの？と思った初心者向け解説

## はじめに

「JavaScript でボタンをクリックしたときに `console.log(e)` とか書かれているけど、`e.target` とか `btn` とか、結局同じじゃない？」と思ったことはありませんか？  
実はこの **イベントオブジェクト**（`e`）は、初心者が「要素を取得してあるのになんでわざわざ `e` が必要？」と疑問に思いやすいポイントです。

この記事では、

1. 単純な場合には `btn` だけでも問題ない
2. でも実際は **イベントオブジェクト** がいろんな場面で活躍する

ということを丁寧に解説します。

---

## 1. 最小限のサンプル：本当に `btn` と `e.target` は同じ？

まずは、こんな最小限のコードを見てみましょう。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Event Practice</title>
</head>
<body>
  <button id="testBtn">クリックしてみて</button>

  <script>
    // ボタン要素を取得
    const btn = document.getElementById('testBtn');

    // ボタンにクリックイベントを付与
    btn.addEventListener('click', (e) => {
      console.log(e);         // イベントオブジェクトを出力
      console.log(e.target);  // クリックされた要素 (ここでは button)
      console.log(btn);       // 変数として事前に取得した要素 (同じく button)

      alert('コンソールを開いてみてね');
    });
  </script>
</body>
</html>
```

ブラウザで開いてボタンを押すと、

- `console.log(e)` : `MouseEvent` というオブジェクトが出力される
- `console.log(e.target)` : `<button id="testBtn">…</button>`  
- `console.log(btn)` : 同じ `<button id="testBtn">…</button>`  

確かにこの例だけ見ると、**`e.target` と `btn` は同じ要素** を指しているので、`btn` の方を直接使えば「それでいいじゃん！」と思うかもしれませんね。

---

## 2. それでもイベントオブジェクトが必要な理由

### 2-1. どの要素がクリックされたか分からないと困るケース

1つの要素（ボタン）が固定の場合は `btn` で十分です。でも、**複数の要素を1つのイベントでまとめて扱いたい**場合はどうでしょう？

#### 例：イベントデリゲーション

```js
const container = document.getElementById('container');

// containerにイベントを1つだけ登録
container.addEventListener('click', (e) => {
  // e.target は実際にクリックされた要素
  if (e.target.matches('.delete-button')) {
    // 複数あるボタンのどれがクリックされたか分かる
    console.log('削除ボタンが押されました', e.target);
  }
});
```

- もし複数の `.delete-button` があるなら、**1つ1つを`const btn = …`で取得**していたら手間だし動的に増減する場合は困ります。  
- `e.target` なら「ユーザーが本当にクリックした要素」を簡単に特定できます。

### 2-2. 座標やキー情報など追加データを使う場合

「どのキーが押されたか (`e.key`)」「どの座標をクリックしたか (`e.clientX`, `e.clientY`)」などの情報は、**イベントオブジェクト** に含まれています。  
ただ `btn` という変数だけでは、そんな付加情報は得られません。

例：マウス座標ログ

```js
document.addEventListener('mousemove', (e) => {
  console.log(`マウスの位置: x=${e.clientX}, y=${e.clientY}`);
});
```

例：キー入力

```js
document.addEventListener('keydown', (e) => {
  console.log(`押されたキー: ${e.key}`);
});
```

---

## 3. 結局、簡単な場合は `btn` だけでOK？

- はい、**単一ボタンをクリックして何かするだけ** なら、それでも大丈夫です。  
- しかし、**ほとんどの実用的なUI** では「どの子要素が押されたか判定」「マウス座標取得」「キー情報取得」などが必要になるため、最初から `e`（イベントオブジェクト）を受け取るパターンが**広く使われている**というわけです。

---

## 4. まとめ

- **「`btn` と `e.target` は同じ場合があるけど、使い道はまったく違う」**  
  - 単純な1ボタンなら同じ要素を指すだけ  
  - しかし複数要素の判定や追加情報を扱う場面では `e.target` やイベントオブジェクトそのものが必要
- **「イベントオブジェクト `e` が持つ付加情報」**  
  - クリック座標、押されたキー、イベントの種類 (`e.type` = `"click"`, `"keydown"`, etc...)  
  - 実際にクリックされた要素 (`e.target`) と、リスナーを持つ要素 (`e.currentTarget`) を区別できる
- **結論**  
  - 「初心者向けサンプルで `btn` と `e.target` が重複して見えても」 → それは単に最小例なだけ。  
  - 実際には **イベントオブジェクト** を扱わないと実現できない場面が多いため、標準で `(e) => ...` と受け取る書き方が定着している。

---

## 実践してみよう

1. **CodePenやローカルで簡単なHTML** を用意し、クリックした要素やマウス座標を `console.log(e)` してみる。
2. **複数ボタン** を配置して、「削除ボタンを押したら何かする」みたいな仕組みを**1つの親要素**にリスナーを付けて試す → `e.target.matches('.delete-button')` を条件に分岐。
3. **マウス移動イベント** や **キーイベント** を利用して、`e.clientX`, `e.key` などを表示する。

こうすると、イベントオブジェクトの便利さがより体感できます。  
ぜひコンソールに `console.log(e)` と書いて**実際の構造**を確認してみてください！

---

### 補足

- `e.target` の他にも `e.currentTarget`, `e.type`, `e.timeStamp` など多くのプロパティがあり、複雑なUIでもイベントハンドリングを柔軟に行えます。
- 初心者がよく戸惑う「`btn` と `e.target` が同じじゃん」と思う気持ちは自然。でも**本格的なアプリ**を作ると `e` が必須な状況が多いので、慣れておくと吉です。

---

以上が、**「なぜイベントオブジェクト（`e`）が必要なのか？ `btn` だけでいいんじゃないの？」** という疑問への簡単な解説でした。

- **単純な1ボタン → `btn` でもOK**  
- **複数要素 or 追加情報が必要 → イベントオブジェクト `e` が大活躍**  

ぜひいろんなパターンで試してみてください。