6日目のゴール
6日目のテーマは
「イベントと id を、“ボタンだけ”から“画面全体の動き”として捉え直すこと」 です。
キーワードは相変わらず同じです。
JavaScript はイベントで動く
id で HTML を取得する
でも今日は、「ボタンを押す」だけに閉じず、
「どのタイミングで」「どの要素に」「どんなイベントをつなぐか」を
一段俯瞰して見ていきます。
ボタン＋状態＋見た目を“3層”で考える
「状態」「ロジック」「見た目」を分けてみる
まずは、シンプルな「ログイン風ボタン」を題材にします。
やりたいことはこうです。
最初は「ログインしていません」
「ログイン」ボタンを押すと「ログイン中」に変わる
ボタンの表示も「ログアウト」に変わる
もう一度押すと、元に戻る
HTML はこうします。
<p id="loginStatus">状態：ログインしていません</p>
<button id="loginButton">ログイン</button>
<script src="app.js"></script>
JavaScript はこうです。
const loginStatus = document.getElementById("loginStatus");
const loginButton = document.getElementById("loginButton");
let isLoggedIn = false;
function renderLogin() {
if (isLoggedIn) {
loginStatus.textContent = "状態：ログイン中";
loginButton.textContent = "ログアウト";
} else {
loginStatus.textContent = "状態：ログインしていません";
loginButton.textContent = "ログイン";
}
}
loginButton.addEventListener("click", function () {
isLoggedIn = !isLoggedIn;
renderLogin();
});
renderLogin();
ここで深掘りしたいのは、この3つの役割です。
isLoggedIn
…「本当の状態」を持つ変数（ログインしているかどうか）
renderLogin
…状態に応じて「見た目をどうするか」をまとめた関数
loginButton の click イベント
…「状態を変えるきっかけ」を受け取る場所
イベントは「きっかけ」、
状態は「事実」、
renderLogin は「事実を画面に反映する係」
という分け方ができると、アプリの構造が一気にクリアになります。
「ボタンを押せるかどうか」もイベントで変える
disabled を使って「押せない状態」を作る
次は、「カウントが 5 回を超えたらボタンを押せなくする」例です。
HTML:
<p id="countLabel">0 回押されました</p>
<button id="countButton">カウントアップ</button>
<script src="app.js"></script>
JavaScript:
const countLabel = document.getElementById("countLabel");
const countButton = document.getElementById("countButton");
let count = 0;
function renderCount() {
countLabel.textContent = count + " 回押されました";
if (count >= 5) {
countButton.disabled = true;
countButton.textContent = "これ以上は押せません";
} else {
countButton.disabled = false;
countButton.textContent = "カウントアップ";
}
}
countButton.addEventListener("click", function () {
count = count + 1;
renderCount();
});
renderCount();
ここで重要なのは、「イベントの中で UI の“ルール”を変えている」ことです。
count が変わる
→ renderCount が呼ばれる
→ 表示だけでなく、ボタンの押せる／押せないも変える
イベントは「きっかけ」ですが、
その中で「次のイベントの可能性（押せるかどうか）」まで変えられる、
というのが面白いところです。
「ボタン以外のイベント」も一度触ってみる
ページ読み込み時のイベントと組み合わせる
click 以外のイベントも、id と同じように扱えます。
例えば、「ページが読み込まれたときに初期メッセージを出す」＋「ボタンでメッセージを変える」例です。
HTML:
<p id="info">読み込み中...</p>
<button id="okButton">OK</button>
<script src="app.js"></script>
JavaScript:
const info = document.getElementById("info");
const okButton = document.getElementById("okButton");
window.addEventListener("load", function () {
info.textContent = "ページの読み込みが完了しました";
});
okButton.addEventListener("click", function () {
info.textContent = "OK が押されました";
});
ここで押さえたいのは、
window.addEventListener(“load”, …)
…「ページが読み込まれたとき」のイベント
okButton.addEventListener(“click”, …)
…「ボタンが押されたとき」のイベント
どちらも「イベントで動く」という意味では同じで、
違うのは「きっかけの種類」だけです。
「どのタイミングで動かしたいか」を選んで、
そこに処理をぶら下げる――
これが JavaScript のイベントの本質です。
「イベント登録の場所」を意識してコードを整理する
上：要素を取得、中：関数、下：イベント登録
6日目では、コードの“並べ方”も意識してみます。
例えば、こんな並び順です。
// 1. HTML 要素を id で取得
const startButton = document.getElementById("startButton");
const stopButton = document.getElementById("stopButton");
const statusLabel = document.getElementById("statusLabel");
// 2. 状態とロジック
let isRunning = false;
function renderStatus() {
if (isRunning) {
statusLabel.textContent = "動作中";
} else {
statusLabel.textContent = "停止中";
}
}
function start() {
isRunning = true;
renderStatus();
}
function stop() {
isRunning = false;
renderStatus();
}
// 3. イベント登録
startButton.addEventListener("click", start);
stopButton.addEventListener("click", stop);
// 初期表示
renderStatus();
この並べ方にすると、
上から順に読んだときにこう見えます。
どの要素を触るのか（id と変数）
どんな状態とロジックがあるのか（変数と関数）
どのイベントがどの関数につながっているのか（配線図）
「イベントで動く」という仕組みは変わっていませんが、
コードの並べ方を意識するだけで、
自分でも読み返しやすくなります。
「イベントを増やしても怖くない」感覚を固める
3つのボタン＋1つの状態で考える
最後に、少しだけ複雑な例を頭の中で設計してみます。
やりたいこと：
「低速」「中速」「高速」の3つのボタンがある
どれかを押すと、「現在の速度：◯◯」と表示される
選ばれているボタンだけ、見た目を変える（例：disabled にする）
HTML（イメージ）：
<button id="slowButton">低速</button>
<button id="normalButton">中速</button>
<button id="fastButton">高速</button>
<p id="speedLabel">現在の速度：未選択</p>
JavaScript（考え方だけ）：
速度を表す変数 currentSpeed を用意する（”slow” / “normal” / “fast” など）
renderSpeed 関数で、「currentSpeed に応じて speedLabel とボタンの状態を更新する」
各ボタンの click で、currentSpeed を変えてから renderSpeed を呼ぶ
ここでもやっていることは同じです。
id で要素を取得する
イベントで「きっかけ」を受け取る
状態を更新する
状態に応じて見た目を更新する
ボタンが 1 個でも 3 個でも、
「イベントで動く」「id で取得する」という土台は変わりません。
6日目のまとめ 「イベント＋id は“画面の設計ツール”」
今日つかんでほしいのは、この感覚です。
イベントは「きっかけ」で、click も load も同じ仕組みで扱える
id は「HTML のラベル」、getElementById は「そのラベルのリモコンを取る」
状態（変数）と見た目（textContent, disabled など）を分けて、イベントで橋渡しする
コードは「要素取得 → ロジック → イベント登録」の順に並べると読みやすい
ボタンが増えても、「状態を変える → 画面を描き直す」の型は変わらない
ここまで来たあなたは、
「ボタンを押すと何かが起きる」を、
“感覚”ではなく“パターン”として説明できる人 になっています。
7日目は、このパターンを使って、
「ボタン＋入力＋条件分岐＋カウンター」をまとめた
超ミニアプリに仕上げていくイメージです。
