はじめに
前回の記事では、ChatGPTから得たコードを「分解して理解する力」をテーマに、非同期処理や配列操作を中心に解説しました。
今回はさらに一歩踏み込んで、「UIの振る舞い」や「イベント処理」など、ChatGPTがよく書いてくれるけど“腑に落ちない”JavaScriptのパターンを深掘りしていきます。
1. addEventListenerってなんで使うの？
ChatGPTがよく出してくれるコード：
document.getElementById("btn").addEventListener("click", () => {
alert("押されました");
});
✅ そもそも「イベント」ってなに？
- ブラウザ上でのユーザー操作（クリック、スクロール、入力 など）
- それに「反応する仕組み」が addEventListener
✅ なぜ関数（コールバック）を渡すの？
- 「イベントが起きたらこれを実行してね」という予約
- すぐに実行ではなく、“あとで呼ばれる”から「関数をそのまま渡す」
2. DOMの取得方法、全部同じじゃない
document.getElementById("app");
document.querySelector("#app");
document.querySelector(".item");
document.querySelectorAll(".item");
✅ よくある“どれを使えばいいの？”問題
| メソッド | 取得対象 | 返すもの |
|---|---|---|
getElementById |
id指定 | 1つの要素 (Element) |
querySelector |
CSSセレクタ | 最初の1件だけ (Element) |
querySelectorAll |
CSSセレクタ | 複数のNodeList（配列っぽい） |
👉 複数取得はforEachで回せるNodeListになる点がポイント
3. クラスの操作、意外と使われてる
ChatGPTがよくやるやつ：
document.querySelector(".box").classList.add("active");
document.querySelector(".box").classList.remove("hidden");
document.querySelector(".box").classList.toggle("open");
✅ これ、何してるの？
- classList.add/remove/toggle：CSSのクラス名を操作して見た目や動きを制御
- JSで直接スタイル書かずに「CSSの定義と連携させる」思想
👉 状態管理とスタイルの切り替えがシンプルに書けるようになる
4. e.target / this の違いがわからない問題
document.querySelector("button").addEventListener("click", function (e) {
console.log("this:", this); // クリックされたbutton
console.log("e.target:", e.target); // 同じくbutton
});
✅ this と e.target の違いは？
-
thisは「誰がこの関数を実行したか」 -
e.targetは「どの要素が実際にクリックされたか」
→ 通常は同じになるけど、イベントがバブリングしてる場合などは違ってくる
👉 ReactやVueでも this や event.target の理解は地味に効いてくる
5. まとめ：ChatGPTに頼りながらも理解していく道
| よく出る構文 | 意味 | なぜそう書くか |
|---|---|---|
addEventListener |
イベント登録 | 後から処理を呼び出すため |
querySelector |
DOM取得 | CSSセレクタ使えて柔軟 |
classList.toggle |
クラス切替 | スタイル状態を簡潔に制御 |
e.target / this |
要素参照 | UIのどこを操作してるか把握 |
おわりに
今回も、「ChatGPTのコードは動くけど“腹落ちしてない”層」に向けて、原理を丁寧に解説する構成でお届けしました。
次回は、「関数定義・スコープ・クロージャ」などChatGPTが当たり前に使う“関数の深掘り”回を予定しています。