1日目のゴール
1日目のテーマは
「ボタンを押した“きっかけ”で JavaScript が動くんだ、という感覚をつかむこと」 です。
やることはシンプルです。
ボタンを押す
→ JavaScript が動く
→ 何かが起きる（とりあえずログを出す）
この「流れ」が見えれば、もう立派に一歩目クリアです。
JavaScript は「イベントで動く」ってどういうこと？
勝手には動かない言語
JavaScript は、電源を入れたら勝手に動き続ける機械ではありません。
ページが読み込まれた
ボタンが押された
マウスが動いた
キーが押された
こういう「出来事（イベント）」が起きたときに、
「このときはこの処理をしてね」とあらかじめ登録しておいた関数が呼ばれます。
今日やるのは、その中でも一番よく使うイベントです。
click（クリックされたとき）
まずは最小の HTML と JavaScript を用意する
こんな HTML を用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンを押すアプリ</title>
</head>
<body>
<button id="myButton">押してね</button>
<script src="app.js"></script>
</body>
</html>
ポイントは、ボタンに id="myButton" がついていることと、
最後に app.js を読み込んでいることです。
id で HTML を取得するとは？
「画面の部品を JavaScript 側に持ってくる」イメージ
JavaScript から HTML のボタンを触るには、
まず「そのボタンを見つけて、変数に入れる」必要があります。
そのために使うのが document.getElementById です。
const button = document.getElementById("myButton");
ここでやっていることを、言葉で分解するとこうです。
ブラウザに「id が myButton の要素を探して」とお願いする
見つかった要素（button タグ）を、変数 button に入れる
この一行で、
「画面のボタン」と「JavaScript の変数」がつながります。
なぜ id を使うのか
id は「そのページの中で一意（1つだけ）」であることが前提です。
「このボタンだけを特定したい」
「この要素だけにイベントをつけたい」
そんなときに、id はとても分かりやすい“名前札”になります。
ボタンに「クリックされたら動く処理」を登録する
addEventListener の基本形
ボタンを取得したら、次は「イベントを登録」します。
button.addEventListener("click", function () {
console.log("ボタンが押されました！");
});
これが、JavaScript の超基本パターンです。
button.addEventListener("click", ...) を日本語にすると、
「button に対して、“click というイベントが起きたらこの関数を実行してね”とお願いする」
という意味になります。
ここが超重要：イベントは「あとから起きる」
addEventListener を書いた瞬間に関数が実行されるわけではありません。
「今は登録だけしておく」
「クリックされた“その瞬間”に、登録しておいた関数が呼ばれる」
この「あとから呼ばれる」という感覚が、
イベント駆動（イベントで動く）という考え方の核心です。
1日目の完成コードをまとめて見る
app.js の全体
const button = document.getElementById("myButton");
button.addEventListener("click", function () {
console.log("ボタンが押されました！");
});
これだけです。
でも、この 2 行の中に、
HTML と JavaScript をつなぐ（getElementById）
イベントが起きたときにだけ動く（addEventListener）
という、Webアプリの土台が全部入っています。
もう一歩だけ：アラートを出してみる
画面に「押されたよ！」と出してみる
コンソールだけだと少し地味なので、alert も試してみましょう。
const button = document.getElementById("myButton");
button.addEventListener("click", function () {
alert("ボタンが押されました！");
});
これで、ボタンを押すたびに
画面にポップアップが出るようになります。
ここで感じてほしいのは、
「たった 2 行で、画面の動きが変わる」
「HTML に触らなくても、JavaScript だけで“動き”を足せる」
という感覚です。
1日目で絶対に押さえておきたいポイント
1. HTML と JavaScript の役割の違い
HTML は「何があるか」を決める（ボタン・文字・入力欄など）
JavaScript は「どう動くか」を決める（押したら何をするか）
今日やったのは、
「HTML のボタンに、JavaScript で“動き”を足す」ことです。
2. getElementById → addEventListener の流れ
必ずこの順番になります。
HTML 要素を id で取得する
取得した要素に対して、イベントを登録する
この 2 ステップは、
今後どんなアプリを作るときも、何度も何度も出てきます。
ちょっとした練習アイデア
時間が少し余ったら、こんなことも試してみてください。
ボタンの文字を変えてみる（例：「クリックしてね」）
ボタンを 2 つに増やして、それぞれ別のメッセージを出すconsole.log と alert を両方書いてみる
どれも、今日の 2 つの技だけでできます。
getElementByIdaddEventListener("click", ...)
この 2 つを「手が覚えるくらい」まで触っておくと、
2日目以降が一気に楽になります。
