いよいよ”動き”の入口。JavaScriptの楽しさは、「何かをしたら、何かが起きる」を書けること。その代表が、ボタンのクリックです。「文字を書きかえる」と、今回の「きっかけ」を合わせると、ぐっと本物のアプリらしくなります。
HTMLボタンと入力欄動かす対象の「押せるボタン」そのものの作り方（HTML側）はこの回イメージだけつかもう
const button = document.getElementById("send");
button.addEventListener("click", function () {
alert("押したね！");
});1行目は前回とまったく同じ、場所をつかまえるだけの行です（id="send"のボタンをbuttonという箱に入れています）。むずかしく見えるのは2行目から。でも読み下すと「ボタンがclickされたら、メッセージを出す」だけ。細かい書き方は後で大丈夫、今は”きっかけ→反応”の形を感じられればOK。
| 書くもの | 意味 |
|---|---|
button | つかまえておいた、きっかけを見張る相手 |
addEventListener | 「〜されたら、を仕込む」呪文 |
"click" | どんなきっかけか（ここではクリック） |
function () { ... } | 起きたときにやること（反応） |
文字の書きかえとつなげると、こうなる
「クリックされたら、文字を書きかえる」。textContent を反応の中に入れるだけです。
button.addEventListener("click", function () {
const el = document.getElementById("greeting");
el.textContent = "ありがとう！";
});ボタンを押すと、見出しが「ありがとう！」に変わる。きっかけ（クリック）→ 反応（書きかえ）という、ひとつの小さな仕組みができあがりました。「いいねを押すと数が増える」も、正体はこれの仲間です。
実際に動かしてみましょう。下のボタンを押すと、上のコードとまったく同じことが起こります。
代表的なきっかけを並べてみます。
| きっかけ | 発生するタイミング |
|---|---|
"click" | クリックされたとき |
"submit" | フォームが送信されたとき |
"mouseover" | マウスが乗ったとき |
"keydown" | キーボードが押されたとき |
書き方はどれも同じで、addEventListener の1つ目の材料（きっかけの名前）を入れかえるだけです。まずは「こんな種類がある」と眺めておけば十分。使うときにまた戻ってくれば思い出せます。
フォームの「送信」もきっかけになる
<form>には、クリックとは別の、専用のきっかけがあります。それが"submit"（送信）。送信ボタンが押されたときに発生します。
form.addEventListener("submit", function (event) {
event.preventDefault();
});event.preventDefault()は「もともとの動き（ページの再読み込み）を止める」おまじない。フォームは本来、送信すると別のページに移動しようとしますが、しまちゃんのページはそのまま残ってお礼を見せたいので、これで止めておきます。
class の要素をつかまえる：querySelector
これまでgetElementByIdでidの場所をつかまえてきましたが、classをつけた場所をつかまえたいときはquerySelectorを使います。
const form = document.querySelector(".contact-form");document.querySelector("目印")の目印は、CSSと同じ書き方。.で始めればクラス、#で始めればidをつかまえられます。getElementById("thanks")はquerySelector("#thanks")と書いても同じ意味。querySelectorのほうが、より広く使える万能選手です。
このレッスンのまとめ
- 動きは「きっかけ（イベント）→ 反応」でできている
- クリックは代表的なきっかけ。フォームには専用の
"submit"もある event.preventDefault()で、送信のもともとの動き（再読み込み）を止められるclassをつかまえるときはquerySelector
