Webサイトが表示される仕組みについて解説【プログラミング初心者の入門講座】

2020年2月15日システムプログラム入門

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

どうも、UT(@ut_1029)です。

Webに関する知識で「Webページが表示される流れ」について解説します。

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

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

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

その通りです。

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

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

この記事でわかること
  • ブラウザにWebページが表示される仕組みと流れ
  • ブラウザとWebサーバがやりとりしているデータについて

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

例えば

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

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

ブラウザがWebページを表示するまでの仕組みを理解すると初心者から脱却できます。

まず知っておくことは、

ブラウザは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サイトが表示される仕組みを解説〜プログラミング勉強〜
プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

【Web講座】ホームページやWebサイトが表示される仕組みを解説〜HTTP通信〜
UT
UTの日常
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年2月15日システムプログラム入門

Posted by UT