Day15 前半のゴール
Day15 は「総合演習」です。
ここまで学んできた JavaScript の基礎と DOM 操作を組み合わせて、
「ボタンクリックで文字が変わる小さなアプリ」を、自分の手で組み立てていきます。
前半のゴールはこうです。
Day15 前半でつかみたい感覚
HTML（見た目）と JavaScript（動き）を“役割分担”させて考える
「ボタンが押されたら、特定の要素の textContent を変える」流れを自分で組み立てる
ここまで来ると、もう「ただの学習」ではなく、
小さくてもちゃんとした“作品”を作るフェーズに入っています。
まずは完成イメージを言葉でつかむ
作るものの動き
画面にタイトルとボタンがある。
最初は「こんにちは」と表示されている。
ボタンをクリックすると、「こんばんは」に変わる。
もう一度押すと、また「こんにちは」に戻る。
ただの文字変更ですが、
「ユーザーの操作に反応して画面が変わる」という意味では、
立派なインタラクティブなアプリです。
どんな技術を使うか
document.getElementById
textContent
addEventListener(“click”, …)
if 文（条件分岐）
Day14 までに出てきた要素だけで作れます。
つまり、「今のあなたの手札だけでちゃんと作れる」題材です。
HTML と JavaScript の役割を分けて考える
HTML側：土台と“フック”を用意する
まずは HTML から考えます。
やりたいことは「文字を変える」と「ボタンを押す」なので、
必要なのはこの2つです。
表示用の要素（h1 や p）
ボタン（button）
そして、JavaScript から触れるように、
それぞれに id を付けます。
<h1 id="title">こんにちは</h1>
<button id="toggleButton">あいさつを変える</button>
ここで大事なのは、
「JavaScript から触りたい要素には必ず id を付ける」
という考え方です。
id は「JavaScript がつかむための“取っ手”」だと思ってください。
JavaScript側：動きを書く場所
HTML が「見た目と構造」だとしたら、
JavaScript は「動きとロジック」です。
script タグの中に、
「どの要素を触るか」と「どう動かすか」を書いていきます。
<script>
// ここに JavaScript を書く
</script>
この「HTMLで土台を作り、JavaScriptで動きを足す」という分業は、
今後ずっと続く基本パターンになります。
document.getElementById で要素をつかむ
まずは要素を“変数に入れる”
さきほどの HTML を前提にします。
<h1 id="title">こんにちは</h1>
<button id="toggleButton">あいさつを変える</button>
JavaScript では、まずこの2つの要素をつかみます。
const titleElement = document.getElementById("title");
const toggleButtonElement = document.getElementById("toggleButton");
ここでやっていることは、
document（ページ全体）に向かって
「id が title の要素をちょうだい」
「id が toggleButton の要素をちょうだい」
とお願いしているイメージです。
返ってきた要素を、
titleElement / toggleButtonElement という変数に入れています。
深掘り：なぜ毎回 getElementById しないのか
例えば、ボタンがクリックされるたびに
毎回 document.getElementById(“title”) を呼ぶこともできます。
ですが、基本的には「最初に一度だけ取得して、変数に持っておく」ほうが読みやすく、効率も良いです。
「この変数は、この要素を指している」という対応関係がはっきりすると、
コードの見通しが一気によくなります。
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>
ここでの流れはこうです。
ページ読み込み時に、title と button の要素を取得する
ボタンに「クリックされたらこの関数を実行してね」と登録する
クリックされた瞬間に、titleElement.textContent を書き換える
これだけで、「ボタンクリックで文字変更」が成立します。
深掘り：textContent を使う安心感
ここで textContent を使っているのは、
「文字列をそのままテキストとして扱ってくれる」からです。
もし、将来的にユーザー入力や外部データを表示するようになっても、
textContent を使っていれば、
その文字列が HTML やスクリプトとして解釈されることはありません。
「画面に出すときは、まず textContent を使う」
という癖を Day15 の段階でつけておくと、
セキュリティ的にもかなり強いです。
状態によって文字を切り替える準備
「今どっちの状態か」を覚えておく
前半の最後に、
「押すたびに『こんにちは』と『こんばんは』が切り替わる」
ところの“考え方”だけ触れておきます。
やりたいことはこうです。
最初は「こんにちは」
ボタンを押したら「こんばんは」にする
もう一度押したら「こんにちは」に戻す
これを実現するには、
「今がどっちの状態なのか」を覚えておく必要があります。
例えば、こんな変数を用意します。
let isMorning = true;
isMorning が true のときは「こんにちは」、
false のときは「こんばんは」と決めておきます。
あとは、ボタンが押されるたびに、
isMorning を見て、表示する文字を決める
isMorning の値を反転させる（true → false、false → true）
という処理を書けば、
「トグル（切り替え）」が実現できます。
実際のコードは後半でじっくり書きますが、
ここでは「状態を変数で持つ」という考え方だけ、
頭の片隅に置いておいてください。
ありがちなつまずきと、その乗り越え方
getElementById が null になる
HTML に id=”title” がない
スペルが微妙に違う（”titel” など）
script が要素より先に実行されている
こういうとき、
document.getElementById(“title”) は null を返します。
その状態で textContent に触ると、
エラーになります。
const titleElement = document.getElementById("title");
if (titleElement === null) {
console.error("id=\"title\" の要素が見つかりません。HTML とスペルを確認してください。");
} else {
titleElement.textContent = "変更";
}
「あるはずのものがなかったときにどうするか」を書いておくのは、
セキュリティ・安定性の両面でとても大事です。
script の位置を意識する
基本的には、
body の一番下に script を置くと安全です。
<body>
<!-- 要素たち -->
<script>
// ここなら、上の要素がすでに DOM に存在している
</script>
</body>
これだけで、
「要素がまだないのに getElementById してしまう」
という事故をかなり防げます。
Day15 前半のまとめ
Day15 前半では、
HTML と JavaScript の役割分担
id を付けて要素を“つかむ”流れ
document.getElementById で要素を取得する
textContent で文字を書き換える
ボタンのクリックイベントと組み合わせる
状態を変数で持つ、という考え方の入口
までを整理しました。
後半では、
実際に「押すたびに挨拶が切り替わる」完成版を作りながら、
状態管理・条件分岐・DOM操作を一気に結びつけていきます。