前回の続き——文字のHTMLと、動く画面のあいだ
前回のG-01では、HTMLが見た目ではなく内容の意味と階層を伝える記述言語だと学びました。ただ、そのHTMLは保存された文字のファイルにすぎません。ブラウザがそれを読み込んだあと、実際に画面を表示し、動かしているのは別のものです。それがこの講義で扱うDOMです。HTMLとDOMを分けて考えられると、「画面が変わる」という現象の正体が見えてきます。
このスライドのポイント
- G-01: HTMLは見た目ではなく内容の意味と階層を伝える記述言語
- そのHTMLは保存された文字のファイルにすぎない
- 読み込んだ後、画面を表示し動かしているのは別のもの＝DOM
- HTMLとDOMを分けて考えるのがこの講義の目標
定義——DOMはノードの木構造の実体
DOMとは、ブラウザがHTMLを解析して作り出す、ノードの木構造のオブジェクトです。ノードとは、要素の1つ1つを指します。D-09で見たとおり、ブラウザはHTMLを読み込むと解析し、その結果としてこのDOMをメモリ上に組み立てます。F-01で扱ったブラウザ側のJavaScriptは、このDOMを操作して画面を書き換えます。ここで大切なのは、HTMLファイルそのものは変わらず、書き換わるのはメモリ上のDOMだという点です。HTMLは設計図、DOMはその設計図から組み立てられた実体、と覚えてください。
このスライドのポイント
- DOM＝ブラウザがHTMLを解析して作る、ノードの木構造のオブジェクト（E-09）
- ノード＝要素の1つ1つ
- ブラウザ側のJavaScript（F-01）がこのDOMを操作して画面を書き換える
- HTMLファイル自体は変わらず、書き換わるのはメモリ上のDOM
なぜ必要か——「HTMLと画面が違う」の正体
この区別を知らないと、「ボタンを押すと文字が変わる」といった動きの仕組みを説明できません。また、開発ツールで見えているHTMLと、最初に書いたHTMLファイルが違って見えることがあり、混乱の元になります。これはDOMが書き換わった後の状態を見ているためです。設計図と実体を分けて考えられれば、この食い違いは当たり前のこととして理解できます。
このスライドのポイント
- 区別を知らないと「押すと文字が変わる」動きの仕組みを説明できない
- 開発ツールで見えるHTMLと、最初に書いたHTMLファイルが違って見えることがある
- それはDOMが書き換わった後の状態を見ているため
- 設計図と実体を分ければ、この食い違いは当たり前と分かる
構造——変わらないHTML、変わるDOM
構造を図で整理します。左側にHTMLファイルがあります。これはB-03で扱ったストレージ上に置かれた文字で、書き換わりません。中央でブラウザがそれを解析します。D-09で見た解析の工程です。右側にできあがるのがDOMツリーで、こちらはメモリ上にあり、書き換わります。同じ内容から出発しても、HTMLは動かず、DOMだけが変化していく、という左右の対比を押さえてください。
このスライドのポイント
- 左: HTMLファイル（文字・ストレージ上＝B-03）。書き換わらない
- 中央: ブラウザが解析（D-09の④）
- 右: DOMツリー（メモリ上）。書き換わる
- 同じ内容から出発し、HTMLは動かずDOMだけが変化する
処理の流れ——「未読3件→0件」で起きていること
具体例で見ます。通知の表示が「未読3件」から「未読0件」へ変わる場面を考えます。このとき、元のHTMLファイルは1文字も書き換わっていません。書き換わっているのは、メモリ上のDOMの中の、その部分にあたるノードの中身です。JavaScriptがそのノードを見つけ、「3件」という中身を「0件」に置き換えています。画面の変化は、つねにDOMの変化として起きている、というのがこの型の要点です。
このスライドのポイント
- 通知の「未読3件」が「未読0件」に変わる場面
- 元のHTMLファイルは1文字も書き換わらない
- 書き換わるのはメモリ上のDOMの、その部分のノードの中身
- JavaScriptがノードを見つけ、中身を置き換えている
技術サンプル——HTMLとDOMの関係図
サンプルは構成の図です。目的は、HTMLファイルとDOMツリーの関係、そしてどこが書き換わるのかを一目で捉えることです。図を読むと、上のHTMLファイルは設計図であって変わらず、ブラウザの解析を経て下のDOMツリーができます。そして書き換えを行うのはJavaScriptで、対象はDOM側のノードです。読み方の要点は2つ、画面の変化はDOMの変化であること、そして元のHTMLは変わらないことです。AIには「この画面のこの部分は、どのタイミングで誰（どのコード）が書き換えていますか」と聞けます。
このスライドのポイント
- 種別: diagram
- 目的: HTMLファイルとDOMツリーの関係、どこが書き換わるかを一目で捉える
- サンプル本体:
混同しやすい概念——HTML と DOM
混同しやすいのは、HTMLとDOMの区別です。HTMLは最初に書いた元の記述で、DOMはブラウザの中にある「今」の状態です。開発ツールを開いたときに見えるのは、多くの場合DOM側、つまり書き換わった後の今の姿です。元のHTMLを見ているつもりで今のDOMを見ている、という取り違えに注意してください。
このスライドのポイント
- HTML＝最初に書いた元の記述
- DOM＝ブラウザの中にある「今」の状態
- 開発ツールで見えるのは、多くの場合DOM側（書き換わった後）
- 元のHTMLを見ているつもりで今のDOMを見ている取り違えに注意
バイブコーディングでの確認点——更新されない不具合
バイブコーディングでの確認点です。「表示が更新されない」という不具合では、DOMを書き換える処理がどこにあるのかをAIに示させます。よくある原因は、書き換え処理そのものの忘れか、書き換える対象のノードの取り違えです。AIには「この表示を書き換えているコードはどこですか。対象のノードは合っていますか」と具体的に尋ねると、原因の切り分けが進みます。
このスライドのポイント
- 「表示が更新されない」ではDOMを書き換える処理がどこにあるかをAIに示させる
- よくある原因は、書き換え処理の忘れか、対象ノードの取り違え
- 差分確認（A-04）と同じく、どこが書き換わるはずかを人間が持つ
まとめと一問一答
最後に一問一答です。JavaScriptが書き換えるのは、HTMLファイルとDOMのどちらでしょうか。……答えは、DOM、つまりメモリ上の木構造です。HTMLファイルは変わりません。30秒でまとめます。HTMLは設計図、DOMはブラウザ内に組み立てられた実体で、画面の書き換えはDOM操作として起きます。次回のG-03では、要素を見た目ではなく意味で選ぶセマンティックHTMLへ進みます。関連資料は「AI開発ワード100」「UI改善プロンプト50」です。
このスライドのポイント
- 一問一答: 「JavaScriptが書き換えるのはHTMLファイルとDOMのどちら？」
- 30秒まとめ: HTMLは設計図、DOMは実体。画面の書き換え＝DOM操作
- 次回G-03: 要素を「意味」で選ぶセマンティックHTMLへ
- 関連資料: AI開発ワード100、UI改善プロンプト50
