2日目のゴール
2日目のテーマは
「“なんとなく動く”から、“自分で狙ってイベントを設計できる”に近づくこと」 です。
やることは、昨日と同じく
「イベント」と「id で HTML を取得する」だけ。
でも今日は、バリエーションを増やして「仕組み」をはっきりさせます。
イベントは「きっかけ」＋「反応」のセット
きっかけと反応を言葉で分けて考える
JavaScript のイベントは、必ずこの二つの組み合わせです。
きっかけ（何が起きたら）
反応（そのとき何をするか）
昨日は「クリックされたら → console.log を出す」でした。
今日は、きっかけと反応を意識して書き分けてみます。
<button id="helloButton">あいさつ</button>
<button id="byeButton">お別れ</button>
<script src="app.js"></script>
const helloButton = document.getElementById("helloButton");
const byeButton = document.getElementById("byeButton");
helloButton.addEventListener("click", function () {
alert("こんにちは！");
});
byeButton.addEventListener("click", function () {
alert("さようなら！");
});
ここで大事なのは、
「ボタンごとに“きっかけと反応のペア”を登録している」という感覚です。
helloButton → クリック → 「こんにちは！」
byeButton → クリック → 「さようなら！」
この「誰に」「どのイベントで」「何をさせるか」を
自分で設計している、という意識を持ってください。
id で HTML を取得する“タイミング”を意識する
HTML がまだないと取得できない
昨日はこう書きました。
<button id="myButton">押してね</button>
<script src="app.js"></script>
const button = document.getElementById("myButton");
これがうまくいく理由は、
「script タグがボタンの“あと”に書かれているから」です。
ブラウザは上から順に HTML を読み込みます。
ボタンを読む
→ id=”myButton” の要素が作られる
→ そのあとで app.js が読み込まれる
→ getElementById でちゃんと見つかる
もし、script を head の中に書いてしまうとどうなるか。
<head>
<script src="app.js"></script>
</head>
<body>
<button id="myButton">押してね</button>
</body>
この場合、app.js が読み込まれる時点では
まだボタンが存在していないので、document.getElementById("myButton") は null（何もない）になります。
安全な書き方をひとつ覚えておく
超初級のうちは、
「script は body の一番下に書く」
これだけ守れば OK です。
<body>
<!-- 画面の中身 -->
<script src="app.js"></script>
</body>
これで、「HTML が全部できてから JavaScript が動く」状態になります。
イベント登録の書き方を“2パターン”持っておく
無名関数でその場に書くパターン
昨日やったのはこの形です。
button.addEventListener("click", function () {
alert("押されたよ！");
});
「この場でしか使わない処理」を書くときに便利です。
小さいサンプルなら、これで十分です。
関数に名前をつけて登録するパターン
少し整理したいときは、こう書きます。
function handleClick() {
alert("押されたよ！");
}
button.addEventListener("click", handleClick);
ここでポイントは、handleClick のあとに () をつけていないことです。
handleClick() と書くと「今すぐ実行してしまう」ので、
イベント登録では「関数そのもの」を渡します。
「あとでクリックされたときに呼んでね」と
“予約”しているイメージです。
2つのボタンで「同じ処理」を共有してみる
同じ反応を、複数のきっかけに結びつける
例えば、「どのボタンを押しても“ありがとう”と出したい」とします。
<button id="btn1">ボタン1</button>
<button id="btn2">ボタン2</button>
<button id="btn3">ボタン3</button>
<script src="app.js"></script>
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
const btn3 = document.getElementById("btn3");
function sayThanks() {
alert("ありがとう！");
}
btn1.addEventListener("click", sayThanks);
btn2.addEventListener("click", sayThanks);
btn3.addEventListener("click", sayThanks);
ここで感じてほしいのは、
「同じ関数を、複数のイベントに登録できる」
「きっかけは違っても、反応を共通化できる」
ということです。
これができると、
「どのボタンからでも同じ処理を呼びたい」
という場面で迷わなくなります。
「一度だけ動くボタン」を作ってみる
クリックされたら無効にする
イベントの面白さは、「状態と組み合わせられる」ところです。
例えば、「一度押したら二度と押せないボタン」を作ってみます。
<button id="onceButton">一度だけ押せるボタン</button>
<script src="app.js"></script>
const onceButton = document.getElementById("onceButton");
onceButton.addEventListener("click", function () {
alert("一度だけのメッセージです！");
onceButton.disabled = true;
});
ここでのポイントは、
クリックされた“あと”に、onceButton.disabled = true; でボタンを無効化していることです。
イベントは「きっかけ」ですが、
その中で「次のきっかけを変える」こともできる、というのが面白いところです。
「ページが読み込まれたとき」のイベントもある
click だけがイベントじゃない
ここまでずっと click を使ってきましたが、
イベントは click だけではありません。
例えば、「ページが読み込まれたとき」に動くイベントがあります。
window.addEventListener("load", function () {
console.log("ページの読み込みが完了しました");
});
これを使うと、
HTML が全部読み込まれた
→ そのタイミングで初期化処理をする
という流れが作れます。
超初級のうちは、
「click」と「load」だけ覚えておけば十分です。
クリックされたときに動く
ページが読み込まれたときに動く
この二つが分かれば、
「いつ何をしたいか」を自分で選べるようになります。
2日目の完成サンプルをひとつにまとめる
複数ボタン＋一度だけボタン＋ロード時メッセージ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンを押すアプリ 2日目</title>
</head>
<body>
<button id="helloButton">あいさつ</button>
<button id="byeButton">お別れ</button>
<button id="onceButton">一度だけ押せる</button>
<script src="app.js"></script>
</body>
</html>
window.addEventListener("load", function () {
console.log("ページが読み込まれました");
});
const helloButton = document.getElementById("helloButton");
const byeButton = document.getElementById("byeButton");
const onceButton = document.getElementById("onceButton");
function sayHello() {
alert("こんにちは！");
}
function sayBye() {
alert("さようなら！");
}
helloButton.addEventListener("click", sayHello);
byeButton.addEventListener("click", sayBye);
onceButton.addEventListener("click", function () {
alert("これが最後のクリックです！");
onceButton.disabled = true;
});
この中に、今日のポイントが全部入っています。
id で HTML を取得する
click イベントを登録する
同じ関数を複数のボタンに使う
イベントの中で状態（disabled）を変える
load イベントで「最初の一回」を扱う
2日目のまとめ 「イベントを自分で選べる」感覚
今日つかんでほしいのは、
「イベントは“勝手に起きるもの”ではなく、“自分で選んで結びつけるもの”」
という感覚です。
どの要素に
どのイベントで
どんな反応をさせるか
これを自分で決められるようになると、
JavaScript が「よく分からない魔法」から
「自分で設計できる道具」に変わります。
3日目以降は、
ここに「画面を書き換える」「数字を増やす」などを足していきますが、
土台はずっと今日のままです。
getElementById
addEventListener
この二つを、もう一度だけ自分の手で書いて、
「ここはもう怖くない」と言えるところまで持っていきましょう。
