普段見ているインターネットがどのようにして画面に表示されているのか。
WEBサイトやページを作る人でも、HTML・CSS・Javascriptがどのようにして表示されているのか。
実際のところあまり詳しく知らないのではないでしょうか。
今回は、表側ではなくあくまでも裏側。普段見ているページがどのようなフローを経て、サイトに表示されるのか。これを深堀りしていこうと思います。

参考記事：https://gigazine.net/news/20190624-how-web-works/

URLをアクセスするとどうなるか？

01：URLを解析する

URLは単なる文字列ではない！？
実は、URLにはドメインと呼ばれる他に「リソース」と「プロトコル」と呼ばれる情報が含まれているのです。
よく目にする「http」この部分で「HTMLやXMLで書かれた文章を転送してほしい！」というお願いをサーバーに送っています。

 02：DNS

サーバーはいわゆるコンピューターです。私達がブラウザを通して見ているのもコンピューターです。
そのコンピューター同士をインターネットと呼ばれる「線」でつなげるためには「相手を特定する情報」が必要になります。
そこで使われているのが「IPアドレス」です。
「え？ドメイン（～～.com）がIPアドレスなの？」
と思う方もいるかも知れませんが、違います。よく目にする「～～.com」は
「～～～.comが来たらIP～～～～にアクセスしてね」と命令をしているのです。
そこで使われているのが「DNS」と呼ばれるものです。
このDNSのステップには下記のステップがあると言われています。

1. ブラウザキャッシュ
2. OSキャッシュ
3. ルーターキャッシュ
4. ポート番号を調査
5. HTTPプロトコル
6. HTTPサーバー処理
7. サーバーレスポンス

ブラウザキャッシュ

ブラウザがURLにアクセスする際、ブラウザは自分自身の中にある「キャッシュ（画像・css・html・jsなどのデータ）」をまず見ます。
キャッシュが既にあるのに、またデータを読み込む必要というのはないですからね。
そして、以前に接続していたキャッシュ（画像・css・html・jsなどのデータ）が有ればそれを利用してブラウザ上に表示していきます。
このキャッシュは「TTL」と呼ばれる、いつまでこのデータを残すか。を伝えることができないため、ブラウザのキャッシュは20～30分ほど残っています。

OSキャッシュ

ブラウザにキャッシュが残っていれば、ブラウザはURLを元にDNSの検索を行います。
この検索にも、「前に検索したデータ」を蓄積して、検索の時間を短縮しています。

ルーターキャッシュ

上記2つのキャッシュがない場合…ルーターにDNS検索を依頼することになります。

ポート番号を調査

IPアドレスが特定されると「このパソコンに繋げばいいんだ」とブラウザが理解し、IPアドレスをたどり接続を行います。
ここで、終わりかと思われるかもしれませんがまだあるんです。
次に「どのコンピューターのどの部分にアクセスするのか？」という特定をしていかなければなりません。
そこで利用されているのが「ポート番号」と呼ばれるものです。
接続されるコンピューターに何も指示がない場合、通常「httpなら80/httpsなら443」というポート番号が利用されています。
参考画像　Xamppのポート部分

この接続をするときhttpsでは特殊な方法で通信を行いますが、今回は割愛します。
（別途別の記事でここは深く解説していきたいと思います…）

HTTPプロトコルとは

インターネットでURLを叩いた際、実際ブラウザは接続先のコンピューターに対して下記のような情報（抜粋）を送るようになっています。

GET http://www.google.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: google.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]/* Your code... */

色々書いていますが抜粋して解説していきます。

一行目

今回はGoogleにアクセスした場合のHTTPプロトコルになっています。
まずGETと呼ばれるメソッド（サーバーに対してどうしたいのかという命令）を利用してアクセスし、「http://www.google.com/にアクセスしたい」という要求が記載されています。

Accept

これは、「こういったファイルをください」というものが明記されています。

User-Agent

これは、ブラウザが「私はこういったものです。」というものが明記されています。
ブラウザや使っているOSによってこの部分は変わってきます。参考としてはこれだけの種類があるとされています。https://qiita.com/kapiecii/items/093ffd6f0b09ad775250 

Accept-Encoding

ここでは、「どのような圧縮形式ならば、私の使っているブラウザは理解できる。」と明記しています。
今回では「gzip」というのをブラウザはHTTPプロトコルに明記しています。

Cookie

意外と知られていないこの「Cookie」。実は、サーバーに自分の保持しているCookieを接続先のコンピューターに対して「私はこんだけのデータを他に持っているぞ」ということを伝えています。

HTTPサーバー処理

接続先のコンピューターはこのHTTPリクエストを元にして、

「どうしたいのか？」「どこに行きたいとのか？」「どんなデータが欲しいのか？」を分析して、接続先のコンピューター内にそのすべての要求があるかを調査して答えてくれます。その際「どこに行きたいのか？」というものがない場合、404エラー「探したけどありませんでしたよ」という情報を送るようにしています。

また、すべての要求を満たした場合、必要に応じてPHPやRubyなどを動かし、HTMLに変換してブラウザに送るようにしています。

これらは、接続先のコンピューターにApacheやngixなどの「HTTPD(HTTP Daemon)サーバーアプリケーション」をインストールしていることが前提になります。

サーバーレスポンス

「HTTPプロトコル」「HTTPサーバー処理」を減て、接続先のコンピューターは下記のような情報（抜粋）を返すようにしています。

HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
    pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
P3P: CP="DSP LAW"
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
X-Cnection: close
Transfer-Encoding: chunked
Date: Fri, 10 Wed 2020 09:05:55 GMT

豆知識なるのですが…
よく、「アクセスが多すぎてサーバーがダウンする…」と聞くことがあるかもしれません。
そしてそれが静的のページだった場合このレスポンスに記載されている「Cache-Control:」の部分を「Cache-Control: public, max-age=604800, immutable」とすると、サーバーがダウンすることを回避できる方法の一つになったりします。

まとめ

今回ブラウザがサーバーにアクセスするまでをまとめてみました。
実際見ていくとそれぞれのステップごとにいろいろな作業があります。
次回は、ブラウザがサーバーから受け取ったレスポンスをどのように表示していくのかを解説していきたいと思います。