【初心者向け】ブラウザって何してるの？Webページが表示されるまでの流れをやさしく解説
🔰 はじめに
現代社会で「1日も使わないことがない」と言っても過言ではない存在、なんだと思いますか？
そう、ウェブブラウザです。(異論は認めます)
気になったことをすぐ「〇〇とは」って調べたり、SNSを見たり、YouTubeを開いたり。
毎日自然と使っているけれど、「ブラウザって、どうやってページを表示してるの？」って考えたことありますか？
この記事では、そんな当たり前だけど意外と知らないブラウザの仕組みについて、初心者向けにざっくり説明してみようと思います。
🌐 ブラウザってそもそも何？
ブラウザ（正式には Web Browser）は、インターネット上の情報を画面に表示するソフトウェアのこと。
たとえば Google Chrome、Safari、Edge、Firefox などが有名ですね。
URLを入力すると、そのサイトにアクセスして、HTML・CSS・JavaScriptなどのコードを読み取って、私たちが見ているようなページを作ってくれます。
🔍 URLを入力してからページが表示されるまで
なんとなく「URLを入力したらページが出てくる」というのは知っていると思いますが、実際にはブラウザがいろんな仕事をしています。
ここでは、その裏側をステップごとにざっくり見ていきます。
1. URLを読み解く
まず、ブラウザはURLをパーツに分解します。
URLは簡単に言うと「インターネット上の住所」みたいなもの。
たとえばこんなURLがあったとします：
https://www.example.com/example/index.html
| 部分 | 意味 |
|---|---|
| https: | 通信ルール（プロトコル） |
| www.example.com | サーバーの名前（ドメイン名） |
| example/index.html | サーバー内の場所（ディレクトリとファイル名） |
2. DNSで住所から地図を探す
人間にはwww.example.comみたいな文字のほうがわかりやすいけど、コンピュータは「IPアドレス（例：93.184.216.34）」という数字のほうが得意です。
そこでブラウザはDNSサーバーという「インターネットの電話帳」みたいなものを使って、ドメイン名からIPアドレスを調べます。
3. サーバーに「これちょうだい！」とリクエストを送る
IPアドレスがわかったら、ブラウザはサーバーにこのページの情報くださいとリクエストを送ります。
リクエストの例：
GET /example/index.html HTTP/2
Host: www.example.com
4. サーバーからレスポンスが返ってくる
サーバーがリクエストを受け取ると、ページの情報（HTMLなど）をレスポンスとして返します。
成功すれば「200 OK」、見つからなければ「404 Not Found」なんて返ってきます。
これは見覚えある人も多いはず。
5. HTMLを読み込んで構造（DOMツリー）を作る
ブラウザはまずHTMLを読み取って、DOMツリーという「ページの骨組み」を作ります。
こんなHTMLがあったとしたら：
<p>
Let's use:
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
</p>
ブラウザは以下のようなDOMツリーを作成します。
P
├─ "Let's use:"
├─ SPAN
| └─ "HTML"
├─ SPAN
| └─ "CSS"
└─ SPAN
└─ "JavaScript"
6. CSSで見た目を整える（CSSOMの構築）
次に、CSSを読み込んで見た目の情報を整理します。
これを CSSOM と呼びます。たとえば「h1は赤」「文字サイズは16px」みたいな情報がここに入ります。
7. DOMとCSSOMを合わせてレンダーツリーを作る
HTMLの構造（DOM）とCSSの見た目（CSSOM）を組み合わせて、レンダーツリーというものを作ります。
このツリーは「画面に実際に表示するものだけ」が含まれます。たとえば、display: noneの要素などは除外されます。
8. レイアウトとペイント
ここまで来たら、ブラウザは各要素の位置やサイズを計算して（レイアウト）、
その上で実際に画面に描画（ペイント）します。
この描画のあと、コンポジット処理をして、最終的に私たちが見るページが完成します。
✨ 最後に：ブラウザって、すごい
URLを1つ打っただけで、裏側ではこんなにたくさんのことが一瞬で行われているんですね。
「ググる」ではなく「ググらせていただいている」くらいの感謝の気持ちを持ちたくなります（笑）
📝 参考資料
今回この記事を執筆するにあたり、以下のサイトを参考にさせていただきました。
KDDI ビジネスIT用語集
MDN Web Docs – How the Web Works
MDN Web Docs – How browsers load websites
Progate DOM解説
Chrome Developers – Inside browser
Hajimari Tech Blog Webブラウザレンダリングの仕組み【DOM・DOMツリーって何？】
何か間違い等ありましたらコメント欄にて指摘していただけると助かります。
Discussion