Webブラウザの仕組みこんにちは。Webの世界へようこそ。
ブラウザの裏側を覗こうとするなんて、素晴らしい好奇心ですね！
私たちが普段何気なく書いているHTML。「適当に書いてもブラウザが綺麗に表示してくれるから大丈夫でしょ？」と思っていませんか？実はその裏側で、ブラウザたちは「迷子の子猫を保護するような、ものすごく泥臭い調整」を日々繰り返しているんです。
今日は、そんなブラウザたちの「性格の違い」について、少しだけ深く、でも優しくお話ししましょう。
—
まず最初に知っておいてほしいこと。Webブラウザは、私たちが書いたHTMLを読み込むとき、まるで「ボロボロに破れた地図を渡された探検家」のような状態で仕事を始めます。
`など）が抜けている。
普通のプログラム言語なら、ここで「構文エラー！」と叫んで止まってしまいますよね。でも、ブラウザは違います。「あ、ここはきっとこう書きたかったんだろうな」と、文脈を読み取って勝手に補完してくれるんです。
この「勝手に補完する」という能力のルールが、エンジン（Blink, WebKit, Gecko）によって微妙に異なる。これが今回のお話の主役です。
—
現在、世界で主流のブラウザエンジンは主に3つです。
1. Blink (Chrome, Edgeなど): 今最も勢いのある「実用主義」。Webの標準化をリードしつつ、過去の遺産も全力で拾い上げる。
2. WebKit (Safariなど): 「美学と省電力」。Appleの哲学が詰まっていて、厳格な部分と柔軟な部分が混在している。
3. Gecko (Firefox): 「職人気質」。仕様に対する忠実度が高く、エラーに対しては少しだけ厳しく向き合う。
あなたがレストランで「ハンバーグと、えーっと、あとライス…あ、やっぱりパンも！」と支離滅裂な注文をしたとします。
この「どう解釈するか」の差が、実は皆さんが開発中に遭遇する「なぜかSafariだけ崩れる」「Chromeだと動くのに」といった現象の正体なんです。
—
例えば、こんな「めちゃくちゃなHTML」を書いてみてください。
こんにちは！
| エラーが起きそうな場所 |
このコードをブラウザで開いて、開発者ツール（F12）の「要素（Elements）」タブを見てみてください。
不思議なことに、ブラウザが勝手に `
` を挿入したり、要素の位置を修正したりしているはずです。これは、ブラウザが「あなたが作りたかったであろう正しい形」に、裏でこっそりと書き換えた証拠です。—
ブラウザには「クォークスモード（Quirks Mode）」という、古き良き（悪しき？）時代のWebサイトを表示するための「甘やかしモード」が存在します。
もしHTMLの最初に `` というおまじないを書き忘れると、ブラウザは「ああ、これは1990年代の古いWebサイトなんだな」と勘違いして、わざと昔の不完全な仕様に合わせて表示を崩しに行きます。
「最近のブラウザなのに、なぜか余白が変だ！」と悩んだら、まず確認するのはこの「おまじない」です。ここを直すだけで、ブラウザが「あ、現代のサイトですね！全力で正しく表示します！」とモードを切り替えてくれるんですよ。
—
ここまで読んで「ブラウザごとに仕様が違うなんて、面倒くさい！」と思いましたか？
でも、考えてみてください。私たちがどんなに下手なコードを書いても、ブラウザは一度も「エラーです、動きません」と投げ出さず、なんとかして画面を映し出そうと頑張ってくれる。この「寛容さ」こそが、Webというインターネットの世界がこれほどまでに広まった理由なんです。
初学者のうちは、ブラウザの違いに悩まされることもあるでしょう。でも、それはあなたが「ブラウザという巨大な機械の内部」に足を踏み入れた証拠です。
もし表示が崩れたら、「ああ、このブラウザは今、私のコードを一生懸命解釈しようとしてくれているんだな」と、少しだけ優しく見守ってあげてください。そして、少しずつ正しいHTMLの書き方を覚えていけば、どのブラウザも味方になってくれます。
大丈夫、焦らなくていいんです。Web開発の旅は、まだ始まったばかりですから。
コメント