Webサイトが表示される仕組みについて解説【Web基礎講座】

2020年2月15日プログラム知識

Webページが表示される流れを解説
Webページが表示される流れを解説

みなさんはWebページが表示される流れについて知っていますか?

ブラウザがHTMLを表示しているんじゃないの?

その通りです。

では、ブラウザはHTMLをどこから受け取っているのでしょうか?

ユート

この記事ではWebページが表示される仕組みについて簡単に解説を行います。

特にWebページを作る人で「デザイナー」や「プログラマー」は、ぜひ読んでください!

仕組みを理解すると

  • Webページの表示速度を改善
  • Webページが表示されないトラブル

などの調査や対応が出来るようになります。

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

まず知っておくことは、

ブラウザはWebページを表示するためにサーバと通信している

ということです。

サーバと通信というと?

ブラウザにWebページが表示されるまでの流れについて解説します。

Webページが表示されるまでの流れ(フロー図)

HTMLからWebページが表示されるまでの流れを図を使って解説します。(流れは簡略化しています)

サーバ間の流れは「図で表現する」と理解しやすいです。

簡単なWebページが表示される流れを表したフロー図
簡単なWebページが表示される流れを表したフロー図

このフロー図を見ると、ブラウザはWebサーバと通信を行ってWebページを表示していることがわかります。しかも何度も通信しています。

URL入力

まずブラウザに表示するWebページのURLを入力します。

HTMLを取得

ブラウザはWebサーバからHTMLを取得します。例として次のようなHTMLだとします。

<html>
	<head>
		<meta charset="UTF-8">
		<title>HTTP通信を解説</title>
	</head>
	<body>
		<h1>HTTP通信を解説</h1>
		<ul>
			<li><img src="https://hoge.com/sample/dog.jpg" alt="犬の画像"></li>
			<li><img src="https://hoge.com/sample/cat.jpg" alt="猫の画像"></li>
		</ul>
	</body>
</html>

HTMLを解釈

ブラウザは取得したHTMLを解釈します。

画像を取得

ブラウザはWebページを表示するために必要な画像を取得します。

<ul>
	<li><img src="https://hoge.com/sample/dog.jpg" alt="犬の画像"></li>
	<li><img src="https://hoge.com/sample/cat.jpg" alt="猫の画像"></li>
</ul>

Webページを表示

そしてブラウザはWebページを表示します。

Webページが表示される流れのポイント
  • ブラウザはWebページを表示するために必要な画像などをWebサーバから個別に取得する。
  • なので、画像やスタイルシートなどWebページ表示に必要なファイルが多いと「表示速度が低下」します。

WebサーバとブラウザがデータをやりとりするHTTP通信

では、もう少し深堀してWebサーバとブラウザはどうやってデータをやりとりしているか解説します。

Webサーバとブラウザは、HTTP通信を使ってデータをやりとりしています。

HTTP通信って何か聞いたことあるけど、難しそう💦

通信と聞くと難しそうって感じまいますよね💦

HTTP通信を簡単に言うと「データのキャッチボール」です。

では、HTTP通信について解説します。

HTTP通信とは

HTTPとは、Hypertext Transfer Protocolの略です。

HTTPを簡単に言うと「ハイパーテキストでWebデータをやり取りする時の決まり事」です。

  • Hypertext
  • Transfer
  • Protocol

例えばブラウザとWebサーバで

ブラウザ「Webサーバ、HTML頂戴!」

Webサーバ「はい、HTML」

と互いに「HTTP通信で要求(リクエスト)と応答(レスポンス)のやりとり」を行っています。

Webサーバとブラウザで「データのキャッチボール」を行っているイメージです。

そしてHTTP通信でやりとりされるデータは「“HTTPリクエスト"と"HTTPレスポンス"というデータ」を使って通信されます。

では、ヘッダデータの中身をみていきましょう。

HTTPリクエストヘッダ

HTTPリクエストヘッダは、HTTP通信で要求(リクエスト)を行う際に使います。

データはこんな感じです。

GET http://hoge.com/sample/index.html HTTP/1.1
Host: hoge.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://hoge.com/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: ja,en-US;q=0.8,en;q=0.6,ru;q=0.4,zh-CN;q=0.2,zh;q=0.2,fr;q=0.2,it;q=0.2,zh-TW;q=0.2,pt;q=0.2

英語がずらっと並びます💦

注目するのは1行目で、他の情報はHTTP通信に関する補足情報的な内容です。

GET http://hoge.com/sample/index.html HTTP/1.1

この1行目で

「GETメソッドでHTTP/1.1のバージョンを使って"http://hoge.com/sample/index.html"を要求します」

とリクエストしています。

HTTPレスポンスヘッダ

HTTPレスポンスヘッダは、HTTP通信において返答(レスポンス)する際に使います。

データはこんな感じです。

HTTP/1.1 200 OK
Content-Type: text/html
Last-Modified: Fri, 10 Jun 2016 11:01:38 GMT
Accept-Ranges: bytes
Vary: Accept-Encoding
Server: Microsoft-IIS/8.0
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcaGFrb3pha2lcRG9jdW1lbnRzXE15IFdlYiBTaXRlc1xuZWtvXG5la28uaHRtbA==?=
X-Powered-By: ASP.NET
Date: Mon, 25 Jul 2016 13:51:45 GMT
Transfer-Encoding: chunked

<html>
	<head>
		<meta charset="UTF-8">
		<title>HTTP通信を解説</title>
	</head>
	<body>
		<h1>HTTP通信を解説</h1>
		<ul>
			<li><img src="/sample/dog.jpg" alt="犬の画像"></li>
			<li><img src="/sample/cat.jpg" alt="猫の画像"></li>
		</ul>
	</body>
</html>

レスポンスヘッダも英語が続きます。

が、レスポンスヘッダも1行目に注目します。

HTTP/1.1 200 OK

この1行目で

「HTTP/1.1のバージョンで要求されたリクエストは正常でした」

とレスポンスしています。そしてHTMLを渡しています。

あと、200という数字をHTTPステータスコードといいます。

HTTPステータスコード

HTTP通信のリクエストに対するレスポンスの状態を番号で表記しています。このHTTPステータスコードを確認することでHTTP通信の状態を知ることが出来ます。

  • 1XX
    • Information(情報)
    • リクエストを受け取れた。処理は継続される。
  • 2XX
    • Success(成功)
    • リクエストを受け取れた。レスポンスを返した。
  • 3XX
    • Redirection(リダイレクション)
    • リクエストを完了する為に追加処理が必要。
  • 4XX
    • Client Error(クライアントエラー)
    • クライアントのリクエストに誤りがある。
  • 5XX
    • Server Error(サーバエラー)
    • サーバがリクエスト処理に失敗した。

HTTP通信は危険?だからHTTPSを使う

実はHTTP通信はセキュリティ面において良くありません。

それはHTTP通信でやりとりされるデータを誰でも簡単に見る事ができます。

HTTP通信は簡単にChromeのデベロッパーツールで見る事ができます。またネットワーク機器を使う事で覗き見も容易にできます。

HTTPS通信では、暗号化したデータをやりとりします。

なので、昨今のWebページでよく使われるHTTPS通信が主流となっています。

まとめ:Webページが表示される流れを解説

今回はWebページが表示される流れについて解説しました。

Webページが表示される流れ
  • ブラウザはWebページを表示するために必要な画像などをWebサーバから個別に取得する。
  • ブラウザとWebサーバはHTTP通信でデータをやりとりしている。

Webサイトの作成自体に必要な知識ではありませんが、トラブル対策などの調査や解決に役立ちます。

こうした知識を得る事で脱初心者となります!

最後まで読んでもらいありがとうございます。

【インターネット基本】ホームページやWebサイトが表示される仕組みを解説〜プログラミング勉強〜
【Web講座】ホームページやWebサイトが表示される仕組みを解説〜HTTP通信〜
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
プロフィール
Amazon欲しいものリスト

2020年2月15日プログラム知識

Posted by ユート