Day15 後半のゴール
後半では、前半で作った
「ボタンを押したら文字が変わる」仕組みを一段進化させて、
「押すたびに文字が切り替わる“トグル”」を完成させます。
ここでしっかり身につけたいのは次の感覚です。
Day15 後半でつかみたい感覚
「今どんな状態か」を変数で覚えておき、クリックのたびに状態を切り替える
状態に応じて textContent を変える＝ロジックと画面を結びつける
前半のおさらい：一方向の変更
一度押したら「こんばんは」になるだけのバージョン
まずは前半でやった「一方向の変更」をもう一度整理します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day15 総合演習</title>
</head>
<body>
<h1 id="title">こんにちは</h1>
<button id="toggleButton">あいさつを変える</button>
<script>
const titleElement = document.getElementById("title");
const toggleButtonElement = document.getElementById("toggleButton");
toggleButtonElement.addEventListener("click", () => {
titleElement.textContent = "こんばんは";
});
</script>
</body>
</html>
このバージョンは、
何回押しても「こんばんは」のままです。
ここから、「押すたびに切り替わる」ようにしていきます。
状態を表す変数を導入する
「今は朝か夜か」を覚えておく
トグルを作るには、「今どっちの状態か」を覚えておく必要があります。
そこで、JavaScript側に状態を表す変数を用意します。
let isMorning = true;
isMorning が true のときは「こんにちは」、
false のときは「こんばんは」と決めておきます。
この変数は、
「画面の状態を表す小さなモデル」だと思ってください。
状態に応じて textContent を変える
次に、「状態を見て表示を変える」処理を書きます。
toggleButtonElement.addEventListener("click", () => {
if (isMorning) {
titleElement.textContent = "こんばんは";
isMorning = false;
} else {
titleElement.textContent = "こんにちは";
isMorning = true;
}
});
流れはこうです。
isMorning が true なら「今は朝」扱い
→ 「こんばんは」に変える
→ isMorning を false にする
isMorning が false なら「今は夜」扱い
→ 「こんにちは」に変える
→ isMorning を true にする
クリックのたびに isMorning が
true ⇄ false と反転していくので、
表示も「こんにちは ⇄ こんばんは」と切り替わります。
完成コードを通して読む
全体コード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day15 総合演習 トグル版</title>
</head>
<body>
<h1 id="title">こんにちは</h1>
<button id="toggleButton">あいさつを変える</button>
<script>
const titleElement = document.getElementById("title");
const toggleButtonElement = document.getElementById("toggleButton");
let isMorning = true;
toggleButtonElement.addEventListener("click", () => {
if (isMorning) {
titleElement.textContent = "こんばんは";
isMorning = false;
} else {
titleElement.textContent = "こんにちは";
isMorning = true;
}
});
</script>
</body>
</html>
重要なポイントの整理
HTML側で「触りたい要素」に id を付けている
JavaScript側で getElementById で要素をつかんでいる
状態を表す変数 isMorning を用意している
クリックイベントの中で、状態に応じて textContent を変えている
同時に、状態変数も更新している
ここまでできていると、
「画面の状態」と「内部の状態」がきちんと対応している
きれいなコードになっています。
状態と表示を分けて考える練習
表示を変える処理を関数に切り出す
もう一歩だけ整理してみます。
「状態に応じて表示を更新する」処理を関数にします。
function updateTitle() {
if (isMorning) {
titleElement.textContent = "こんにちは";
} else {
titleElement.textContent = "こんばんは";
}
}
そして、クリック時の処理をこう書き換えます。
toggleButtonElement.addEventListener("click", () => {
isMorning = !isMorning; // true ⇄ false を反転
updateTitle();
});
全体はこうなります。
<script>
const titleElement = document.getElementById("title");
const toggleButtonElement = document.getElementById("toggleButton");
let isMorning = true;
function updateTitle() {
if (isMorning) {
titleElement.textContent = "こんにちは";
} else {
titleElement.textContent = "こんばんは";
}
}
toggleButtonElement.addEventListener("click", () => {
isMorning = !isMorning;
updateTitle();
});
updateTitle();
</script>
ここでの構造はこうです。
isMorning が「状態」を表す
updateTitle が「状態から画面を作る」役割
クリックイベントは「状態を変える」役割
この分け方は、
アプリが大きくなっても通用する考え方です。
セキュリティと堅牢性の視点を少しだけ
getElementById が失敗したときの扱い
実務では、
「id を間違えた」「HTML側が変更された」などで
要素が見つからないことがあります。
安全に書くなら、こういうチェックも入れられます。
const titleElement = document.getElementById("title");
const toggleButtonElement = document.getElementById("toggleButton");
if (!titleElement || !toggleButtonElement) {
console.error("必要な要素が見つかりません。id のスペルや HTML を確認してください。");
} else {
let isMorning = true;
function updateTitle() {
if (isMorning) {
titleElement.textContent = "こんにちは";
} else {
titleElement.textContent = "こんばんは";
}
}
toggleButtonElement.addEventListener("click", () => {
isMorning = !isMorning;
updateTitle();
});
updateTitle();
}
「想定していた要素がなかったときに、そのまま進めない」
というのは、セキュリティ・安定性の両方にとって重要です。
textContent を使い続ける意味
今回の例では文字列はすべて自分で書いていますが、
今後、ユーザー入力や外部データを表示するようになっても、
textContent を使っていれば「文字として」扱われます。
innerHTML を安易に使うと、
意図しない HTML やスクリプトが実行される危険があります。
「画面に出すときはまず textContent」
この習慣は、あなたのコードを長期的に守ってくれます。
Day15 後半のまとめ
Day15 後半では、
状態を変数で持つ
状態に応じて textContent を変える
クリックのたびに状態を反転させる
状態と表示を関数で分けて整理する
要素が見つからない場合の安全な書き方を意識する
ところまで踏み込みました。
ここまでできているあなたは、
「ボタンを押したら何かが起きる」画面を、
自分の頭で設計して組み立てられる段階に来ています。