Webサイトは最初からブラウザの中に入っているわけではありません。では、なぜブラウザからWebサイトを見ることができるのでしょうか？
その理由は、ブラウザがインターネット上のWebサーバーから必要なデータを受け取り、画面を組み立てているからです。
URLを入力した後、ブラウザの中で起きていることを順番に見ていきましょう。
ブラウザでURLを入力すると通信が始まる
まず、URLを入力してからページが表示されるまでの全体的な流れを画像で確認してください。
ChromeやSafariなどのブラウザを起動し、アドレス欄へURLを入力してEnterキーを押すと、Webサーバーとの通信が始まります。
URLには、どの通信ルールを使い、どのWebサーバーから、どのページを取得するのかが書かれています。
https://example.com/about/
└通信のルール └接続先 └ページの場所httpsは、データを暗号化して安全に通信するためのルールです。example.comは、接続先のWebサイトを表すドメインです。/about/は、そのWebサイト内で取得したいページを表すパスです。
ドメインから接続先を調べる
次の図では、覚えやすいドメイン名から接続先のWebサーバーを調べる関係を示しています。
インターネット上にあるWebサーバーの接続先は、192.0.2.1のようなIPアドレスで示されます。しかし、数字だけのIPアドレスを人が覚えるのは大変です。
そこで、example.comのような覚えやすいドメインを使用します。このドメインとIPアドレスを結び付ける仕組みが、DNS（Domain Name System）です。
ブラウザはDNSを使ってドメインに対応するIPアドレスを調べ、そのIPアドレスをもとにWebサーバーへ接続します。
WebサーバーからHTMLが返される仕組み
Webサーバーには、Webサイトで使用するCSS、JavaScript、画像などのファイルやデータが置かれています。HTMLは完成した静的ファイルとして置かれている場合もあれば、WordPressのようにアクセスされたときに動的に生成される場合もあります。
次の図では、「WebサーバーからHTMLが返される仕組み」の仕組みや関係を確認できます。
静的サイトについて
静的サイトでは、Webサーバーに保存されているHTMLファイルを、基本的にそのままブラウザへ返します。同じHTMLファイルへアクセスすると、誰が見ても同じ内容が表示されます。
ページの内容を変更するときは、HTMLファイルを編集してWebサーバーへアップロードし直します。
動的サイトについて
動的サイトでは、ブラウザからアクセスされたときに、プログラムがデータベースなどの情報を使ってHTMLを生成します。
WordPressでは、PHPがテーマやデータベースに保存された投稿内容をもとにHTMLを生成し、ブラウザへ返します。
キャッシュについて
キャッシュとは、一度生成または取得したデータを一時的に保存し、次回以降に再利用する仕組みです。
ブラウザやWebサーバーがキャッシュを使うと、同じデータを毎回生成したり取得したりする必要がなくなり、Webページを速く表示できます。
HTTPリクエスト・レスポンスについて
ブラウザとWebサーバーは、HTTP（Hypertext Transfer Protocol）という共通のルールに沿ってデータをやり取りします。
Webページを表示するまでに、この通信が必要なデータごとに繰り返されます。
ブラウザがHTTPリクエストを送る
接続先が分かると、ブラウザはWebサーバーへHTTPリクエストを送ります。HTTPリクエストとは、ブラウザからWebサーバーへ送る要求です。
たとえばhttps://example.com/about/を開いた場合は、「/about/のページをください」という要求を送ります。
ブラウザ → Webサーバー
「/about/ のページをください」WebサーバーがHTTPレスポンスを返す
Webサーバーは要求されたページを探し、結果をHTTPレスポンスとしてブラウザへ返します。HTTPレスポンスとは、HTTPリクエストに対するWebサーバーからの応答です。
ブラウザ ← Webサーバー
「200 OK。こちらがHTMLです」ページが見つかった場合は、正常に取得できたことを表すステータスコード200とHTMLなどを返します。ページが見つからない場合に返される代表的なステータスコードが404です。
HTTPレスポンスから必要なファイルを取得する
WebサーバーからHTTPレスポンスが返ると、ブラウザは最初にHTMLを受け取ります。HTMLには、Webページの表示に必要なCSS、JavaScript、画像などの場所が書かれています。
HTMLに書かれたファイルを追加で取得する
最初に受け取る中心的なデータがHTMLです。ブラウザはHTMLを上から読み進め、CSS、JavaScript、画像などの指定を見つけると、それぞれのファイルについてもHTTPリクエストを送ります。
<link rel="stylesheet" href="css/style.css">
<img src="images/photo.jpg" alt="">
<script src="js/main.js"></script>このHTMLなら、ブラウザはstyle.css、photo.jpg、main.jsもWebサーバーへ要求します。1回の通信ですべてを受け取るのではなく、ページに必要なファイルごとにリクエストとレスポンスが発生します。
この例では、HTMLを受け取った後に、CSS、画像、JavaScriptを取得するためのHTTPリクエストが追加で3回送られます。最初のHTMLを取得するリクエストも含めると、リクエストは合計4回です。
HTML・CSS・JavaScriptの役割について
Webページは、HTMLで構造と内容を作り、CSSで見た目を整え、JavaScriptで動きや処理を加えます。ここからは、それぞれが担当する役割を順番に説明します。
次の図では、「HTML・CSS・JavaScriptの役割について」の仕組みや関係を確認できます。
HTMLとは
HTMLは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。見出し、文章、画像、ボタンなど、ページの構造と内容を表すマークアップ言語です。
CSSとは
CSSは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略です。文字の大きさ、色、余白、配置など、ページの見た目を指定するスタイルシート言語です。
JavaScriptとは
JavaScriptは略称ではなく、JavaScript（ジャバスクリプト）が正式名称です。JSと略して書かれることがあります。クリックへの反応、表示内容の変更、データの取得など、ページの処理や動きを担当するプログラミング言語です。
取得したデータを画面へレンダリングする
ブラウザは受け取った複数のファイルを組み合わせ、最終的なWebページを画面へ描画します。
ブラウザは、受け取ったHTMLとCSSのコードを読み取り、内容をブラウザが処理できる形へ整理します。この処理をパースと呼びます。
パースが終わると、ブラウザは要素の位置や大きさ、文字や背景の見た目を計算して画面へ描画します。このように、受け取ったデータからWebページを画面へ表示するまでの処理をレンダリングと呼びます。
- HTMLで基本構造を作る：HTMLをもとに、見出しや文章など、Webページの基本的な構造を作ります。
- CSSで見た目を整える：CSSをもとに、色、文字の大きさ、余白などのスタイリングを調整します。
JavaScriptが内容や見た目を変更した場合は、その変更もブラウザの画面へ反映されます。
URL入力から表示までの全体像
- 自分のパソコンでブラウザを開き、URLを入力します。
- ブラウザがDNSを使い、ドメインに対応するIPアドレスを調べます。
- ブラウザがIPアドレスをもとにWebサーバーへ接続します。
- ブラウザがURLのパスで指定されたページをHTTPリクエストで要求します。
- WebサーバーがHTTPレスポンスとしてHTMLを返します。
- ブラウザがHTMLを読み、CSS、JavaScript、画像などを追加で取得します。
- ブラウザがHTMLとCSSをパースし、JavaScriptを実行します。
- 要素の位置や大きさ、見た目を計算してWebページを画面へ描画します。
普段は一瞬で表示されますが、ブラウザの中では通信、読み取り、計算、描画が行われています。
次の図では、「URL入力から表示までの全体像」の仕組みや関係を確認できます。
