【入門編】 HTMLパースの仕組みとトークン化 – Webブラウザの仕組み実践ガイド

こんにちは。Webブラウザという、毎日何気なく使っている「魔法の箱」の裏側を覗いてみようという好奇心、素晴らしいですね！

普段、私たちが何気なくブラウザにURLを入力してEnterキーを押すとき、裏側では壮大な「翻訳作業」が行われています。今日は、その中でも特にドラマチックな「HTMLパース（解析）」の物語を、専門用語の霧を晴らしながらお話ししましょう。

—

まず、皆さんが書いたHTMLファイルを想像してみてください。あれはブラウザにとって、「言葉だけで書かれた、家具の組み立て説明書」のようなものです。

でも、説明書を読んだだけでは家具は完成しませんよね？ブラウザという名の凄腕職人が、その説明書を読み解き、実際に木材（タグやテキスト）を加工して、Webページという家具を組み上げていく必要があります。この「説明書を読み解く工程」こそが、今回お話しするHTMLパースです。

—

ブラウザがHTMLを読み込むとき、いきなり「DOMツリー」という完成形を作るわけではありません。まずは、HTMLという長い文章を、意味のある最小単位に切り分ける作業を行います。これを「トークン化（Tokenization）」と呼びます。

お買い物に例えてみましょう。
スーパーで「りんご、牛乳、たまご」というメモを渡されたとき、私たちはメモを文字の羅列として見るのではなく、「りんご（品名）」「牛乳（品名）」と、一つひとつカゴに入れる準備をしますよね。

ブラウザも同じです。`

`という文字列を見つけると、「おっ、これは『開始タグ』という部品だな！」と識別し、その中身を一つひとつ切り出していきます。

` を発見！

この切り出された一つひとつの塊を「トークン」と呼びます。これが、ブラウザが理解できる最初の「共通言語」なんです。

—

トークンが並んだだけでは、まだただのバラバラなパーツです。次にブラウザは、これらのパーツを正しい親子関係（階層構造）で組み立てていきます。これがDOM（Document Object Model）ツリーの構築です。

例えば、こんなHTMLがあったとします。

こんにちは、ブラウザの世界へ！

ブラウザの脳内では、以下のような「家系図」のようなデータが作られます。

1. document（一番上の親）
2. └── div（親）
└── p（子）
└── 「こんにちは、ブラウザの世界へ！」（テキスト）

この「親子関係」を明確にすることで、JavaScriptから「このdivの中のpを赤くして！」といった指示が出せるようになるんです。このツリー構造があるからこそ、私たちはWebページを自由自在に操れるのですね。

—

ここで一つ、皆さんに安心してもらいたいことがあります。
HTMLを書いていて「タグを閉じ忘れた！」とか「変な場所に書いてしまった！」という経験、ありますよね？

実は、ブラウザのパーサーはめちゃくちゃ優秀で、「少しくらい設計図が間違っていても、なんとか形にしてやるぜ！」という超ポジティブな性格をしています。

` を書き忘れても、ブラウザが気を利かせて「あ、ここで終わりだな」と補完してくれます。

だから、最初は完璧に書けなくても大丈夫。ブラウザはあなたの意図を汲み取ろうと必死に頑張ってくれる「頼もしい相棒」なんです。

コメント