Day14 前半のゴール
Day14 からいよいよ「画面（HTML）を JavaScript でいじる世界」に入ります。
ここを超えると、「ただの計算」から「動くWebページ」を作る側に回れます。
前半のゴールはこの2つです。
Day14 前半でつかみたい感覚
document.getElementById＝「HTMLの中から“1つの要素”を指さす」
textContent＝「その要素の“中の文字”を書き換える」
この2つだけで、「ページの文字を書き換える」という
“Webアプリっぽさ”の第一歩が踏めます。
DOMとは何かをざっくりつかむ
HTMLは「ただの文字列」ではなく「木構造のオブジェクト」になる
ブラウザは、HTMLファイルを読み込んだあと、
それを「DOM（Document Object Model）」という
“木構造のオブジェクト”として扱います。
<h1 id="title">こんにちは</h1>
<p id="message">メッセージです</p>
このHTMLは、JavaScriptから見ると、
document という「ページ全体」を表すオブジェクトの中に
h1 や p という要素オブジェクトがぶら下がっている
というイメージになります。
JavaScriptで画面をいじるとは、
「この DOM ツリーの中から要素を見つけて、
その中身や見た目を変える」ということです。
document.getElementById とは何か
「idで1つの要素を特定するための関数」
HTMLの要素には id 属性を付けられます。
<h1 id="title">こんにちは</h1>
この id=”title” を手がかりに、
JavaScriptからこの h1 要素を取得するのが
document.getElementById です。
const titleElement = document.getElementById("title");
これで titleElement には、
h1 要素そのもの（DOM要素オブジェクト）が入ります。
例：要素を取得してコンソールに出してみる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day14 DOM操作 前半</title>
</head>
<body>
<h1 id="title">こんにちは</h1>
<script>
const titleElement = document.getElementById("title");
console.log(titleElement);
</script>
</body>
</html>
ブラウザの開発者ツールのコンソールを見ると、
<h1 id=”title”>こんにちは</h1> の要素が表示されます。
「文字列」ではなく「要素そのもの」を取ってきている、
という感覚を持つことが大事です。
深掘り：id は「ページ内で一意」が前提
id は「そのページの中で1つだけ」にするのが基本ルールです。
同じ id を複数の要素に付けると、
document.getElementById がどれを返すか分かりにくくなり、
バグの原因になります。
「JavaScriptから触りたい要素には、意味のある id を1つだけ付ける」
という習慣をつけておくと、後々かなり楽になります。
textContent とは何か
要素の「中の文字」を表すプロパティ
DOM要素には、いろいろなプロパティがあります。
その中で、要素の「中のテキスト」を扱うのが textContent です。
<h1 id="title">こんにちは</h1>
この h1 の中身「こんにちは」は、
JavaScriptからこうして取得できます。
const titleElement = document.getElementById("title");
console.log(titleElement.textContent); // "こんにちは"
逆に、textContent に代入すると、
中の文字を書き換えられます。
titleElement.textContent = "こんばんは";
これだけで、画面上の h1 の表示が
「こんにちは」から「こんばんは」に変わります。
例：ボディ読み込み時に文字を書き換える
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day14 DOM操作 前半</title>
</head>
<body>
<h1 id="title">読み込み中...</h1>
<script>
const titleElement = document.getElementById("title");
titleElement.textContent = "ページの準備ができました";
</script>
</body>
</html>
ページを開くと、一瞬「読み込み中…」と出て、
すぐに「ページの準備ができました」に変わります。
「JavaScriptがHTMLを書き換えている」というのが
目で見て分かる、最初の体験です。
getElementById と textContent を組み合わせる流れ
1. HTML側で「触りたい要素」に id を付ける
<p id="message">ここが書き換わります</p>
2. JavaScriptでその要素を取得する
const messageElement = document.getElementById("message");
3. textContent で中身を書き換える
messageElement.textContent = "JavaScriptから書き換えました！";
この3ステップが、
DOM操作の超基本パターンです。
「id で要素を特定する」
「textContent で文字を変える」
この2つをセットで体に染み込ませておくと、
この先の DOM 操作（クラス変更、スタイル変更、イベント処理など）が
すべて理解しやすくなります。
よくあるつまずきポイント：null になる問題
getElementById が null を返すケース
次のようなコードを書いたときに、
エラーになることがあります。
<body>
<script>
const titleElement = document.getElementById("title");
titleElement.textContent = "変更";
</script>
<h1 id="title">元のタイトル</h1>
</body>
この場合、script が h1 より先に実行されるため、
その時点ではまだ h1 が DOM に存在していません。
document.getElementById(“title”) は null を返し、
null.textContent を触ろうとしてエラーになります。
解決策1：script を body の最後に置く
一番シンプルな解決策は、
script タグを body の一番下に置くことです。
<body>
<h1 id="title">元のタイトル</h1>
<script>
const titleElement = document.getElementById("title");
titleElement.textContent = "変更";
</script>
</body>
こうすると、
h1 が DOM に追加されたあとで script が実行されるので、
getElementById は正しく要素を返します。
解決策2：null チェックを入れる
より安全に書くなら、
要素が見つからなかった場合のチェックも入れます。
const titleElement = document.getElementById("title");
if (titleElement !== null) {
titleElement.textContent = "変更";
} else {
console.error("id=\"title\" の要素が見つかりませんでした");
}
セキュリティ・安定性の観点からも、
「あるはずのものがなかったときにどうするか」を
ちゃんと書いておくのはとても大事です。
textContent と innerHTML の違い（安全性の話の入口）
textContent は「文字として扱う」ので安全側
textContent は、その名の通り「テキスト」として扱います。
const message = "<strong>危険な文字列</strong>";
element.textContent = message;
この場合、画面には<strong>危険な文字列</strong>
という文字がそのまま表示されます。
タグとして解釈されず、
ただの文字列として扱われるので、
基本的に安全側の動きです。
innerHTML は「HTMLとして解釈される」ので注意が必要
対して innerHTML は、
文字列を「HTMLとして解釈」します。
element.innerHTML = "<strong>太字</strong>";
これは実際に太字になります。
便利ですが、
外部から来た文字列をそのまま innerHTML に入れると、
悪意あるスクリプトを実行される危険があります（XSS攻撃）。
Day14 前半では textContent を使うことに集中し、
「基本的には textContent を使う。
innerHTML は“本当に必要なときだけ慎重に”」
という感覚だけ持っておいてください。
Day14 前半のミニサンプル
ページ読み込み時にメッセージを書き換える例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day14 DOM操作 前半</title>
</head>
<body>
<h1 id="title">初期タイトル</h1>
<p id="message">初期メッセージ</p>
<script>
const titleElement = document.getElementById("title");
const messageElement = document.getElementById("message");
titleElement.textContent = "JavaScriptから変更されたタイトル";
messageElement.textContent = "このメッセージも JavaScript で書き換えました。";
</script>
</body>
</html>
このコードを実行すると、
HTMLに書いておいた文字が、
すべて JavaScript によって上書きされます。
「HTMLは“初期状態”、
JavaScriptで“動的な状態”を作る」
という役割分担が、少し見えてくるはずです。
Day14 前半のまとめ
document.getElementById は「id で要素を1つ特定する」ための入り口。
textContent は「その要素の中の文字を読む・書く」ための基本プロパティ。
前半では、
DOMは「HTMLがオブジェクトになったもの」というイメージ
id を付けて要素を特定する流れ
getElementById → textContent で文字を書き換える基本パターン
null になるつまずきポイントと対策
textContent が安全側である、というセキュリティの入口
までを押さえました。
後半では、
ボタンを押したときに textContent を変える
入力フォームの値を使ってメッセージを書き換える
もう少し踏み込んだ DOM 操作とイベント処理の入り口
に進んでいきます。
