Webサイトが見える仕組みをご存じですか？
現代社会において、インターネットは無くてはならない存在です。特にインターネットを利用し、ニュースやホームページ等のWebサイトを閲覧することは、老若男女問わず様々な場面で行っていると思います。
ところで、ChromeやEdgeといったブラウザからWebサイトを閲覧するために、どのような仕組みがあるかご存知でしょうか?
今回、Webの仕組みを説明するにあたり、たとえ話として本を図書館に借りに行くAさんを例に挙げて解説します。話の都合上、Aさんはとても原始的な人間で、地図やスマートフォンなどの便利グッズを持っていないということをあらかじめご承知おきください。
Aさんの図書館物語：Webの仕組みを身近な例で理解しよう
目的地を探す旅の始まり（DNSの役割）
物語の始まりは、Aさんが急に本が読みたくなり、図書館に行くことを決意したところから始まります。
Aさんは図書館の名前を知っているのですが、住所を知りません。そこで、交番に行き「○○図書館に行きたいのですが、住所を教えてください」とおまわりさんに伝えます。すると、おまわりさんは「○○図書館は☆☆県△△市……です」と教えてくれます。
図書館まで移動する（インターネットとルーターの役割）
目的地まで遠いことがわかったAさんは、電車に乗ることにしたようで、とりあえず最寄り駅に向かいます。
駅に着いたAさんは、駅員さんに「☆☆県△△市……に行きたいのですが。」と伝えます。すると駅員さんは「まず□□駅に行って、そこの駅員に再度聞いてください。電車は××線に乗車してください。」と型にはまった回答をしてくれます。Aさんは案内通りに電車に乗り、到着した□□駅の駅員さんにも同じように質問をします。駅員さんは最初の駅の駅員さんと同様に、次に向かうべき駅と何線に乗ればよいかを教えてくれます。その案内に従い、Aさんは電車を乗り換え、到着した駅の駅員さんに再び質問し……、と図書館の最寄り駅まで同様のやり取りを繰り返します。
やっとのことで、最寄り駅についたAさんは、その駅の駅員さんに図書館までの道のりを教えてもらい、図書館へ移動します。
目的の「本」を依頼する（クライアントとサーバー、リクエスト/レスポンス）
図書館にたどり着いたAさんですが、目的の本は関係者しか取り出すことができない地下の本棚に格納されているようです。そこで、司書さんに「◇◇というタイトルの本を貸してください」と伝えます。司書さんは本棚からＡさんが求めている本を探し出し、Aさんに貸し出します。
Webを構成する「登場人物」を整理しよう
クライアントとサーバー：情報を要求する側と提供する側
Web（World Wide Web）とは、今回の物語で登場した、交番や電車、図書館といった社会インフラ全体を総称した概念を、インターネットの世界で呼ぶ言葉です。
Webの世界では、本を借りたいAさんはクライアント、本を貸し出す図書館はWebサーバーと呼ばれています。
Webにおけるクライアントとは、Webサーバと通信を行いWebページの情報を要求するものをいい、一般的にブラウザであることが多いです。
サーバーとは、何かしらのサービスを提供するコンピュータのことで、特にWeb上でテキストや画像、動画を配布するサーバのことをWebサーバと呼びます。
WebサイトとWebページ：棚と本
物語ではAさんから依頼を受けた司書さんは、本棚から探し出した本をAさんに貸し出しました。Webの世界において、本棚はWebサイト、本はWebページにあたります。
複数のWebページをまとめたものをWebサイトと呼び、ホームページとも呼ばれています。当サイトを例に挙げると、トップページや各記事のページ、お問い合わせページ、規約のページ等がそれぞれWebページとして存在し、それらをひとまとめにしたものがWebサイトです。
Webページを形作る３つのファイル（HTML, CSS, JavaScript）
WebページはHTMLファイル、CSSファイル、JavaScriptファイルといった、あまり馴染みの無いファイルで構成されています。
- HTML（HyperText Markup Language）
Webページの構造を記載するファイルです。目次や見出し、画像を入れる場所といった、内容そのものや、文章の構造のことを指しています。 - CSS（Cascading Style Sheets）
HTMLファイルで書かれた文章の見た目を整えるためのファイルです。フォントやサイズ、色、レイアウトなどを指定します。 - JavaScript
プログラミング言語の一つで、動的なWebページを作るために必要です。特定の操作（ボタンを押す、マウスを乗せるなど）で表示が変わったり、計算を行ったりするのはJavaScriptの役割です。
HTMLやCSS、JavaScriptといったファイルは、そのままでは人間にとって読みやすくありません。ブラウザがこれらのファイルを組み立て、人間が読みやすい形式に変換してから表示しています。この変換作業をレンダリングといいます。
Webサーバの場所を特定する：DNSで名前解決
インターネット上の住所：IPアドレスとドメイン名
物語の冒頭Aさんは交番に行き、おまわりさんに図書館の名前を伝えて、住所を教えてもらいました。ネットワークにおいて、図書館の名前はドメイン名、住所はIPアドレスとそれぞれ呼ばれます。
IPアドレスは0~255の数字を「.」で区切って４つならべたもので、インターネットにつながるコンピュータは唯一無二の（ユニークな）IPアドレスを持っています。（例：192.168.1.1）
ただ、このIPアドレスは例を見てわかる通り、数字の羅列であるため人間にとっては覚えやすくありません。また、IPアドレスをみただけでは、どのようなサイトであるか知ることもできません。
ここで、IPアドレスの代わりに、覚えやすい名前（英数字と一部の記号の組み合わせ）を付けたものがドメイン名です。当サイトではwww.madogiwa-engineer.comという名前を付けています。
ドメイン名に紐づくIPアドレスを教えてくれるDNSサーバー
図書館の名前から住所を教えてくれたおまわりさんのことを、インターネットの世界ではDNSサーバと呼んでいます。DNSサーバーは、要求があった際にドメイン名に紐づいたIPアドレスを回答する役割を持っています。このようにドメイン名からIPアドレスへ変換することを名前解決といいます。
目的地まで最適経路で転送：ルーター
どうやって目的地にたどり着けばよい？：ルーターが解決
Aさんは図書館までの移動に電車を使いました。この電車での移動はインターネットに他なりません。駅員さんは、ルーターと呼ばれるネットワーク機器です。ルーターはインターネット上にあるたくさんのコンピュータがどこにあるか把握しており、目的地のIPアドレスをもとに、最適な経路を判断し、隣のルーターに通信を転送してくれます。この転送処理をルーティングと呼びます。
物語で図書館の住所を知ったAさんは、とりあえず駅に向かいました。最初に訪れた駅の駅員さんのことを、特にネットワークの言葉でデフォルトゲートウェイと呼びます。デフォルトゲートウェイは、コンピュータがインターネットと接続する際に最初に訪れる、インターネットの入り口となるルーターのことです。
コンピュータ間の「会話のルール」：プロトコルとセキュリティ
ルールがないと会話できない！それが「プロトコル（HTTP）」
Aさんは「◇◇というタイトルの本を貸してください。」と司書さんに伝えたところ、本を借りることができました。
ここでもし、Aさんが本の名前を忘れてしまったとします。その場合、「最近テレビで話題になった▲▲という芸能人が書いている本を探しているのですが…。」と司書さんに伝えるかもしれません。
おそらく現実の司書さんであれば、そのような曖昧な条件でも該当する本を探し出してくれると思います。もし、その条件だけではわからない場合でも、親切な司書さんであれば「どのテレビ番組で話題になった本でしょうか？どのようなジャンルの本かわかりますか？」といった質問をして、どうにか解決しようとしてくれることでしょう。
これをコンピューターの世界に置き換えると、どうなるでしょうか？
前提として、本を借りるには「◇◇というタイトルの本を貸してください。」と伝えることがルールで決まっていたとします。
この状況で「最近テレビで話題になった▲▲という芸能人が書いている本を探しているのですが…。」といったルールにない要求や、「◇◇というタイトルの本を探しているのですが…」といった曖昧な要求では、コンピューターは回答してくれません。「そのような本はありません」とか「話の意味が分かりません」といった回答が返ってくるのが関の山です。
コンピュータ同士の通信において、決まったルールに則った通信をすることは必須です。
今まで「ルール」と記載し続けてきましたが、コンピュータの世界でクライアントとサーバが通信を行うときのルールを、プロトコルと呼んでいます。特にWebにおいては、HTTP（Hypertext Transfer Protocol）というプロトコルが利用されます。HTTPはHTMLやCSS、JavaScriptといったファイルを、クライアントとサーバ間でやり取りするときに利用されるプロトコルです。
誰にも会話を聞かれたくない：HTTPSの暗号化通信で実現
今回は、Aさんと司書は周りの人の目を気にせずに話をしています。ただ、もし人に聞かれたくない話をするにはどうすればよいでしょうか？
周りに人がおらず、話を盗み聞きされない場所で一対一で話すのが一番です。しかし、インターネットは公道のようなものなので、生のデータをやり取りすると、第三者に通信を盗み見られてしまう危険性があります。
他の手段として、Aさんと司書の2人しか理解できない言語があるとすれば解決でしますが、現実的ではありません。
対して、コンピュータの世界ではそれに近い手法として、通信を暗号化することで通信内容を隠すことができます。
2人しか理解できない言語を話すことも、通信を暗号化することも、他人が理解できないという点で本質的には変わりません。ただし、暗号化のほうがより高度で、解読することが困難であるという点で優れています。
HTTPを暗号化したものをHTTPS（Hypertext Transfer Protocol Secure）といいます。特に個人情報やパスワード等、他人に知られて困る情報を扱うときにはHTTPSを利用することが必須です。
【まとめ】Webサイトが表示されるまでの全手順
最後に、Webの用語に置き換えて流れを再確認してみます。例として、当サイトのこのページを表示する流れで説明します。
- ブラウザを開き、アドレスバーにURLを入力します。URLには、プロトコル（
https）やドメイン名(www.madogiwa-engineer.com)、どのファイル（/web_Introduction）を要求するかが含まれています。 - ブラウザは、DNSサーバに
www.madogiwa-engineer.comのIPアドレスを問い合わせます。 - DNSサーバは
www.madogiwa-engineer.comのIPアドレスが160.251.177.224であると回答します。 - ブラウザはWebサーバに要求（HTTPリクエストと呼びます）を送信しようとします。ただ、Webサーバの場所が不明なため、デフォルトゲートウェイである、直近のルータにHTTPリクエストを転送します。
- ルータは、HTTPリクエストの宛先IPアドレスをもとに、最適な経路を選択し隣のルータへルーティングします。
- HTTPリクエストを受信した隣のルータは、同様に最適経路を判断して隣のルータへルーティングします。これを目的のWebサーバまで繰り返します。
- HTTPリクエストを受信したWebサーバは、要求されたファイルを探します。
- ファイルが見つかった場合、そのファイルをクライアントに返答しようとします（HTTPレスポンスと呼びます）。ただし、Webサーバはクライアントまでの道のりを知らず、直接通信をすることはできないので、直近のルータに送信します。
- 行きとは逆方向に、インターネット上にある多数のルータをたどり、ブラウザまでHTTPレスポンスを送り返します。
- HTTPレスポンスを受信したブラウザは、受信したファイルを組み立てて、ブラウザ上に見やすい形式にレンダリングして、表示します。
終わりに
原始的なAさんの物語を通して、Webサイトが皆さんの画面に表示されるまでに、DNSやルーター、Webサーバーたちが複雑に連携していることがお分かりいただけたかと思います。
さらに詳細に学びたい方は、以下の記事もご参照ください。
