こんにちは！フロントエンド・アーキテクチャの世界へようこそ。
日々私たちが何気なく書いているHTMLコードですが、「ブラウザって、これのどこを見て画面を描いているんだろう？」って、ふと思ったことはありませんか？
「文字の羅列が、どうやってあのリッチなWeb画面になるの？」
今回は、そんなブラウザの裏側の秘密、その中でも「HTMLパーサーのトークン化プロセス（字句解析）」という、ちょっとカッコいいけれどすごく面白い仕組みについて、まるで長年の相棒に話すように、たっぷり優しく紐解いていきたいと思います。
難しい専門用語に身構えなくても大丈夫です。一緒に一歩ずつ、ブラウザの頭の中をのぞいてみましょう！
—
1. 文字の羅列が「意味のあるパーツ」に変わる瞬間
私たちが書いたHTMLファイル（`index.html`など）は、ブラウザから見ると、最初はただの「意味がよく分かっていない、ダダダーッと長い文字の塊（ストリーム）」に過ぎません。
これを例えるなら、スーパーのレジに届いた、品名もバーコードもついていない「ただの長いレシートの紙」みたいなものです。「りんご」「牛乳」「パン」と文字だけが並んでいても、レジのシステムはどれが商品名で、どれが値段なのか、最初の一文字だけでは判断できませんよね。
そこで登場するのが、今回の主役である「トークン化（字句解析）」です。
ブラウザは、届いた文字のストリームを左から右へ、1文字ずつ（時には数文字ずつ）ルーペで覗き込むようにじっくり観察しながら、意味のある最小単位のパーツ——これを「トークン（Token）」と呼びます——に切り分けていきます。
トークンってなぁに？
お買い物の例えで言うと、バラバラの文字を「これは商品名」「これは個数」「これはバーコード」と、意味ごとに切り分けて付箋を貼っていく作業です。HTMLの世界では、主に次のようなパーツ（トークン）に分解されます。
1. 開始タグ（Start tag）: `
` などの「ここから始まるよ！」の合図
2. 終了タグ（End tag）: `
` や `
` などの「ここまでだよ！」の合図
3. 属性（Attribute）: `class=”btn”` や `src=”image.png”` などのパーツの細かい飾りや設定
4. 文字データ（Character data）: タグに挟まれた「こんにちは！」などの実際のテキスト
—
2. ブラウザの中の「職人」：ステートマシン（状態機械）の働き
では、ブラウザはこの文字の塊をどうやって正確にトークンに分けているのでしょうか？
ここでブラウザの中には、「状態（ステート）がパチパチと切り替わる職人さん」（コンピュータの世界では「ステートマシン」や「有限オートマトン」と呼びます）が住んでいます。この職人さんは、今自分がどんなモードにいるかによって、文字の受け止め方をガラリと変えます。
ちょっと実際のコードを覗きながら、この職人さんの気分になってみましょう。
ブラウザの職人さんは、このコードを左から読み進めるとき、次のような「モード（状態）」を行ったり来たりしています。
- データ（Data）モード: 普通にテキストを読んでいるモード。「こんにちは、世界！」をそのまま文字データトークンとして受け取ります。
- タグ名開始（Tag name open）モード: `<` を見つけた瞬間に発動！「おっ、ここからタグが始まるぞ！」と身構えるモードです。
- タグ名（Tag name）モード: 次に現れた文字を読んで、「お、`div` だな」と認識するモード。
- 属性名（Attribute name）モード: スペースの後に現れた文字を見て、「`class` という名前の属性だな」とメモするモード。
このように、職人さんは1文字進むごとに「今はタグの中？それとも普通のテキスト？」と器用にモードを切り替えながら、文字を一つ残らずパズルのピース（トークン）に変換していくのです。
—
3. 「あれ、タグが閉じてない！」——ブラウザの優しいエラー回復力
初心者の方で、HTMLを書いていてこんなミスをしたことはありませんか？
この文章は、コンテナの中にいるはず…？
次の要素
人間なら「おいおい、タグの閉じ忘れがあるぞ！」と赤ペンで直したくなるところですが、もしこれが原因でWebページ全体が「エラー：表示できません」と真っ白になってしまったら……インターネットは怖くて使えたもんじゃありませんよね。
ここで感動的なのが、HTMLパーサーの「超・寛大なエラー回復アルゴリズム（Error Recovery）」です。
ブラウザのパーサーは、書き手がうっかりタグを閉じ忘れたり、おかしな書き方をしたりしても、絶対に投げ出したりしません。
「あ、ここ閉じタグ忘れてるな？ じゃあ、きっとこの辺りで閉じたことにしちゃおう！」あるいは「このタグはこういう構造のつもりで作ったんだな」と、文脈から空気を読んで、勝手に正しく補正して読み進めてくれるのです。
なぜそんなことができるの？
HTMLの仕様（WHATWGの仕様書など）には、「こういう変な書き方をされたときは、こう解釈して救いなさい」というルールが、実は何百・何千というパターンの「優しさの救済措置」として細かく定義されています。
「つまずきやすいポイント」として、よく初心者の方は「HTMLはエラーが出ないから適当に書いてもいいや」と思いがちですが、裏ではブラウザのパーサーが必死にあなたのミスをカバーしてくれているんだなぁ、と想像してあげると、ちょっと愛おしくなりませんか？
（もちろん、ブラウザに余計な気を使わせないように、正しいマークアップを書くのがプロの優しさですよ！）
—
4. 実務で活きる！「トークン化」を知っているとなぜ得をするのか？
「仕組みはわかったけど、これって実際のWeb制作やフロントエンド開発で役に立つの？」
そう思ったあなた。大ありです！
例えば、JavaScriptで動的にDOMを操作したり、モダンなフレームワーク（ReactやVueなど）で仮想DOMのパフォーマンスチューニングをしたりするとき、「ブラウザがどうやってコードを解釈しているか」の解像度が高いと、バグに遭遇したときの勘が圧倒的に鋭くなります。
- 「なんだか意図したレイアウトにならない……」
→ 「もしかして、私の不格好なHTMLの書きせいで、ブラウザのパーサーが変な解釈（エラー回復）をしちゃって、DOMツリーが歪んでるのかも？」と疑うことができます。
- ページの表示速度（レンダリングの最適化）
→ ブラウザは、文字ストリームからトークンを作り、それを並べてDOMツリーを構築していく……このパイプラインがスムーズに進むよう、大きすぎるHTMLファイルを分割したり、不要なネスト（入れ子）を減らしたりする重要性が、腹落ちして理解できるようになります。
—
まとめ：ブラウザは、あなたのコードを読み解く「名翻訳家」
今回は、HTMLパーサーのトークン化プロセスについて、文字のストリームから意味のあるパーツへと変換されるドラマを覗いてみました。
- 文字のストリームが、ステートマシン（職人）によってトークンに細かく分解される。
- ちょっとした書き間違いがあっても、ブラウザのエラー回復アルゴリズムが優しくフォローしてくれる。
ブラウザは単なる冷たい機械ではなく、私たちが書いたちょっと不器用なコードを、一生懸命「画面というカタチ」に翻訳してくれている優秀なパートナーです。
次にエディタを開いてHTMLを書くときは、画面の向こう側で一生懸命トークンをパチパチと組み立てているブラウザの職人さんを、ちょっとだけ思い出してあげてくださいね。
あなたのWeb開発の旅が、もっと楽しく、もっとワクワクするものになりますように。
それではまた、次のアーキテクチャの世界でお会いしましょう！
コメント