Webページ表示の仕組みと表示までの流れ

このページにはプロモーションが含まれています

このページではWebページ（ウェブページ・ホームページ）が表示される仕組み・Webページを見ることができる仕組みについて解説します。

こんな方にオススメのページです

・Webページ表示の仕組みを知りたい

・DNSサーバ/Webサーバの関係を知りたい

・キャッシュ有効時のWebページ表示時の処理の流れを知りたい

・Webページが表示される時のデータ（パケット）の流れを実際に確認したい

Webページ表示の仕組みを知る意義

もしあなたがWebサイト運営をしている・Webサイト公開したいと思っているのであれば、Webページが表示される仕組みを理解しておいた方が良いです。Webページの仕組みを理解していると下記のようなメリットがあります。

Webサイト公開の手順が直感的に理解できる
Webサイト公開・作成に必要な知識が理解できる
Webサイト公開でトラブルなど発生した時に自力で考えて対処できる、もしくは何を対処すれば良いかのアタリをつけることができる

特に重要なのは最後のトラブル時の対処です。Webサイト運営や公開時にトラブル発生した際はそれを解決していく必要があります。その解決方法が必ずインターネット上に公開されているとは限りません。公開されているにしても、そのWebページに行きつくためには適切なキーワードで検索する必要があります。そういった解決方法やそれを検索するための適切なキーワードを類推できるようになるためにも、Webページ表示の仕組みは理解しておいた方が良いです。

WebサイトとWebページの違い

Webページはこのページのように一枚のページです
例えば今見ているこのページがWebページに該当します

WebサイトはそのWebページが集まったものになります
例えばこのWebサイトは「だえうホームページ」になります

Contents

Webページはサーバとクライアントの連携により表示される
Webページが表示されるまでの流れ
キャッシュ動作時のページ表示の流れ
- キャッシュとは
- キャッシュ動作時はページ表示の流れが変化
ページ表示の流れをパケットの流れで解析
- Wireshark
- パケットの流れ解析
まとめ

Webページはサーバとクライアントの連携により表示される

Webページが表示される仕組みを全体像で表すと ↓ のようになります。

あなたがWebページを閲覧する時はWebブラウザにURLを入力するだけですが、実はあなたの知らない裏側で上図の処理が実行されています。この処理の流れを解説するために、まず主要な登場人物であるクライアント・Webサーバ・DNSサーバについて説明し、その後、これらがどのように連携してWebページを表示しているのかを説明していきます。

サーバとクライアント

サーバとはサービスを提供するものです。

サーバにサービスを要求し、そのサービスを受けるのがクライアントです。

クライアント

Webページ表示におけるクライアントとしては、主にPCやスマホなどが挙げられます。ユーザからPCやスマホのWebブラウザに表示したいページのURLが指定されれば、クライントはWebサーバ・DNSサーバと通信し、そのページを画面に描画します。

Webブラウザ

Webブラウザとは、Webページを閲覧するためのアプリです。Webブラウザは、指定されたURLを表示するためのデータをWebサーバに要求し、Webサーバから受信したデータを用いてページを画面に描画します。有名なWebブラウザとしては下記のようなものがあります。

・Internet Exproler
・Safari
・Fire Fox

Webサーバ

Webサーバはクライアントからの要求に対し、Webページを閲覧するために必要なデータを転送するサーバです。このデータとは、具体的にはHTMLファイル、CSSファイル、画像などです。またデータ転送だけでなく、要求されたページを表示するために必要なデータをサーバ自身で生成することもあります。

DNSサーバ

DNSサーバとはドメインをIPアドレスに変換してくれるサーバです。クライアントはWebサーバにデータを要求さえすればWebページ閲覧に必要なデータは取得できますが、要求を出すWebサーバがWeb上のどこにあるのかを知っている必要があります。より正確に言うと、WebサーバのIPアドレスを知っている必要があります。そのWebサーバのIPアドレスを教えてくれるのがこのDNSサーバです。

ドメイン

ドメインとは宛名の住所みたいなもので、数字だけのIPアドレスを人が直感で理解できるように文字列で表してくれているものです。ドメインを住所に例えるなら、IPアドレスは緯度経度みたいなものです。両方場所を表すものですが、住所は人にも覚えやすい一方で、数字だけの緯度経度は覚えにくいですね。

DNSがドメインとIPアドレスの紐付けをしてくれているので、ユーザはWebサーバのIPアドレスを意識しなくても、見たいWebサイトのドメインさえ知っていれば閲覧が可能です。

URL

ここまでにURLという言葉が何度か出てきたと思います。URLとドメインは混同しやすいため、ここでURLについて説明したいと思います。

URLはハガキなどに書く「住所・宛名のWeb版」みたいなものです。アドレスという人もいますね。URLはさらに、下記のように複数の要素から構成されています。

https://daeudaeu.com/websight/publish-wbsight/homepage-system

スキーム

青部分の「https」はスキームと呼ばれるものです。どんな手段（どんな規約に則って）でURLの後半部分で特定されるWebサーバと通信するかを指定するものです。例えばHTTP（Hyper Text Transfer Protocol）は下記のようなものです。

HTTPとは、WebサーバとWebクライアントの間でデータの送受信を行うために用いられるプロトコル(通信規約)。Webページを構成するHTMLファイルや、ページに関連付けられたスタイルシート、スクリプト、画像、音声、動画などのファイルを、データ形式などのメタ情報を含めてやり取りすることができる。

引用元：IT用語辞典 e-Words

基本的にインターネットでWebページを表示する際に使用するスキームはHTTPとHTTPSくらいです。

ドメイン

赤字部分の「daeudaeu.com」はドメインです。ドメインとは前述したとおりWeb上の住所のようなものです。

パス

緑部分の「/websight/publish-wbsight/homepage-system」はパスです。パスとは住所の部屋番号みたいなもので、赤字部分のドメインの中から見たいページをさらに特定するために必要な情報になります。通常のファイルシステムと同じようなものと考えて良いです。緑部分のパスはディレクトリだけの場合やファイル名も含まれる場合もあります。

このようにURLとはスキーム＋ドメイン＋パスで表される文字列であり、Web上のページを一意に特定するための情報になります。

Webページが表示されるまでの流れ

DNSサーバ・Webサーバについて理解していただところで、Webページが表示されるまでの処理の流れを説明していきたいと思います。下の①②③④の動きを中心に解説していきます。Webブラウザには「http://daeudaeu.com/category/websight」が入力されたとし、WebサーバのIPアドレスは「123.25.201.1」としています。

まずDNSサーバと通信を行い、ページ表示するためのデータの要求先となるWebサーバを特定します。この処理が①と② になります。

①DNSサーバへのIPアドレスの問い合わせ

クライアントはあなたが入力したURLから「ドメイン」部分だけを抜き出し、そのドメインのIPアドレスをDNSサーバに対して要求します。上の例だと「daeudaeu.com」を抜き出し、「daeudaeu.com」のIPアドレスを要求します。本当はDNSサーバはいくつも異なる機能のものが連携して動いているのですが、ここではその説明は割愛します。

②IPアドレスの返答

DNSサーバは渡されたドメインのIPアドレスを特定し、そのIPアドレスをクライアントに返答します。例に当てはめれば、DNSサーバは「daeudaeu.com」のIPアドレスを特定し、そのIPアドレス「123.25.201.1」をクライアントに返答します。

これによりクライアントは見たいWebページ表示に必要となるデータの要求先WebサーバのIPアドレスを知ることができます。続いてそのWebサーバに対して実際にデータの要求を行います。それが③と④の処理になります。

③Webサーバへデータ要求

まずクライアントは得られたIPアドレスのWebサーバに接続します。さらにURLの「パス」部分のページを表示するためのデータをHTTPで要求します。例に当てはめれば、クライアントは「123.25.20.1」のWebサーバに接続し、さらに「/category/websight/」のページを表示するためのデータを要求を行います。

④要求されたページのデータ転送

Webサーバは要求されたWebページを閲覧するのに必要なHTMLをクライアントに対して転送します。クライアントでは受信したデータをWebブラウザによりページを画面に描画されます。

もしページを表示するのにまだ足りないデータ（画像やCSSなど）があれば、クライアントはそのデータをまたWebサーバに要求します。つまり③と④の処理は必要に応じて繰り返し実行されることになります。

ここまでの一連の流れにより、ユーザは見たいWebページを閲覧することができます。

キャッシュ動作時のページ表示の流れ

ではWebページ表示する際に毎回この①から④が実行されるかというと、実はそういうわけではありません。それはキャッシュという機能があるからです。

キャッシュとは

キャッシュというのは、直近でDNSサーバやWebサーバから取得した情報やデータを一時的に保存しておき、もし同じWebページの表示が要求された場合にはDNSサーバやWebサーバから取得するのではなく、その一時的に保存している情報やデータの方を使用する機能です。キャッシュを利用することで、ページ表示の速度が上がる・ページ表示時のデータ通信量が減るというメリットがあります。

キャッシュ動作時はページ表示の流れが変化

このキャッシュ機能が動作した場合は、①から④の流れが行われなくても、Webページの表示が可能です。例えば、あるWebページに初めて訪れた場合は必ず①から④の流れの処理が行われます。

しかし、すぐに次に同じドメイン内の違うページを表示させる場合は、そのドメインに対応するWebサーバのアドレスを既にクライアントは知っている（DNSキャッシュしている）ためDNSサーバに問い合わせする必要がありません。そのため、DNSサーバとのやりとりは行わずにすぐにWebサーバへページの要求を行います。

さらに、すぐにまた同じWebページを表示した場合は、そのWebページを表示するために必要なデータをクライアントはすでに持っている（ブラウザキャッシュしている）ためWebサーバのやりとりも行うこともなくWebページを表示することができます。

キャッシュによって①から④の処理が省略されるようになりますが、最初の一度目のWebページ表示時は必ず①から④の処理が行われます。

ページ表示の流れをパケットの流れで解析

さて、ここまでWebページが表示される仕組みについて説明してきましたが、実際に本当にこの仕組みに則ってWebページが表示されているかを確かめていきたいと思います。これはWiresharkというアプリを使うことで確認可能です。

Wireshark

Wiresharkとはネットワーク中に流れパケットをキャプチャするアプリです。パケットとは通信データの単位です。Wiresharkではネットワーク上のこのパケットを１つ１つ取得し、その情報を表示してくれます。コチラからダウンロード可能で、無料で使用することができます。

↓ がWiresharkの実行画面になります。大きく３つの種類の情報を確認することができます。

上側がパケットの流れをキャプチャした結果になります。真ん中は上側の画面で選択したパケットの中身を表示したものです。さらに下側ではそのパケットの中身をバイナリ（パケットのデータそのまま）で表したものです。

上側のパケットの流れでは下図のような情報が表示されています。

例えば下図のパケットでは「IPアドレスが 192.168.3.24 のクライアントから、IPアドレスが 183.90.238.43 のWebサーバに対して、/wp-content/uploads/2018/11/human.png のデータを要求していることになります（画像が小さいので拡大して見てください）。

主にこのページでは上側の画面に注目してWebページ表示時のパケットの流れを見ていきます。

パケットの流れ解析

それでは、Wiresharkを用いてWebページ表示時のパケットの流れを見ていきましょう。

http://daeudaeu.work/wp-content/uploads/2018/11/ を私のPCで表示した時のパケットの流れが下記です。

※私のPCのIPアドレスは「192.168.3.24」
WebサーバのIPアドレスは「183.90.238.43」です

上からパケットの流れを見ていきます。

↑ で囲った部分は私のPCからDNSサーバに対してdaeudaeu.workドメインのIPアドレスを問い合わせしています。つまりWebページ表示の処理の流れにおける①の処理を行なっているパケットになります。

↑ で囲った部分はDNSサーバから私のPCに対してdaeudaeu.workドメインのIPアドレスの返答が行われています。つまりWebページ表示の処理の流れにおける②の処理を行なっているパケットになります。

↑ で囲った部分は私のPCからDNSサーバに対して /wp-content/uploads/2018/11 を表示するためにひつよおうなHTMLの要求が行われています。つまりWebページ表示の処理の流れにおける③の処理を行なっているパケットになります。

↑ で囲った部分はWebサーバから私のPCに対して要求されたHTMLファイルの送信が行われています。つまりWebページ表示の処理の流れにおける④の処理を行なっているパケットになります。

ここで受信するHTMLファイルは下記のものになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>HTML</title>
  </head>
  <body>
    <p>リンクのみ</p>
    <a href="http://daeudaeu.work/wp-content/uploads/2018/11/capture_test.html">リンク</a>
    <p><img src="human.png" alt="人" /></p>
  </body>
</html>

このHTMLでは下記で style.css を読み込み

<link rel="stylesheet" type="text/css" href="style.css">

下記で human.png を読み込もうとしています。

<p><img src="human.png" alt="人" /></p>

つまり、この２つのデータがこのWebページを表示するために必要ということになります。なので、このデータもWebサーバに対して要求を行います。この様子もパケットの流れから確認することができます。↓ がそれらのデータを要求しているパケットになります。

↑ で囲った部分は私のPCからDNSサーバに対して /wp-content/uploads/2018/11 を表示するために必要なデータ（style.css と human.png）の要求が行われています。つまりWebページ表示の処理の流れにおける③の処理を行なっているパケットになります。

↑ で囲った部分はWebサーバから私のPCに対して要求されたデータ（style.css とhuman.png）の送信が行われています。つまりWebページ表示の処理の流れにおける④の処理を行なっているパケットになります。

このように、Webページ表示の処理の流れで説明した内容の通り、①から④の流れでパケットが流れていることが確認できました。キャッシュが働くと処理が省略されているところもWiresharkで確認することができます。Webサイトを公開したり、Webの仕組みをさらに深く理解したりしていく上でWiresharkは役に立ちますのでこの機会にぜひ試してみてください。

まとめ

Webページを表示するために重要な役割を果たしているのがDNSサーバとWebサーバ
DNSサーバとWebサーバが下記のように連携することでWebページが表示される
- ①DNSサーバへのIPアドレスの問い合わせ
- ②IPアドレスの返答
- ③Webサーバへのデータ要求
- ④要求されたページのデータ転送
キャッシュにより①から④を省略してWebページ表示することも可能
パケットの流れを見ることでWebページ表示時の処理を確認することが可能