今さら人に聞けないWebの仕組み

Webページを表示するために、ブラウザはHTMLを一生懸命読んでいる！？【第5回】

Webページを表示するために、ブラウザとサーバーとパソコンは一体何をしているのでしょうか？今回はWebページが表示されるまでの仕組みを紹介します！

石井研二（MILS） 2019/3/6 7:00 Web担当者／仕事 | 解説／ノウハウ

85 63 15

皆さんは、何かわからないことがあったらスマホで調べよう！と検索しますか？

スマホを持つことが当たり前になった現在では、ブラウザ（パソコンやスマホ上で使う、Webページを見るためのソフト）で検索することが日常になりました。

でも、一体どういう仕組みでWebページが表示されるのでしょうか？

今回は、パソコンでブラウザを立ち上げてWebページを見るときの仕組みについて解説していくことにしましょう。

サーバーは一生懸命HTMLを上から読んで表示している

リクエスト信号は「自己紹介」情報を持って飛んでいく？

ブラウザはサーバーから飛んできたHTMLを読み込んで解釈し、ブラウザの窓に描画しています。

普通のタグで言えば、<b>と書いてあったらその後ろを太字にする。</b>という印が出てくるまで太字を続ける、というのが解釈と表現の基本です。

では、ブラウザがWebページを表示するまでのステップを見ていきましょう。

まず、私たち人間が「このWebページを見たい」と考えたときは、ブラウザのアドレス欄にURLを記入するか、すでにブラウザに表示されたハイパーリンクをクリックするかの大体どちらかです。

（検索エンジンで検索して、という場合は、検索エンジンが検索結果にリンクを入れてくれるので、それをクリックするだけで良いのです）

記入されたURLや、クリックされたハイパーリンクに指定されたhref（エイチレフ）は、ブラウザからパソコンが準備する環境を通ってインターネットの世界に飛び出していきます。

※私がURLとかhrefとか、ややこしい言葉をあまり説明なく使う場合は、この連載の前の回でご説明した言葉なので、そちらもご覧くださいね。第4回参照

ホワイトハウスのサイトが見たい場合は、


https://www.whitehouse.gov/

というのがリンクの裏にhrefとして記入されています。

アドレス欄に直接記入する場合は、「whitehouse.gov」とドメインを書くだけでちゃんと「https//www」に飛んで行って、一番上階層の「/」を見に行ってくれます。これはブラウザやサーバーが我々のアクションを補助してくれているのですね。

最後の「/」は、サーバー上の最上位階層を意味するものです。多くの場合、ここには「index.html」というトップページを見たい、という指示が略されています。

index.phpやindex.plなど、実際にはHTMLではないプログラムファイルである場合もあります。でも、「/」で見に行けばサーバーが適切なファイルを選んで送り出してくれるので、私たちは拡張子のことなど忘れていられます。素晴らしい仕組みですね。

さて、ブラウザから出たリクエスト信号は、インターネットの世界に出ていきます。DNSというシステムに聞き合わせながらインターネットを進み、目指すサーバーにたどり着きます。

リクエスト信号はDNSに聞き合わせて進む（第4回から再掲）

ただ、リクエスト信号は自己紹介もなくいきなり飛んで行ってサーバーに「このデータを出せ！」と要求するわけではありません。HTTPヘッダー、と言われる自己紹介データを持って飛ぶのです。

そこにはこんなことが書かれています。

GET / HTTP/1.1

HTTPのバージョン1.1のルールで、Getという方法で「/」を見たい。

Mozilla/5.0 (iPhone; CPU iPhone OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1

私はiPhoneのSafariというブラウザなんですけど、怪しい者ではありませんので見せてほしいのですが……。

と、なかなか礼儀正しいリクエスト信号君であります。

先頭に「Mozilla」とあるのは、ネットスケープのことです。なぜサファリなのにネットスケープと名乗っているんでしょう？

ブラウザが出始めた1994年ごろにはネットスケープというブラウザが90％以上のシェアを持っていました。ネットスケープはのちにMozilla Firefoxとなりますが、当時からコードネームはMozilla。

当時、怪しいアクセスでサーバーの中を覗きに来るようなリクエストがたくさんありました。だから、「Mozillaと名乗っていないリクエストは全部はじく」と決めているサーバーが世界中にあったのです。

そのため、Mozillaと名乗らないとサーバーが情報を出してくれなかったので、ちょっと後発のマイクロソフト Internet Explorerでさえ、Mozillaと名乗っています。

そして現在、Safariも、Googleの検索ロボットGooglebotも、Bingbotも、みんなMozillaを名乗っています。全員Mozillaを名乗ったらまったく意味がありませんが、いまだにみんなで「私はMozillaです」と言うしきたりになっています。完全に「ウソ」ですが、まさにウソも方便です。

ちなみにMozillaは「モジラ」と読みます。ゴジラみたいな恐竜のイメージです。昔はかわいい緑の恐竜のイラストがあったのですよ。

Webブラウザ年表〔図5-1〕

正常なら「200 OK」、見当たらないと「404」！

丁寧に自己紹介したリクエスト信号に対して、サーバーは「はいはい、そのファイルならここにありますよ」と、「/」の場所にあるファイル（たいていindex.htmlという名前です）のデータを送り出してくれます。

このとき、サーバーはブラウザへの返事をヘッダーという形でつけておき、データを送り出します。

その返事の書き出しはこうなっています。

HTTP/1.1 200 OK

OK!と言って送り出してくれるサーバーもなかなか気立ての良いやつであります。この「200」がリクエストに対して正常に対応して終了した、ということを表す記号で、ステータス(状態)コードと呼ばれます。

ステータスコードで「200」の他に覚えておきたいのは

404 Not Found　リクエストされたURLが見当たらない
403 Forbidden　そのファイルはアクセスが禁止されている！
304 Not Modified　前に見た時から変わっていない

などがあります。

リクエスト信号とサーバーのやりとり〔図5-2〕

「304」という返事が戻ってきたら、「前にアクセスしたときからページの内容が変わっていないのなら」とブラウザは自分の覚えているキャッシュから表示を始めます。もう一度サーバーからデータが送られてくるよりも早いので、前に見たことのあるページは素早く表示されるのです。

こうしたブラウザとのやり取りについて、サーバーは全部記録をとっています。この記録のことを「ログ」と言って、これがあったのでアクセス解析という分野が生まれたのですね。

ブラウザとサーバーの無限の会話でページが表示されます！

こうしたやり取りの末にブラウザにデータが飛んできました。ここからブラウザはまずHTMLのヘッダーを読み込みます。

HTMLという文書は便せんのように「ヘッダー」と「ボディ(本文)」からできていて、書式としては


　<html>
　　<head>
　　</head>
　　<body>
　　</body>
　</html>

のようになっています。

実際にブラウザの窓に表示されるのは「ボディ」の部分だけで、「ヘッダー」部分はブラウザに大切な指示を与えるために使われます。

だから、HTMLが飛んできたら、まずブラウザは落ち着いてヘッダーを読み込み、それから本文部分の読み込みを始めます。長いHTMLを上から順番に読んでいくので、Webの表示にはまあまあ時間がかかるのですね。

上から順番に読んでいくと、HTMLには描画に必要な別ファイルの指定がいろいろ書かれています。^※1CSS（Cascading Style Sheets）や^※2JavaScriptのようにレイアウトや動作を決めるファイルもあれば、画像や動画のようにそれ自体を表示しないといけないものもあります。

※1　カスケーディング・スタイル・シート。ウェブページのスタイルを指定するための言語。

※2　Webサイトに動きをつけるプログラミング言語。

読んでいくうちに「あ、ここに画像の指定が書いてある」と気が付いたブラウザは、サーバーにまたリクエストを送ります。サーバーは「はいはい、その画像はここにありますよ」と送り出します。

何しろブラウザは上から順番に読んでいくので、「また画像があった！」とそのたびにリクエストをサーバーに送ります。

サーバーも「いっぺんに言ってもらえませんか」と文句も言わず、律義に順番にデータを返してくれます。

1997年ごろはWebページがシンプルで、1つのHTMLに画像が平均5点指定されているだけでした。

今ではCSS、JavaScriptが3つずつ、画像が平均47点、その他にGoogleアナリティクスの計測タグ、Webフォント、ソーシャルメディアのガジェットなどなど、無数の関連情報がぶら下がっています。

こうしてブラウザとサーバーの無数の会話の末にようやく1つのページが表示されます。

ブラウザとサーバーの無限の会話〔図5-3〕

これらを読み込まなければ表示が完了しないので、ものすごく待たされるケースが発生してしまうのですね。特に、HTMLとは別のサーバーにデータをとりに行くWebサービスには待たされることが多いです。ブラウザの左下の窓枠を見ていると「これを呼び出しています」「待っています」なんてブラウザの愚痴が表示されることがあります。

これは笑い事ではなく、表示が遅いと離脱率が高まります。きれいなサイトをつくったのに、お客さんがみんな帰ってしまうのでは意味がないですよね。回線が早くなったから、と油断せず、できるだけ表示の早いWebにするようにWeb担当者の皆さんは心がけていただければ幸いです。

こうしたリンクファイルについては次回から詳しく解説していきます。