ブラウザでURLを入力してからWebページが表示されるまで
※本ページは広告を含み、一部AIを活用して作成しています。
普段、私たちはブラウザにURLを入力したり、リンクをクリックしたりするだけで、数秒もしないうちにWebページが表示されます。
しかし、その裏側では世界中のネットワークを経由してWebサーバーと通信し、多くの処理が行われています。
この記事では、URLを入力してからブラウザにWebページが表示されるまでの流れを順番にわかりやすく解説します。
還暦を迎えたDIY好き。「買うより作る、捨てるより直す」が信条で、気になりだしたら底まで調べないと気が済まない性分です。
URL入力
すべては、ブラウザのアドレスバーへURLを入力するところから始まります。
例えば
https://from-to.jp/というURLを入力してEnterキーを押すと、ブラウザは
「このWebサイトのデータを取得してください」
という要求を出す準備を始めます。
しかし、この時点ではまだブラウザはサーバーへ接続できません。
なぜなら、「from-to.jp」というドメイン名しか分からず、サーバーの住所であるIPアドレスを知らないからです。
そこで次の処理へ進みます。
DNS
DNS（Domain Name System）は、ドメイン名をIPアドレスへ変換する仕組みです。
人間は
from-to.jpのような文字列は覚えられますが、
203.0.113.15のような数字だけでは覚えにくくなります。
そこでDNSサーバーが
「from-to.jpはどのIPアドレスですか？」
という問い合わせに答えます。
インターネットの電話帳のような存在と考えるとイメージしやすいでしょう。
IPアドレス取得
DNSサーバーから返信が返ってくると、
ブラウザは目的のWebサーバーのIPアドレスを知ることができます。
これでようやく
「どこへ通信すればいいか」
が分かります。
ただし、住所が分かっただけで、まだ通信は始まっていません。
次は実際にインターネットへデータを送り出します。
インターネット
ブラウザが送信したデータは、
家庭内のLANを通り、
光回線やモバイル回線などを経由してインターネットへ流れ込みます。
インターネットは世界中の通信事業者が相互に接続した巨大なネットワークです。
データは一つの線を一直線に進むわけではなく、
途中で複数の通信設備を経由しながら目的地へ向かいます。
ルーター
通信の途中では数多くのルーターを通過します。
ルーターは
「このデータはどちらへ送れば目的地へ近づくか」
を判断する交通整理役です。
道路に例えるなら、高速道路のジャンクションのような存在です。
世界中には無数のルーターがあり、
その時々の通信状況に応じて最適な経路が選ばれています。
サーバー
通信が目的地へ到着すると、
Webサーバーがブラウザからのリクエストを受け取ります。
WordPressサイトであれば、
PHPが実行され、
必要に応じてMySQLデータベースから記事データを取得します。
その結果をHTMLとして組み立て、
ブラウザへ返信します。
つまり、この段階で初めてWebページが生成されます。
HTML受信
ブラウザはサーバーから送られてきたHTMLを受信します。
HTMLは
「見出し」
「本文」
「画像」
「ボタン」
など、
ページの骨組みを記述したデータです。
しかし、この段階ではまだデザインは適用されておらず、
画像も表示されていません。
CSS
HTMLの中には
CSSファイルへのリンクが書かれています。
ブラウザはそのCSSもダウンロードします。
CSSには
- 色
- 文字サイズ
- レイアウト
- 余白
- 枠線
など、
ページの見た目に関する情報が記述されています。
CSSが適用されることで、
初めてデザインされたWebページになります。
JavaScript
続いてJavaScriptも読み込まれます。
JavaScriptは
ページへ動きを与えるプログラムです。
例えば、
- メニューが開く
- スライダーが動く
- 入力チェック
- Ajax通信
など、
動きのあるページではJavaScriptが活躍しています。
最近のWebサイトではJavaScriptが非常に重要な役割を担っています。
画像
HTMLには画像ファイルの場所も記述されています。
ブラウザはHTMLを読みながら、
必要な画像を一枚ずつダウンロードします。
写真やアイコン、ロゴなどが表示されるのはこのためです。
画像が多いWebサイトでは、
画像のダウンロードが表示速度へ大きく影響します。
表示
HTML、CSS、JavaScript、画像など必要なデータがそろうと、
ブラウザはそれらを組み合わせて画面を描画します。
これが私たちが普段見ているWebページです。
一見すると、
「Enterキーを押したらすぐ表示された」
ように感じますが、
実際には
URL入力 → DNS → IPアドレス取得 → インターネット → ルーター → サーバー → HTML受信 → CSS → JavaScript → 画像 → 表示
という長い旅を、わずか数秒以内に高速で終えているのです。
