こんにちは！フロントエンドの世界へようこそ。チーフアーキテクトの私です。
日頃何気なく書いているHTML。「`
「ただの文字の羅列（テキストファイル）であるHTMLを、ブラウザはどうやってあのリッチなWeb画面に変換しているのでしょうか？」
実は、あなたの書いたソースコードは、ブラウザに届いた瞬間から大冒険を始めています。今回はその冒険の第一歩、HTMLが画面を形作るための「最初の関所」であるトークン化プロセスについて、一緒に覗いていきましょう！
難しい専門用語はなるべく抜きにして、身近な例え話でほどきながら解説していきますので、どうぞリラックスしてコーヒーでも飲みながら読んでくださいね。
—
1. 文字の羅列が「意味のあるパーツ」に変わる瞬間
想像してみてください。あなたが大きなおもちゃ箱を買いました。中には、赤いブロック、青い三角屋根、丸い車輪、そして「おうち」や「くるま」という説明書がバラバラと詰め込まれています。
ブラウザが受け取るHTMLのソースコードも、これとまったく同じ状態です。ネットワークの向こうから送られてくるのは、ただの「文字のバイト列（数字の羅列）」。このままでは、ブラウザもどこがタグでどこが文章なのか分かりません。
ここで登場するのが、今回の主役である「トークナイザー（Tokenizer）」という名の凄腕の仕分け人です。
トークナイザーとは？
トークナイザーは、HTMLの文字列を左から右へ、1文字ずつ（時には数文字先をチラ見しながら）丁寧になぞっていきます。そして、文字列を意味のある最小単位である「トークン（Token）」へとバラバラに分解していくんです。
この「トークン」というのは、いわば「意味がきちんと通じる最小のパーツ（部品）」のこと。日本語の文章を「名詞」や「動詞」に分解する「形態素解析」にちょっと似ているかもしれませんね。
—
2. お買い物のレシートに例えてみよう
もう少し身近な例えで考えてみましょう。スーパーでお買い物をしたときにもらう「レシート」を思い出してください。
レシートには、こんな風に文字が並んでいますよね。
りんご 150円
みかん 100円
小計 250円
レジのシステムは、このただの文字の並びを、次のように一つひとつの「意味の塊（トークン）」として認識しています。
- 商品名：「りんご」
- 値段：「150円」
- 商品名：「みかん」
- 値段：「100円」
HTMLのトークン化もこれと全く同じです。
例えば、次のような簡単なHTMLがあったとします。
こんにちは！
ブラウザのトークナイザーは、これを次のような「お買い物カゴに入ったパーツ」に仕分けていきます。
1. 開始タグのトークン: タグ名 `p`、属性 `class=”greeting”`
2. 文字（テキスト）のトークン: 中身の文字列 `こんにちは！`
3. 終了タグのトークン: タグ名 `p`
どうでしょう？ バラバラの文字だったものが、「あ、これは段落のはじまりの合図だな」「これは画面に表示するテキストだな」と、だんだん意味を持ち始めてきたのが見えてきませんか？
—
3. トークン化の裏側で起きている「ステート・マシーン」の秘密
さて、ここから少しだけ裏側の話をしますね。「ブラウザってどうやってタグとテキストを区別しているんだろう？」と疑問に思ったことはありませんか？
実は、ブラウザの中では「ステート・マシーン（状態機械）」という、ちょっと賢い仕組みが働いています。これは簡単に言うと、「今、自分はどんなモードにいるか」を常に切り替えながら文字を見ているシステムです。
主なモード（状態）をいくつか覗いてみましょう。
- データ・ステート（ふつうのモード）: タグの外側にいる状態です。文字を見つけたら「テキストノードのトークンだ！」と判断します。
- タグ名・ステート（タグの中のモード）: `<` の記号を見つけた瞬間にこのモードに入ります。次に続く文字を「タグの名前」として集めます。
- 属性名・ステート（属性を見ているモード）: タグの中でスペースを見つけると、次は「`class` や `id` などの属性名があるぞ」とモードを切り替えて文字を拾います。
このように、ブラウザはカメレオンのようにモードをパタパタと切り替えながら、1文字たりとも見逃さずにパース（解析）を進めているのです。
—
4. 【実録】ブラウザが裏でやっていることをコードで感じてみる
「ブラウザがどうやってこれを扱っているのか、イメージがつかないな…」という方へ。
私たちが普段書いているHTMLが、最終的にどんな形（DOMツリー）の土台になるのか、JavaScriptの挙動を通じてちょっとだけ追体験してみましょう。
以下のコードは、ブラウザがHTMLを読み込んだ後に、DOM（ドキュメントオブジェクトモデル）の構造をコンソールに表示する簡単なサンプルです。エディタに貼り付けて、ブラウザのコンソール（F12キーなどを押すと出てきます）で確認してみてください。
こんにちは、ブラウザの世界へ！
トークナイザーがあなたを待っています。
このコードを動かすと、ブラウザがいかに緻密に、私たちが書いたコードを「意味のあるツリー構造」へと昇華させているかが実感できるはずです。
—
5. つまずきやすいポイントと「大丈夫ですよ」というメッセージ
Webの学習を始めたばかりの頃、「HTMLのタグを閉じ忘れたらどうしよう」「クォーテーション（`””`）を書き忘れたらエラーで画面が真っ白になっちゃうのでは…」と、不安になること、ありますよね。
安心してください、大丈夫ですよ。
実は、Webブラウザのトークナイザーと、その後に続くパーサー（Parser）は、世界一の「おせっかいで優しいお母さん」のような存在です。
もしあなたがタグの閉じ忘れや、おかしな書き方をしても、ブラウザは「あらあら、うっかり屋さんね」と勝手に補正（エラーリカバリ）して、なんとか画面を表示しようと頑張ってくれます。
もちろん、だからといって適当に書いていいわけではありません。あまりにめちゃくちゃなコードを書くと、ブラウザが「あれ、どっちの意味で解釈すればいいんだろ…？」と迷ってしまい、意図しないレイアウト崩れ（パフォーマンスの低下）を引き起こす原因になります。でも、ちょっとしたミスでパニックになる必要は全くありません。ブラウザはあなたが思っている以上に、あなたのコードを温かく受け止めようとしてくれていますからね。
—
まとめ
今回は、HTMLパースの第一歩である「トークン化プロセス」についてお話ししました。
- HTMLのソースコードは、最初はただの文字のバイト列。
- それをトークナイザーが1文字ずつ読み解き、意味のあるパーツ（トークン）に分解する。
- 裏側ではステート・マシーンがモードを切り替えながら大活躍している。
- ブラウザは多少のミスなら優しく補正してくれる心強い味方である。
私たちが何気なくブラウザに打ち込んでいるコードの裏側では、こんなにもドラマチックな「仕分け作業」が行われているんです。そう思うと、明日からのコーディングがほんの少しだけ、違った景色に見えてきませんか？
それではまた、次のブラウザの深淵でお会いしましょう。ハッピー・コーディング！
コメント