本記事では、Web ページがどのようにして表示されるのか、その基本的な流れを説明します。

Web ページが表示されるまでの流れを解説する前に、理解しておくべき重要な用語をいくつか説明します。

Web とは

そもそも Web とは何でしょうか？

Web(World Wide Web) とは簡潔に言うと「インターネット上で公開されている文書や画像、動画などのリソースを結び付けるシステム」です。

この説明ではまだ理解するのが難しいと思うので補足をします。

インターネットは世界中のコンピュータを繋げるシステムで、コンピュータ間でデータの交換を可能にします。
インターネットを利用することで他のコンピュータが公開している文書や画像、動画などの様々なデータにアクセスできますが、これらはそれぞれ独立したデータとして存在しています。
Web はこの独立したデータをハイパーリンクと呼ばれる仕組みで結び付けることで、ユーザーが興味のある情報から関連する情報へシームレスにアクセスできるようにするシステムです。
Web を利用することでユーザーはインターネット上の膨大な量の情報を効率的に探し出し、利用することができます。

ハイパーリンクはインターネット上のリソースを結び付けるためのものです。
Google や Instagram などのリンクがハイパーリンクの一例です。

ハイパーリンクを利用すると、わざわざアドレスバーで調べ直さなくてもクリックするだけでリンク先のリソースに移動することができます。

つまり、Web はインターネット上で公開されている文書や画像、動画などのリソースを、ハイパーリンクによって結び付けることで、ユーザーの利便性を向上させるシステムです。
Web = インターネットではなく、Web はインターネット上に構築したシステムのひとつにすぎません。

クライアントとサーバ

Web では、情報を要求するコンピュータは Web クライアントと呼び、情報を提供するコンピュータは Web サーバと呼びます。各コンピュータはどちらかの役割に専念します。

Web のようにクライアントとサーバに役割が分かれているシステムはクライアントサーバモデルと呼ばれており、クライアントとサーバは一対多の通信を行います。

コンピュータは様々な定義がありますが、本書では電子回路を用いて複雑な計算やデータの処理を自動的に行う機械として説明します。ノートパソコン、スマートフォン、タブレット、サーバ用コンピュータなどがその例です。

Web クライアントは通常 Web ブラウザと呼ばれるソフトウェアを利用し、Web サーバに情報を要求します。Web ブラウザは、Chrome や Safari、Edge、Firefox などが有名です。

Web サーバは Web クライアントからの要求に応答し、必要な情報を提供します。
Web サーバはサーバの一種で、他にもデータベースサーバや DNS サーバなどがインターネット上で提供されています。サーバは、オンプレミス型とクラウド型の2つの主要な形態があります。

Web サーバが提供するデータには様々なフォーマット¹がありますが、ハイパーリンクが組み込まれる主要なフォーマットは HTML です。Web ブラウザは主に HTML で書かれたデータを解釈して Web ページとして表示します。

HTML

HTML（Hypertext Markup Language）は Web ページの構造や表示方法を定義するために使用されるマークアップ言語²です。Web ブラウザは HTML で書かれたデータを解釈して Web ページとして表示します。

HTML はハイパーリンクを含めることが可能で、他の文書や画像、動画などのリソースと結び付けることができます。ハイパーリンクを含むページはハイパーテキストと呼びます。
また、現在は Web ページ内に画像、動画を埋め込むこともできます。このようにハイパーテキストを拡張させたものはハイパーメディアと呼びます。

以下が HTML の例です。詳しい説明を省きますが、基本的に HTML は .htmlで名前が終わるファイル（HTML ファイル）内で、<>と</>で要素を入れ子状に囲み、それによって Web ページの構造や表示方法を定義します。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Sample Code</title>
  </head>
  <body>
    <div>
      <a href="https://qiita.com/trend">トレンド - Qiita</a>
    </div>
  </body>
</html>

<a href="https://qiita.com/trend">トレンド - Qiita</a> は Zenn の記事検索の Web ページへのリンクを定義しています。
このリンクは Web ページでは、トレンド - Qiita のように表示されます。

Web ページを作成するために、 HTML 以外にも CSS や JavaScript といった言語が使用されていることがあります。

CSS は文字のフォントや色などの Web ページのスタイルを制御するスタイルシート言語です。
JavaScript は Web ページに動きや機能をつけるために使用されるプログラミング言語です。

CSS や JavaScript は HTML ファイル内でも使用できますが、それぞれ .css もしくは .js で名前が終わるファイルで記述することもできます。HTML ファイルのサイズが大きくならないようにファイルを分けて記述するのが一般的です。

Web ページは Web サーバ上に保存されている HTML ファイルやそれに関連するリソース（画像、スタイルシート、スクリプトなど）から構築されます。
Web サーバから提供されたこれらのリソースをもとに Web ブラウザが解釈・表示することによって、ユーザは Web ページを閲覧できるようになります。

さて、文書や画像、動画などのリソースはインターネット上でそれぞれどのように識別されるでしょうか。識別する方法がなければリンクの移動先を指定できませんし、そもそもリソースのアクセス先を指定することができません。
すでに登場していますが、https://qiita.com/trendのような URL によってそれぞれのリソースは識別されます。

URL

URL (Uniform Resource Locator) はインターネット上で公開されているリソースの所在（インターネット上の住所）を示すものです。

例えば、https://www.example.com:443/blog/search?q=web#results は、以下の部分から構成されています。各部分にはそれぞれ異なる役割があります。

スキーム（Scheme）
Web ブラウザと Web サーバが通信する上で使用するルール（通信プロトコル）を示しています。https や http が一般的なスキームです。
サブドメイン(Subdomain)
サブドメインは、既存のドメイン名(example.com など)の前に追加される識別子であり、通常は特定のサービスや地域を識別するために使用されます。例えば、blog.example.com や jp.example.com のように、異なるサービスや地域を区別するのに役立ちます。サブドメインは必須ではありません。
ドメイン名(Domain name)
インターネット上の特定のサーバを識別するための名前です。.comや.orgなどドメイン名の一番右にある部分を特にトップレベルドメイン（ドメイン拡張子）と呼びます。
ポート番号(Port)
1 つのコンピュータ上で同時に複数のサービスが公開されている場合にそれぞれを区別するために使用される番号です。
例えば、1台のコンピュータが Web サービスと SMTP サービスを提供している場合、Web サービスは通常 80 番ポートもしくは 443 番ポート、SMTP サービスは通常 25 番ポートが使用されます。
通常 URL でポート番号は省略されます。スキームが https の場合、デフォルトでポート番号 443 が使われます。このため、ポート番号を明示的に指定しなくても Web ブラウザは 443 番ポートへの接続を試みます。
パス（Path）
Web サーバー上の特定のリソース（文書や画像など）への道筋を示しています。Web サーバはこの情報をもとに Web クライアントに返すリソースを特定します。
https://www.kantei.go.jp/jp/iken.html のように .html などの拡張子をパスの最後に含める形式は、以前は一般的でしたが、現代の Web ではあまり一般的ではなくなりました。
パラメータ（Parameters）
Web サーバーに渡す追加の情報です。複数のパラメータの場合、クエリ文字列はアンパサンド (&) 記号を使用して結合されます。（例： ?q=web&lang=ja）
アンカー(Anchor)
Web ページ内で特定の位置を表します。# の後の部分はリクエストとともに Web サーバーに送信されることはありません。
例えば、https://zenn.dev/zenn/articles/markdown-guide#githubにアクセスするとGitHubのセクションの位置に移動した状態で Web ページが表示されます。

HTTP と HTTPS

HTTP は、Web 通信の基盤となる通信プロトコルで、Web クライアントと Web サーバー間でのデータの送受信を目的として設計されています。
HTTPS は HTTP に TLS（Transport Layer Security）³ という暗号化技術を加えたもので、通信を暗号化することで、第三者によるデータの盗聴やなりすまし、改ざんを困難にします。

IP アドレス

ドメイン名はインターネット上の特定のサーバを識別するための名前であると説明しました。
しかし、本来、インターネットに接続しているコンピュータを一意に識別するのは IP アドレスです。ただし、IP アドレスは数字（例: 127.0.0.1）で表されており、人間が理解しにくい形式で表されています。そのため IP アドレスの代わりに、人間が理解しやすい形式であるドメイン名が利用されています。

DNS サーバを通じて、ドメイン名は対応する IP アドレスに変換されます。これにより、ユーザーは人間が理解しやすいドメイン名を使用して、ネットワーク上のコンピュータにアクセスできるようになります。

IP アドレスは IPv4 と IPv6 の 2 種類あります。IPv4の場合、通常は4つの数字がドットで区切られて表されます（例: 127.0.0.1）。IPv6の場合、より複雑な形式です。

Web ページの表示までの流れ

前提知識を説明したので、本題の Web ページの表示までの流れを説明します。

URL を Web ブラウザのアドレスバーで入力すると、以下の順番で Web ページが表示されます。

ドメイン名解決
Web ブラウザは、DNS サーバに問い合わせて、入力された URL から対応する Web サーバの IP アドレスを取得します。
TCP コネクションの確立
クライアントとサーバの双方でデータの受け渡しが可能な状態であることを確認します。コネクションが解放されるタイミングは、複数のリクエストで同じコネクションを使用することがあるので場合によります。
セキュリティの確立（必要な場合）
HTTPS のようなセキュアな通信を行う場合、SSL/TLS ハンドシェイクが行われ、暗号化キーが交換されます。これにより、データの安全な送信が確保されます。
リクエストの送信
ブラウザは、取得した IP アドレスに基づいて Web アプリケーションに対して、リクエストを Web サーバに送信します。クライアントは、リクエストを構築します。これには、要求の種類（ GET、POST など）、ヘッダ（リクエストに関する追加の情報）、ボディ（必要に応じてリクエストのデータ）などが含まれます。
リクエストの処理
Web サーバは、受信したリクエストに基づいて、特定のページの表示、データの取得や処理、データベースへのクエリなどの処理をします。
レスポンスの送信
Web サーバは Web ブラウザにレスポンスを返します。
ページの表示
Web ブラウザは、受け取ったレスポンスを解析し、Web ページを表示します。
他に CSS や JavaScript などのリソースが必要な場合は、Web サーバに再度リクエストします。（レスポンスの解析中に Web サーバに再度リクエストすることもあります）

まとめ

コンピュータとは？

コンピュータとは電子回路を用いて複雑な計算やデータの処理を自動的に行う機械です。ノートパソコン、スマートフォン、タブレット、サーバ用コンピュータなどがその例です。

インターネットとは？

インターネットはコンピュータ間でデータの交換を可能にするシステムです。 Web や電子メール、ファイル転送などのシステムを構築する基盤になります。

Web とは？

Web はインターネット上で公開されている文書や画像、動画などのリソースをハイパーリンクによって結び付けることでユーザーの利便性を向上させるシステムです。

Web が採用しているシステムのモデルは？

Web はクライアントサーバモデルを採用しています。 Web 上では情報を要求するコンピュータは Web クライアント、情報を提供するコンピュータは Web サーバと呼びます。 Web クライアントは通常 Web ブラウザをインストールして Web を利用します。

Web ページとは？

Web ページは Web サーバ上に保存されている HTML ファイルやそれに関連するリソース（画像、スタイルシート、スクリプトなど）から構築されます。 Web サーバから提供されたリソースをもとに Web ブラウザが解釈・表示することによって、ユーザはコンテンツを閲覧できるようになります。

URL とは？

URL はインターネット上で公開されている文書や画像、動画などのリソースの場所を示すアドレスです。`https://zenn.dev/`や`https://www.google.com/` がその例です。

IP アドレスとは？

IP アドレスはインターネットに接続しているコンピュータを識別するための数値のアドレスです。ドメイン名（ URL の一部）は IP アドレスを分かりやすくしたものです。DNS サーバを通じて、ドメイン名は対応する IP アドレスに関連付けられます。

HTML とは？

HTML は Web ページを作成するために使用するマークアップ言語

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

1. **ドメイン名解決** 2. **TCP コネクションの確立** 3. **セキュリティの確立（必要な場合）** 4. **リクエストの送信** 4. **リクエストの処理** 5. **レスポンスの送信** 6. **ページの表示**

参考文献

インターネットはどのように動くのか？ - ウェブ開発を学ぶ | MDN

ウェブのしくみ - ウェブ開発を学ぶ | MDN

HTTP - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

URL とは？ - ウェブ開発を学ぶ | MDN

「.COM」「.ORG」「.NET」の違いとは？ドメインの種類と選び方 | Wix 公式ブログ

9 Parts of a URL You Should Know. if you plan on building a website | by Joseph Pyram | Medium

HTML や CSS、JavaScript、JSON、JPEG、GIF、MP4 などのフォーマットがあります。詳しくはMedia Types (iana.org)を参照してください。 ↩
マークアップ言語は、見出しや段落などの文章構造やレイアウトを指定するために使用される言語です。 ↩
TLS は、SSL の後継プロトコルです。TLS は、SSL のセキュリティを強化するために開発されたプロトコルです。 ↩