【Web開発の基本】HTTPリクエスト／レスポンスの仕組み | トンボのようにまっすぐ進んでいたい

通常のWebサイトやWebサービスでは、通信にHTTPというプロトコルを用いて通信をしています。
この記事ではHTTP通信の仕組みについてまとめます。

Contents

1 HTTPとは？
2 HTTPリクエスト
3 HTTPレスポンス

HTTPとは？

HTTPとはHyperText Transfer Protocolの略で、クラアントとサーバの間のデータ送受信に用いられるプロトコル（決まりごと）です。

ざっくり説明すると、クライアントは普段皆さんが使っているPCを想像するとわかりやすいです。そのクライアントPCから受けた要求に応えて、Webページなどのデータを返してくれるのがサーバです。

Webサイトを閲覧するために、普段何気なく検索エンジンを使って検索していると思いますが、その場合もブラウザを通してサーバに対してHTTPリクエストを送っていて、サーバがデータを返してくれるおかげで目的のWebページが閲覧できるようになっています。

さらに、クライアントがサーバに要求する場合の通信をHTTPリクエスト、サーバが要求に応えてクライアントにデータを返す場合の通信をHTTPレスポンスといいます。

HTTPリクエスト

HTTPリクエストはHTTPリクエスト行、HTTPリクエストヘッダー、データ本体の3つの領域で構成されています。

HTTPリクエスト行

HTTPリクエスト行は、HTTPメソッド、URL、プロトコルバージョンで構成されます。
例として、このブログTOPページへのHTTPリクエスト行は以下のようになります。

GET　/skillup-blog.com　HTTP/2

GET: HTTPメソッド
/skillup-blog.com: URL
HTTP/2: プロトコルバージョン

HTTPメソッド

HTTPメソッドにはGET、POSTなどがあり、WebコンテンツにおけるCRUD操作が可能です。
通常のWebページなどのデータやり取りにおいては、使用されるHTTPメソッドはGETがほとんどです。

HTTPメソッドとCRUD操作の対応関係は以下の通りです。

HTTPメソッド	意味	CRUD
POST/PUT	作成	Create
GET	読み込み	Read
PUT	更新	Update
DELETE	削除	Delete

プロコトルバージョン

現在、HTTPの最新バージョンはHTTP/2です。
まだHTTP/1系も使われていますが、現在ではHTTP/2が主流になりつつあります。

HTTPリクエストヘッダ

HTTPヘッダは、ホスト名、User Agent、コンテンツタイプ、クッキー情報などで構成されています。
以下に、HTTPリクエストヘッダの例を示します。

Host: localhost:8000　// ホスト名
User-Agent: Mozilla/5.0 (Macintosh;… ) … Firefox/51.0　// User Agent
Accept: text-html,application.xhtml+xml,…, */*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encodeing: gzip, deflate
Cookie: cookie=cookie1; cookie=cookie2　// クッキー情報
Content-Type: text/html; charset=UTF-8　// コンテンツタイプ
…

コンテンツタイプ

コンテンツタイプには以下のようなものがありますね。
MIMEタイプ形式の情報の型の指定や文字コードなどの情報も含まれます。
参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type

text/html; charset=UTF-8
application/json
image/png
multipart/form-data

データ本体

POST形式で送信する場合などで、送信するデータがここに付属します。
Content-Type属性で指定した形式でデータのやり取りが行われます。

HTTPレスポンス

HTTPレスポンスは、ステータス行、HTTPレスポンスヘッダ、データ本体から構成されています。

ステータス行

HTTPレスポンスの最初に付与され、以下の情報を持っています。

プロトコルバージョン
ステータスコード
ステータス文字列

例としては、以下のような構成になります。

HTTP/2 404 Not Found.

HTTP/2: プロトコルバージョン
404: ステータスコード
Not Found.: ステータス文字列

HTTP/1.1 200 OK.

HTTP/1.1: プロトコルバージョン
200: ステータスコード
OK.: ステータス文字列

ステータスコード

ステータスコードの採番ルールは以下の通りです。

情報レスポンス（100番台）
成功レスポンス（200番台）
リダイレクトメッセージ（300番台）
クライアントエラーレスポンス（400番台）
サーバエラーレスポンス（500番台）

代表的なステータスコードとステータス文字列の一覧を以下に載せます。
個人的に特によく使うものは太字で表示しています。

分類	ステータスコード	ステータス文字列
情報レスポンス (100番台)	100	Continue
	101	Switching Protocols
	103	Early Hints
成功レスポンス (200番台)	200	OK
	201	Created
	202	Accepted
	203	Non-Authoritative Information
	204	No Content
	205	Reset Content
	206	Partial Content
リダイレクトメッセージ (300番台)	300	Multiple Choices
	301	Moved Permanently
	302	Found
	303	See Other
	304	Not Modified
	307	Temporary Redirect
	308	Permanent Redirect
クライアントエラーレスポンス (400番台)	400	Bad Request
	401	Unauthorized
	403	Forbidden
	404	Not Found
	405	Method Not Allowed
	406	Not Acceptable
	407	Proxy Authentication Required
	408	Request Timeout
	409	Conflict
	410	Gone
	411	Length Required
	412	Precondition Failed
	413	Payload Too large
	414	URI Too Long
	415	Unsupported Media Type
	416	Range Not Satisfiable
	417	Expectation Failed
	418	I'm a teapot
	422	Unprocessable Entity
	425	Too Early
	426	Upgrade Required
	428	Precondition Required
	429	Too Many Requests
	431	Request Header Fields Too Large
	451	Unavailable For Legal Reasons
サーバーエラーレスポンス (500番台)	500	Internal Server Error
	501	Not Implemented
	502	Bad Gateway
	503	Service Unavailable
	504	Gateway Timeout
	505	HTTP Version Not Supported
	506	Variant Also Negotiates
	507	Insufficient Storage
	508	Loop Detected
	510	Not Extended
	511	Network Authentication Required

スタータスコードの詳細は、mozillaのドキュメントが参考になります。
参考：https://developer.mozilla.org/ja/docs/Web/HTTP/Status

HTTPレスポンスヘッダ

HTTPレスポンスヘッダは、HTTPリクエストヘッダと同様にサーバ情報、コンテンツタイプ、クッキー保存指示などで構成されています。

Date: Thu, 31 Dec 2020 15:12:33 GMT
Server: Nginx　// サーバ情報
Connection: close　
Content-Type: text/html; charset=UTF-8　// コンテンツタイプ
Set-Cookie: cookie=yummy-cookie　// クッキー保存指示
…