こんにちは！Webブラウザの仕組みの旅へようこそ。
フロントエンドの現場で日々コードを書いていると、「画面がどうやって表示されているのか」なんて普段は忘れがちですよね。でも、ブラウザの裏側で何が起きているのかを知ることは、料理人が包丁の構造や火の通り方を知るようなもの。知れば知るほど、書くコードが愛おしくなってきます。

今回は、ブラウザレンダリングの心臓部である「DOMツリー構築アルゴリズム」について、難しい専門用語のジャングルを切り払い、身近な例えを交えながら優しく紐解いていきましょう。

つまずきやすいポイントも「大丈夫ですよ」と手を引くように解説しますので、コーヒーでも飲みながらリラックスして読んでくださいね。

—

1. そもそも「DOMツリー構築」って何をしているの？

私たちがエディタで書いたHTMLファイル。これはブラウザから見ると、ただの「文字列の塊（ただのテキストファイル）」にすぎません。

人間であれば「あ、ここに `

` があって、その中にタイトルの文字があるな」となんとなく目で追えますが、冷徹なコンピュータは「``があって、その中に…」と構造を理解できません。

そこでブラウザは、HTMLの文字列をパース（解析）し、「親子関係を持ったツリー状のデータ構造（DOM：Document Object Model）」へと組み立て直します。これが「DOMツリー構築」です。

身近な例え：おもちゃの「ブロック人形の家族」

これを分かりやすく例えるなら、「LEGOブロックの組み立て」や「家系図づくり」に似ています。

1. トークン化（部品の仕分け）：
まず、HTMLの文字列を「`

` という開始タグだよ」「`こんにちは` というテキストだよ」「`

` という終了タグだよ」という細かい部品（トークン）に分解します。これは、箱からバラバラのブロックをザラザラッと机に出して、種類ごとに仕分ける作業です。

2. ツリー構築（家族の組み立て）：
仕分けた部品を、「誰が親で、誰が子どもか」という関係性に従って組み立てていきます。

• 「お父さん（``）」の中に、「子ども（`
  `）」がいて、さらにその「子ども（`

  `）」がいる。

• そしてその `

  ` の中には、「テキスト（`こんにちは`）」というペットが飼われている……みたいなイメージです。

この親子関係のつながりが、まるで木の枝（ツリー）のように広がっていくので「DOMツリー」と呼ばれています。

—

2. アルゴリズムの裏側：スタックを使った「親子の迷子防止」

さて、ここから少しだけブラウザの裏側の賢い仕組みを覗いてみましょう。
HTMLを書いているとき、私たちはタグをこんな風にネスト（入れ子）させますよね。

ブラウザはこれを上から順番に読んでいくのですが、「今どの親の部屋にいるんだっけ？」と迷子になりそうじゃないですか？
そこでブラウザは、「スタック（Stack）」という、お皿の山のような仕組みを使っています。

スタック（お皿の山）のイメージ

• 開始タグ（例: `
  `）に出会うと、ブラウザはお皿を1枚積み上げて、「今はこの部屋にいます！」と記録します。
• 中にあるテキストやタグをその部屋の子どもとして登録していきます。
• 終了タグ（例: `