Day14 後半のゴール
後半では、
「ただ文字を書き換えられる」から一歩進んで、
「ユーザーの操作に反応して画面を変える」感覚をつかみます。
ここで目指すのはこの状態です。
Day14 後半でつかみたい感覚
ボタンを押されたら、getElementById で要素を取り、textContent を変える
入力欄の値を使って、画面のメッセージを動的に変える
DOM操作が「ただのおまじない」ではなく、
「ユーザーとの対話を作る道具」に変わっていきます。
ボタンを押したら文字が変わる仕組みを作る
まずは完成イメージ
こんな動きを作ります。
画面に「挨拶を変える」ボタンがある
ボタンを押すと、h1 の文字が「こんにちは」から「こんばんは」に変わる
HTML と JavaScript の全体像
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day14 DOM操作 後半</title>
</head>
<body>
<h1 id="title">こんにちは</h1>
<button id="changeButton">挨拶を変える</button>
<script>
const titleElement = document.getElementById("title");
const buttonElement = document.getElementById("changeButton");
buttonElement.addEventListener("click", () => {
titleElement.textContent = "こんばんは";
});
</script>
</body>
</html>
ここで重要なのは、
「getElementById で“2つの要素”を取ってきている」ことと、
「ボタンがクリックされたタイミングで textContent を変えている」ことです。
深掘り：イベントと DOM 操作の関係
addEventListener(“click”, …) は、
「このボタンがクリックされたら、この関数を実行してね」
という“予約”です。
その関数の中で、
titleElement.textContent = “こんばんは”;
と書くことで、
「クリックされた瞬間に、h1 の文字を書き換える」
という流れが生まれます。
ここでの本質は、
ユーザーの操作（イベント）
→ JavaScript の処理
→ DOM（画面）の変化
という「三段階のつながり」です。
入力欄の値を画面に反映する
完成イメージ
こんな動きを作ります。
テキストボックスに名前を入力する
「挨拶する」ボタンを押す
→ 「こんにちは、○○さん！」と表示される
HTML と JavaScript の全体像
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day14 DOM操作 後半</title>
</head>
<body>
<h1 id="title">挨拶アプリ</h1>
<p>
名前：<input id="nameInput" type="text">
<button id="greetButton">挨拶する</button>
</p>
<p id="message">ここに挨拶が表示されます。</p>
<script>
const nameInputElement = document.getElementById("nameInput");
const greetButtonElement = document.getElementById("greetButton");
const messageElement = document.getElementById("message");
greetButtonElement.addEventListener("click", () => {
const name = nameInputElement.value;
messageElement.textContent = `こんにちは、${name}さん！`;
});
</script>
</body>
</html>
ここでは、
getElementById で 3つの要素を取っています。
名前入力欄（input）
ボタン（button）
メッセージ表示用の p
そして、ボタンがクリックされたときに、
input の value を読む
→ 文字列を組み立てる
→ messageElement.textContent に代入する
という流れで画面を更新しています。
深掘り：textContent を使う理由（安全性）
ここで messageElement.textContent に代入しているのがポイントです。
もし、ユーザーが<script>alert("XSS")</script>
のような文字列を入力しても、
textContent はそれを「ただの文字」として扱います。
innerHTML を使ってしまうと、
それが「HTMLとして解釈」され、
悪意あるスクリプトが実行される可能性があります。
ユーザー入力や外部データを画面に出すときは、
基本的に textContent を使う、というのは
セキュリティ的にも非常に重要な習慣です。
ちょっとしたロジックを組み合わせる
空文字だったらエラーメッセージを出す
さきほどの挨拶アプリに、
「名前が空のときはエラーを出す」ロジックを足してみます。
<script>
const nameInputElement = document.getElementById("nameInput");
const greetButtonElement = document.getElementById("greetButton");
const messageElement = document.getElementById("message");
greetButtonElement.addEventListener("click", () => {
const name = nameInputElement.value;
if (name === "") {
messageElement.textContent = "名前を入力してください。";
return;
}
messageElement.textContent = `こんにちは、${name}さん！`;
});
</script>
ここでやっていることは、
入力値を取得
→ 空かどうかを if で判定
→ 空ならエラーメッセージを textContent にセット
→ そうでなければ挨拶メッセージをセット
という、これまで学んできた
条件分岐 × DOM操作 の組み合わせです。
深掘り：バリデーションとユーザー体験
この「空ならエラーを出す」は、
入力値のバリデーション（検証）の一種です。
セキュリティ的にも、
想定外の値をそのまま処理しない
おかしな入力は早めに弾く
というのはとても大事です。
DOM操作は「見た目を変える」だけでなく、
「ユーザーにフィードバックを返す」ための手段でもあります。
getElementById を使うときの設計のコツ
id の付け方でコードの読みやすさが変わる
例えば、こんな id の付け方は分かりやすいです。
title
nameInput
greetButton
message
JavaScript側の変数名も、
titleElement / nameInputElement / greetButtonElement / messageElement
のように揃えると、
「どの変数がどの要素を指しているか」が一目で分かります。
逆に、id=”a1″ など意味のない名前にすると、
コードを読むたびに「これ何だっけ？」となり、
バグの温床になります。
深掘り：DOM構造を“API”として設計する感覚
少し先の話ですが、
大きなアプリになると、
「この画面には、こういう id の要素が必ず存在する」
「この id の要素は、こういう役割を持つ」
というのが、ある種の「API設計」になります。
今のうちから、
id には意味のある名前を付ける
JavaScript側の変数名と対応させる
という癖をつけておくと、
後で自分をかなり助けることになります。
ありがちなバグとその対処
getElementById のスペルミス
例えば、HTML側がこうで：
<p id="message">...</p>
JavaScript側でこう書いてしまうと：
const messageElement = document.getElementById("mesage"); // s が1つ足りない
messageElement は null になります。
その状態で textContent に触ると：
messageElement.textContent = "変更"; // エラー
「null の textContent を読もうとした」というエラーになります。
対策：null チェックとエラーログ
const messageElement = document.getElementById("message");
if (messageElement === null) {
console.error("id=\"message\" の要素が見つかりません。スペルミスか、HTML側の修正漏れかもしれません。");
} else {
messageElement.textContent = "変更";
}
こうしておくと、
「何が起きているのか」がログから分かります。
セキュリティの観点でも、
「想定外の状態をそのまま進めない」
というのはとても重要です。
Day14 後半のミニサンプル：全部入り
入力＋ボタン＋メッセージ書き換えの小さなアプリ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day14 DOM操作 後半</title>
</head>
<body>
<h1 id="title">ミニ挨拶アプリ</h1>
<p>
名前：<input id="nameInput" type="text">
<button id="greetButton">挨拶する</button>
<button id="clearButton">クリア</button>
</p>
<p id="message">ここに挨拶が表示されます。</p>
<script>
const titleElement = document.getElementById("title");
const nameInputElement = document.getElementById("nameInput");
const greetButtonElement = document.getElementById("greetButton");
const clearButtonElement = document.getElementById("clearButton");
const messageElement = document.getElementById("message");
greetButtonElement.addEventListener("click", () => {
const name = nameInputElement.value;
if (name === "") {
messageElement.textContent = "名前を入力してください。";
return;
}
messageElement.textContent = `こんにちは、${name}さん！`;
});
clearButtonElement.addEventListener("click", () => {
nameInputElement.value = "";
messageElement.textContent = "ここに挨拶が表示されます。";
});
titleElement.textContent = "JavaScriptで動くミニ挨拶アプリ";
</script>
</body>
</html>
ここまで来ると、
もう立派な「小さなWebアプリ」です。
getElementById で要素をつかむ
textContent で文字を変える
value で入力値を読む・消す
イベントで「いつ動かすか」を決める
という要素が、全部つながっています。
Day14 後半のまとめ
document.getElementById は「触りたい要素を指さす」ための入口。
textContent は「その要素の中の文字を安全に変える」ための道具。
後半では、
ボタンを押したときに textContent を変える
入力欄の値を使ってメッセージを動的に変える
バリデーションとフィードバックを組み合わせる
id と変数名を設計する感覚
スペルミスや null を意識した安全な書き方
まで踏み込みました。
ここまでできているあなたは、
もう「コードだけ書く人」ではなく、
「画面とユーザーとの対話を設計する人」に足を踏み入れています。
