【JS基礎-2】ボタンを押したら何かが起きる！「イベント処理」の基本

前回の記事で、HTMLの文字を書き換える「DOM操作」を学びました。
でも、ページを開いた瞬間に勝手に文字が変わるだけでは、あまり役に立ちませんよね。

私たちが作りたいのは、こういうものです。

「送信ボタンを押したら、完了メッセージが出る」
「メニューを押したら、リストが開く」

この「〇〇したら、××する」という仕組みを作るのが、今回のテーマ「イベント処理」です。
これを使えば、あなたのWebサイトはただの「ポスター」から「動くアプリ」へと進化します！

主役は「addEventListener（イベントリスナー）」
1. 基本の書き方
よく使うイベントの種類
実践：クリックで背景色を変えてみよう
1. コードの解説
【応用】関数の書き方は2種類ある
まとめ
1. 📝 今日のミニテスト

主役は「addEventListener（イベントリスナー）」

JavaScriptでイベントを扱う時の主役は、addEventListener（アド・イベント・リスナー）という命令です。

直訳すると「イベントの聞き耳を立てる人を追加する」という意味です。
要素に対して、「クリックされるのをじっと待っててね！」と命令するイメージです。

基本の書き方

「誰が」「何をしたら」「どうする」の3つを指定します。

// 1. 誰が（要素を取得）
const btn = document.querySelector("#my-btn");

// 2. 何をしたら（イベントの種類） ＆ 3. どうする（実行する関数）
btn.addEventListener("click", function() {
    alert("ボタンが押されました！");
});

この function() { ... } の中に書いたプログラムは、クリックされるまで実行されません。
クリックされた瞬間にだけ実行されます。

よく使うイベントの種類

"click" 以外にも、色々なタイミング（イベント）を検知できます。

イベント名	タイミング	使い道
click	クリックした時	ボタン、リンク、メニュー開閉など（一番使う！）
mouseover	マウスが乗った時	画像の切り替え、ツールチップの表示
mouseout	マウスが離れた時	ホバー演出を元に戻す
change	内容が変わった時	入力フォーム、プルダウンの選択変更

実践：クリックで背景色を変えてみよう

では、前回の「DOM操作」と組み合わせて、もっと面白いものを作りましょう。
ボタンを押すと、背景色がランダムに変わる「カラーチェンジャー」です。

<!DOCTYPE html>
<html lang="ja">
<body>

    <h1>背景色チェンジャー</h1>
    <button id="change-btn">色を変える！</button>
    <p>現在の色：<span id="color-name">白</span></p>

    <script>
        // 1. 必要な要素を全部とってくる
        const btn = document.querySelector("#change-btn");
        const colorName = document.querySelector("#color-name");

        // 2. ボタンに「クリック待ち」の罠を仕掛ける
        btn.addEventListener("click", function() {
            
            // 背景色を「水色」に変える
            document.body.style.backgroundColor = "#e0f7fa";
            
            // 文字も書き換える
            colorName.textContent = "水色";
            
            // アラートも出しちゃう
            alert("色が変わりました！");
        });
    </script>

</body>
</html>

コードの解説

document.querySelector でボタンと文字の場所を特定します。
addEventListener("click", ...) でクリック時の処理を予約します。
その中で style.backgroundColor を使ってCSSを書き換えています。

【応用】関数の書き方は2種類ある

先ほどの例では、addEventListener の中に直接 function を書きました（これを無名関数と呼びます）。
ですが、処理が長い場合は、外で作った関数を呼び出す書き方もできます。

// 先に関数（レシピ）を作っておく
function changeColor() {
    document.body.style.backgroundColor = "pink";
}

// 作った関数をセットする
// ⚠️「changeColor()」とカッコをつけないこと！つけると勝手に実行されちゃいます。
btn.addEventListener("click", changeColor);

どちらも動きは同じですが、短い処理なら「直接書く（無名関数）」、長い処理や使い回す処理なら「外に書く（関数名）」と使い分けるとスマートです。

まとめ

イベント処理の合言葉は addEventListener。
「クリック」や「マウスオーバー」など、様々なきっかけを作れる。
これと「DOM操作」を組み合わせれば、大抵のUI（ユーザーインターフェース）は作れる！

これで「ユーザーの操作」を受け取れるようになりました。
次回は、クラスを付け外しして「メニューを開いたり閉じたり」する、より実用的なテクニックを学びます！

📝 今日のミニテスト

クリックで答え合わせができます！

Q1. クリックイベントを検知するための正しい書き方は？

正解：要素.addEventListener("click", 関数)
“onclick” という古い書き方もありますが、現代では addEventListener が推奨されています。

Q2. 次のコードの間違いはどこ？
btn.addEventListener("click", run());

正解：run() のカッコが不要
カッコをつけると「その場で実行」されてしまいます。「クリックされたら実行」したい場合は、関数名だけの run にします。

Q3. 実践問題：ボタン(btn)をクリックしたら、ログに「Hello」と出すコードを完成させてください。

const btn = document.querySelector("#btn");

btn.addEventListener( ①, function() {
    console.log( ② );
});

// 答え
// ① "click"
// ② "Hello"