Day17 前半のゴール
Day17 は 「イベント処理」＝ユーザーの操作に反応して JavaScript を動かす仕組み を本格的に理解する日です。
特に click イベント は、Webアプリの 80% を支える最重要イベント。
ここを押さえると、画面が“生き物のように動く”感覚がつかめます。
Day17 前半でつかみたい感覚
「クリックされた瞬間に JavaScript が動く」という“きっかけ”の仕組み
addEventListener(“click”, …) が“スイッチを登録する”操作であること
イベントとは何か
ブラウザの中で起きる「出来事」
イベントとは、ブラウザの中で起きる 出来事（Event） のことです。
クリックされた
キーが押された
マウスが動いた
ページが読み込まれた
こうした出来事が起きた瞬間に、JavaScript の処理を実行できます。
なぜイベントが必要なのか
JavaScript は「ページ読み込み時に一度だけ動く」だけではアプリになりません。
ユーザーが操作した瞬間に反応することで、初めて“動くWebページ”になります。
click イベントとは何か
「クリックされた瞬間」に発生するイベント
click イベントは、
ボタン・画像・リンクなどがクリックされた瞬間に発生するイベント です。
<button id="myButton">押してね</button>
このボタンが押された瞬間に処理を実行したいとき、
click イベントを使います。
addEventListener の基本形
クリックされたら処理を実行する“予約”をする
最も基本的な書き方はこれです。
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
console.log("ボタンがクリックされました");
});
ここで起きていることは次の通りです。
① 要素を取得する
② 「click イベントが起きたらこの処理を実行してね」と予約する
③ 実際にクリックされた瞬間に処理が実行される
深掘り：addEventListener は“今すぐ実行”ではない
よくある誤解はこれです。
button.addEventListener("click", handleClick());
これは 間違い。
handleClick() がその場で実行されてしまいます。
正しくは「関数そのもの」を渡します。
button.addEventListener("click", handleClick);
イベント処理では
「関数を渡す」＝「後で実行してもらう」
という考え方が非常に重要です。
例題：クリックで文字を変える
HTML
<h1 id="title">まだクリックされていません</h1>
<button id="clickButton">クリック</button>
JavaScript
const titleElement = document.getElementById("title");
const clickButtonElement = document.getElementById("clickButton");
clickButtonElement.addEventListener("click", () => {
titleElement.textContent = "クリックされました！";
});
ここで理解すべきポイント
クリック → イベント発生 → 登録した関数が実行 → DOM を書き換える
この流れが理解できれば、
「クリックで何かが起きる」仕組みはほぼマスターです。
名前付き関数で書くパターン
処理が長くなるときは関数を分ける
function handleClick() {
titleElement.textContent = "クリックされました！（関数版）";
}
clickButtonElement.addEventListener("click", handleClick);
名前を付けることで、
「この関数は何をするものか」が読みやすくなります。
複数のボタンに click イベントを付ける
それぞれ違う動きをさせる
<h1 id="title">メッセージ</h1>
<button id="helloButton">こんにちは</button>
<button id="byeButton">さようなら</button>
helloButton.addEventListener("click", () => {
titleElement.textContent = "こんにちは！";
});
byeButton.addEventListener("click", () => {
titleElement.textContent = "さようなら！";
});
同じ要素（title）を、違うボタンから操作できる
というのがイベント処理の面白さです。
セキュリティ・堅牢性の視点
要素が存在しない場合のチェック
実務では、HTML の変更で id が変わることがあります。
その場合、getElementById は null を返します。
const btn = document.getElementById("btn");
if (!btn) {
console.error("ボタンが見つかりません。HTML を確認してください。");
} else {
btn.addEventListener("click", () => {
console.log("クリックされました");
});
}
null のまま addEventListener を呼ぶとエラーになる
→ これを防ぐのが堅牢なコードです。
Day17 前半のミニサンプル
クリック回数をカウントするボタン
<h1 id="count">クリック回数: 0</h1>
<button id="countButton">カウント</button>
const countElement = document.getElementById("count");
const countButtonElement = document.getElementById("countButton");
let count = 0;
countButtonElement.addEventListener("click", () => {
count += 1;
countElement.textContent = `クリック回数: ${count}`;
});
ここには
イベント → 状態更新 → DOM更新
という Webアプリの基本サイクルがすべて入っています。
Day17 前半のまとめ
click イベントは「ユーザー操作をきっかけに JavaScript を動かす」ための中心機能。
前半では、
イベントとは何か
click イベントの意味
addEventListener の正しい使い方
関数を渡す vs 呼び出すの違い
複数ボタンへのイベント登録
null チェックによる安全なコード
までを整理しました。
後半では、
createElement / appendChild / classList / remove と組み合わせて、
「クリックで要素を増やす」「クリックで見た目を変える」
といった実践的な UI 制御に踏み込みます。