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

2020年2月15日システムプログラミング初心者

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

どうも、UT(@ut_1029)です。ホームページが表示される仕組みWebサイトに必要な技術などを解説して紹介します。

今回は、Webサイトが表示される仕組みについて解説します。プログラミング初心者は必見の内容です。記事作成においてQiitaの「 【PHP超入門】HTTP(GET・POST)について」を参考にしました。

前回の記事「【初心者】ホームページとは?Webサイトとホームページの違いについて解説」も是非ご覧ください。

知らない単語が出てきますが、まず最初は全体の流れを通して見るだけで大丈夫です。

この記事でわかる事

  • Webページが表示される仕組み
  • Webページ作成時に気をつけなくてはいけないこと
  • Webページを表示する際のHTTP通信の流れ
【インターネット基本】ホームページやWebサイトが表示される仕組みを解説〜プログラミング勉強〜
【Web講座】ホームページやWebサイトが表示される仕組みを解説〜HTTP通信〜

Webページ表示の仕組み

Webページブラウザで表示される仕組みについて紹介します。

ざっくりと言うと、

ブラウザ(クライアント)はWebページのデータをWebサーバから取得

してWebページは表示されています。

  • クライアント
    • みなさんのパソコン、スマホなどのブラウザをクライアントと呼びます。
  • Webサーバ
    • 簡単に言うと、HTMLファイルや画像ファイルなどが保存されているパソコンです。

それでは、もう少し深掘りしてみます

ブラウザは、WebページのデータをWebサーバリクエストを行います。そしてWebサーバブラウザレスポンスします。

この時ブラウザWebサーバは、HTTP通信でやりとりを行います。

  • リクエスト
    • ブラウザからWebサーバへ「Webページのデータをください」と要求すること
  • レスポンス
    • Webサーバブラウザからリクエストされた要求に答えて「Webページのデータを送ります」とブラウザへ渡すこと

HTTP通信とは

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

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

  • Hypertext(ハイパーテキスト)
    • ハイパーリンクで複数のWebデータを結びつける「文章を超える」機能です。
    • ハイパーリンクは、世界中のWebページを結びつける参照のことです。
  • Transfer(トランスファー)
    • 翻訳すると「転送」という意味です。
  • Protocol(プロトコル)
    • 規約または決まり事という意味です。

Webについての詳しい内容は「【初心者】ホームページとは?Webサイトとホームページの違いについて解説」で紹介したので、是非ご覧ください。

Webページ表示の流れ

次にブラウザWebサーバWebページが表示されるまでに行われるHTTP通信の流れを解説します。

例えば、表示するWebページHTMLが以下のコードだったとします。

<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>

上記HTMLの場合、Webページが表示されるまでのHTTP通信は以下の流れになります。

  1. ブラウザは、WebサーバWebページのHTMLリクエスト
  2. Webサーバは、WebページのHTMLブラウザレスポンス
  3. ブラウザは、HTMLを解釈
  4. ブラウザは、Webページの"犬の画像(/sample/dog.jpg)“をWebサーバリクエスト
  5. Webサーバは、ブラウザWebページの"犬の画像"をレスポンス
  6. ブラウザは、Webページの"猫の画像(/sample/cat.jpg)"をWebサーバリクエスト
  7. Webサーバは、ブラウザWebページの"猫の画像"をレスポンス
  8. ブラウザは、Webページを表示

ポイントは、「犬の画像」と「猫の画像」を別々にHTTP通信している点です。

Webページに表示する画像が2つあると、ブラウザWebサーバHTTP通信を2回行います。

つまりWebページを表示する際に

  • 画像が多いとWebページの表示に時間がかかる
  • 画像のデータが大きいとWebページの表示に時間がかかる

ということが言えます。

Webページを作成する際は、上記のことに注意しないといけません。

Webページ表示のHTTP通信

さらに深掘りしていきます。

ブラウザWebサーバHTTP通信リクエストレスポンスで送受信されるデータについて解説します。

HTTPリクエストヘッダの内容

HTTP通信においてブラウザWebサーバリクエストを行う際のデータ(HTTPリクエストヘッダ)は、以下のような内容です。

GET http://localhost/sample/index.html HTTP/1.1
Host: localhost
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://localhost/
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
GET http://localhost/sample/index.html HTTP/1.1

このHTTPリクエストヘッダの一行目の記述について解説すると

HTTPメソッドはGETメソッドで、HTTP/1.1のバージョンを使ってhttp://localhost/index.htmlのファイルを要求します

という意味になります。

HTTPメソッド

  • GETメソッド
    • リソースをWebサーバへリクエストする
  • POSTメソッド
    • データをWebサーバへ送信する
  • HEADメソッド
    • HTTPヘッダのみをWebサーバへリクエストする

HTTPレスポンスヘッダの内容

HTTP通信においてWebサーバブラウザレスポンスする際のデータ(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>
HTTP/1.1 200 OK

このHTTPレスポンスヘッダの一行目の記述について解説すると

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

という意味になります。

HTTPステータスコード

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

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

正常にWebページが表示される場合は、通常2XXが返ってきます。

標準化団体 (コンピュータと通信)

Webページが表示されるHTTP通信について紹介しました。

最後にインターネットに関する決まりごとをまとめた団体などを紹介します。
フリー百科事典『ウィキペディア(Wikipedia)』 – 標準化団体 (コンピュータと通信)

IETF

Internet Engineering Task Forceの略。

IETFとは、インターネットにおける技術の標準化を推進する組織です。

RFC

Request For Commentsの略。

RFCとは、IETFで決定された規格や決まりごとをまとめた文章です。RFC文書といいます。
※各規格にはRFC 2616のような通し番号で表記されています。

まとめ

【初心者】ホームページとは?Webサイトが表示される仕組みについて解説
【初心者】ホームページとは?Webサイトが表示される仕組みについて解説

今回は、Webページが表示されるまでの仕組みや流れ、HTTP通信などについて解説しました。こういった知識はプログラミングを行う際に知っておくべき知識です。

なぜなら

  • Webページの表示速度が遅い
  • Webページが正しく表示されない

などの原因調査および改善を行います。そうした時に仕組みを知っておくことで速やかに対応を行うことができます。

プログラミングだけ勉強するのではなく、仕組みなどを理解しておくこともとても重要です。

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年2月15日システムプログラミング初心者

Posted by UT