こんにちは！フロントエンド・アーキテクトの私です。
日々、私たちが何気なくブラウザにURLを打ち込んだり、お気に入りのWebサイトを開いたりするとき、画面が一瞬で華やかに表示されますよね。でも、その裏側でブラウザくんがどれほど必死に汗をかいて働いているか、想像したことはありますか？
「HTMLを書けば画面が出るんでしょ？」
ええ、その通りです。結果オーライ、最初はそれで十分！
でも、もしあなたが「なんだか最近このページ重いな…」「もっとサクサク動く美しいサイトを作りたいな」と感じ始めたなら、それはブラウザの頭の中――すなわち「DOMツリーがどうやって作られているか」を知る最高のタイミングです。
今回は、難しい専門用語のジャングルを優しく切り拓きながら、ブラウザがHTMLのただの「文字の羅列」を、生きた「ツリー構造」に変える魔法のプロセスを一緒に覗いてみましょう。大丈夫、専門知識なんてゼロからでも全然怖くありませんよ。私がしっかり手を取ってご案内しますね。
—
1. そもそも「DOMツリー」ってなに？ 身近なもので例えてみよう
いきなり「DOM（Document Object Model）」なんて言われると、頭から湯気が出そうになりますよね。でも難しく考えないでください。
DOMツリーとはズバリ、「ブラウザにとっての『家系図（組織図）』」です。
例えば、あなたが会社組織を作ると想像してください。
一番上に「社長（``）」がいて、その下に「取締役会（`
HTMLというテキストデータは、いわば「バラバラの社員名簿の紙切れ」です。ブラウザの仕事は、その紙切れを読み解いて、「誰が誰の部下で、どの部署に属しているか」をまとめた巨大な組織図（ツリー構造）を頭の中に作り上げることに他なりません。
この「組織図」の形をしているからこそ、JavaScriptくんは「おい、総務部（`#general`）の机の色をピンクに変えてくれ！」とピンポイントで指示を出せるわけなんです。これがDOMツリーの正体です。
—
2. バイトからツリーへ！ ブラウザの大冒険4ステップ
では、ブラウザが届いたHTMLファイルをどうやってDOMツリーに仕立て上げるのか、その裏側のドラマを4つのステップで見ていきましょう。
ステップ1：バイトストリームの読込（生データの到着）
サーバーから送られてくるのは、実は人間が読める文字ではなく、`0`と`1`の「バイト（Byte）」の塊です。ネットワークの海を泳いできた、ただの冷たいデジタルデータの波だと思ってください。
ステップ2：文字への変換（エンコーディング）
「よし、荷物が届いたぞ」とブラウザが受け取ったら、次はそれを私たちが読める「文字（キャラクター）」に変換します。ここで重要になるのが、よくHTMLの頭で見かける `` というおまじないです。
「この暗号（バイトデータ）は、こういうルールで日本語（UTF-8）に翻訳してね！」とブラウザに教えてあげているんですね。
ステップ3：トークン化（意味のある「言葉」への分解）
文字になったら、次はそれを「意味のあるパーツ（トークン）」に細切れにします。
例えば、以下のようなコードがあったとします。
こんにちは、世界！
ブラウザのパーサー（解析士）はこれを、
- 「あ、開始タグの `
` だ！」
- 「中身のテキストは『こんにちは、世界！』だな」
- 「終了タグの `
` だ！」
という風に、まるでレゴブロックのパーツを一つひとつ仕分けるように細かく分解していきます。これが「トークン化」です。
ステップ4：ノード化とツリーの構築（家族の絆を結ぶ）
さあ、いよいよ大詰めです。仕分けられたパーツ（トークン）を、一つひとつの「DOMノード（オブジェクト）」という実体に昇格させます。
そして、「お父さんのタグの中に、子どものタグが入っているな」という親子関係を繋ぎ合わせていき、ついにあの美しい「DOMツリー」が完成するのです！
—
3. ちょっと待って！ HTMLを書くときに知っておきたい「ブラウザの優しさ」
ここで、現場でよくある「ちょっとしたつまずきポイント」をひとつ。
人間って、うっかりミスをしますよね。例えば、タグの閉じ忘れ。
ここは段落です。
本来なら `
` で閉じるべきなのに、うっかり忘れてしまったとします。昔の頑固なプログラムなら「エラー！強制終了！」となるところですが、現代のWebブラウザはめちゃくちゃ優しい（というか気が利く）です。
ブラウザは、「おっと、この人は `
` を書き忘れているな。でも、次の要素が始まるから、きっとここで段落が終わるはずだ！代わりにこっそり閉じておいてあげよう」と、勝手にDOMツリーを補正して形にしてくれるのです。
……優しさゆえの機能ではあるのですが、これに甘えすぎると、ブラウザごとに解釈が微妙にズレて「あれ？ なんか変な崩れ方するぞ？」というバグの原因になります。
だからこそ、私たち作り手は、正しいHTML構造を意識して書く必要があるわけですね。ブラウザくんに余計な気を使わせない、それがプロの優しさです。
—
4. 実際に手を動かして、DOMの「血肉」を感じてみよう
百聞は一見にしかず。ブラウザがどうやってDOMツリーを作っているのか、そして私たちがJavaScriptでそれをどう覗き見できるのか、簡単なコードで試してみましょう。
以下のコードをコピーして、拡張子を `.html` にしてパソコンのデスクトップなどに保存し、ダブルクリックしてブラウザで開いてみてください。
こんにちは！ブラウザの裏側へようこそ
私はDOMノードの一部です。
💡 試してみるポイント
ファイルをブラウザで開いたら、キーボードの `F12` キー（Macなら `Option` + `Cmd` + `I`）を押して「開発者ツール（デベロッパーツール）」を開き、「要素（Elements）」タブや「コンソール（Console）」タブを覗いてみてください。
ブラウザがHTMLをどう解釈してDOMツリーを組み立てたのか、その構造が綺麗にツリー状に表示されているのが確認できるはずです。2秒後に文字がパッと変わる瞬間は、ちょっとした感動モノですよ！
—
さいごに
DOMツリーの構築プロセス、いかがでしたでしょうか？
「ただの文字の羅列が、ブラウザという職人によって、意味のある組織図（ツリー）に生まれ変わる」――そうイメージするだけで、普段書いている何気ないHTMLやCSSが、少し愛おしく感じられてきませんか？
フロントエンドの世界は、こうしたブラウザの地道な努力の上に成り立っています。
もし今後、レイアウトの崩れや描画のパフォーマンスに悩んだときは、ぜひこの記事の「ブラウザくんが一生懸命ツリーを組み立てている姿」を思い出してみてくださいね。
あなたのWeb制作の旅が、もっと楽しく、もっとワクワクするものでありますように。それではまた、次の現場でお会いしましょう！
コメント