Day17 前半のゴール
Day17 では「イベント処理」に本格的に入ります。
ここまでで、ボタンを押したときに文字を変えるコードは何度か書きましたが、
「イベントってそもそも何者なのか」「click イベントはどう扱うのか」を、ちゃんと土台から整理します。
Day17 前半でつかみたい感覚
ユーザーの操作（クリック）が“きっかけ”になって JavaScript が動く
addEventListener(“click”, …) が「きっかけと処理を結びつけるスイッチ」
この感覚が入ると、
「いつ、どのタイミングでコードが動くのか」がクリアになります。
イベントとは何か
「ブラウザの中で起きた出来事」のこと
イベントとは、ざっくり言うと
「ブラウザの中で起きた出来事」のことです。
ボタンがクリックされた
マウスが要素の上に乗った
キーが押された
ページの読み込みが終わった
こういった「出来事」が起きた瞬間に、
JavaScript の処理を“発火”させることができます。
なぜイベントが必要なのか
JavaScript は、
「ページ読み込み時に一度だけ動くコード」だけでは
インタラクティブなアプリになりません。
ユーザーが何かしたときに反応する
＝「出来事（イベント）に応じて動く」
この仕組みがあるからこそ、
ボタンを押したり、入力したり、スクロールしたりしたときに
画面が変化する Web アプリが作れます。
click イベントとは何か
「その要素がクリックされた瞬間」に発生するイベント
click イベントは、
「マウスでクリックされた」「タップされた」
といった操作を表すイベントです。
特に button 要素と組み合わせるときに、
最もよく使われるイベントです。
<button id="myButton">押してね</button>
このボタンがクリックされた瞬間に、
何か処理を実行したいときに使うのが
click イベントです。
addEventListener で click を扱う基本形
最も基本的な書き方
click イベントを扱うときの基本形はこれです。
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
console.log("ボタンがクリックされました");
});
ここでやっていることは、順番に言うとこうです。
id=”myButton” の要素を取得する
その要素に対して addEventListener を呼ぶ
“click” というイベント名を指定する
「クリックされたときに実行する関数（処理）」を渡す
この「イベント名」と「処理」を結びつけるのが
addEventListener の役割です。
深掘り：なぜ HTML に直接 onclick と書かないのか
HTML 側にこう書く方法もあります。
<button onclick="alert('クリック')">押してね</button>
これは「インラインイベントハンドラ」と呼ばれる古い書き方で、
小さなサンプルなら動きますが、
実務ではほとんど使われません。
理由は、
見た目（HTML）とロジック（JavaScript）が混ざってしまい、
コードが管理しづらくなるからです。
addEventListener を使うと、
「HTMLは構造」「JavaScriptは動き」と役割を分けられるので、
保守性・セキュリティの両面で望ましい書き方になります。
具体例：クリックで文字を変える
HTML と JavaScript の全体像
まずは、Day15 でもやった「クリックで文字変更」を
イベント処理の視点で改めて見てみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day17 イベント処理 前半</title>
</head>
<body>
<h1 id="title">まだクリックされていません</h1>
<button id="clickButton">クリック</button>
<script>
const titleElement = document.getElementById("title");
const clickButtonElement = document.getElementById("clickButton");
clickButtonElement.addEventListener("click", () => {
titleElement.textContent = "クリックされました！";
});
</script>
</body>
</html>
ここでの流れはこうです。
ページ読み込み時に、h1 と button の要素を取得する
button に「click イベントが起きたらこの関数を実行」と登録する
実際にクリックされた瞬間に、その関数が呼ばれる
関数の中で textContent を書き換える
ポイントは、
「addEventListener を呼んだ瞬間に処理が実行されるわけではない」
ということです。
あくまで「予約」をしているだけで、
実際に動くのは「クリックされた瞬間」です。
関数を分けて書くパターン
無名関数ではなく、名前付き関数を使う
さきほどは無名関数（その場で書いた関数）を渡しましたが、
処理が長くなってきたら、関数を分けたほうが読みやすくなります。
const titleElement = document.getElementById("title");
const clickButtonElement = document.getElementById("clickButton");
function handleClick() {
titleElement.textContent = "クリックされました！（関数版）";
}
clickButtonElement.addEventListener("click", handleClick);
ここでは、
handleClick という関数を定義する
addEventListener に「関数そのもの」を渡す
という形になっています。
「handleClick」という名前から、
「これはクリックを処理する関数なんだな」と読み取れるので、
コードの意図が伝わりやすくなります。
複数のボタンに click イベントを付ける
それぞれ違う動きをさせる
例えば、2つのボタンで
違うメッセージを表示したいとします。
<h1 id="title">ボタンを押してください</h1>
<button id="helloButton">こんにちは</button>
<button id="byeButton">さようなら</button>
JavaScript はこう書けます。
const titleElement = document.getElementById("title");
const helloButtonElement = document.getElementById("helloButton");
const byeButtonElement = document.getElementById("byeButton");
helloButtonElement.addEventListener("click", () => {
titleElement.textContent = "こんにちは！";
});
byeButtonElement.addEventListener("click", () => {
titleElement.textContent = "さようなら！";
});
ここでのポイントは、
同じ titleElement を、
違うボタンの click イベントから操作している
ということです。
「どの要素にイベントを付けるか」と
「イベントが起きたときに、どの要素をどう変えるか」を
自由に組み合わせられるのが、イベント処理の面白さです。
セキュリティ・堅牢性の視点を少しだけ
イベントを付ける前に要素が存在するか確認する
実務では、
id を間違えたり、HTML 側の構造が変わったりして、
getElementById が null を返すことがあります。
その状態で addEventListener を呼ぶと、
エラーになります。
安全に書くなら、こういうチェックを入れられます。
const clickButtonElement = document.getElementById("clickButton");
if (!clickButtonElement) {
console.error("id=\"clickButton\" の要素が見つかりません。HTML を確認してください。");
} else {
clickButtonElement.addEventListener("click", () => {
console.log("クリックされました");
});
}
「イベントを付ける対象が本当に存在するか」を確認するのは、
堅牢なコードを書くうえでとても大事です。
インラインイベントでユーザー入力を直接埋め込まない
例えば、
ユーザー入力をそのまま onclick に埋め込むようなコードは、
XSS の危険が非常に高くなります。
<!-- こういうのは絶対にやらない -->
<button onclick="doSomething('ユーザー入力がここに入る')">危険</button>
イベント処理は必ず JavaScript ファイル（または script タグ内）で書き、
HTML には onclick などを直接書かない、というのが
セキュリティ的にもモダンな書き方です。
Day17 前半のミニサンプル
クリック回数をカウントするボタン
最後に、click イベントの典型的な例として
「何回クリックされたか」を表示するサンプルを見ておきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day17 イベント処理 前半</title>
</head>
<body>
<h1 id="title">まだクリックされていません</h1>
<button id="countButton">カウント</button>
<script>
const titleElement = document.getElementById("title");
const countButtonElement = document.getElementById("countButton");
let count = 0;
countButtonElement.addEventListener("click", () => {
count += 1;
titleElement.textContent = `クリック回数: ${count}`;
});
</script>
</body>
</html>
ここでは、
click イベントが起きるたびに count を増やす
増えた count を textContent に反映する
という流れになっています。
「イベント（クリック）」「状態（count）」「表示（textContent）」が
きれいにつながっている、良い練習題材です。
Day17 前半のまとめ
イベントとは「ブラウザの中で起きた出来事」。
click イベントは「クリックされた瞬間」を表す代表的なイベント。
前半では、
イベントの役割と意味
addEventListener(“click”, …) の基本形
無名関数と名前付き関数の書き方
複数ボタンに click イベントを付ける例
要素が存在しない場合の安全な書き方
インラインイベントを避けるというセキュリティの考え方
までを整理しました。
後半では、
クリックイベントと createElement / appendChild を組み合わせて
「クリックで要素を増やす」「クリックで状態を切り替える」
といった、より実践的なイベント処理に踏み込んでいきます。