HTTP通信の仕組みと流れ

# はじめに
TCP/IPを基盤として使用している現代において、HTTP通信を理解することはとても重要です。
クライアントサーバーモデルにおいて、相手に情報を要求するリクエスト、相手から情報を取得するレスポンスというデータのやり取りにHTTP通信が使用されており、これにより、わたしたちはWebページを見たり、自分専用のアカウントでショッピングを楽しめたりします。
本記事では、HTTP通信とHTTPメッセージについて、わかりやすくまとめていきます。

## HTTPとは
HTTP（HyperText Transfer Protocol）とは、インターネット上でWebブラウザとWebサーバーの間で情報をやりとりするためのルール（プロトコル）のことを指します。
ブラウザとサーバーで使用するルールが異なると、違いに違うルールの元で通信を行なうこととなってしまい、不具合が発生してしまいます。
そこで、共通のルール（プロトコル）を使用することで、円滑な情報のやり取りを可能にします。

なお、HTTPはステートレス（状態を持たない）プロトコルであるため、1回のリクエスト・レスポンスで通信は終了し、前回のやりとりは記憶されません。
そのためログイン情報のような「状態」を保つためには、Cookieやセッションなどの技術が併用されます。


## HTTPメッセージとは
実際に、WebブラウザとWebサーバーが通信するときにやり取りされる情報のかたまりのことです。
ブラウザがサーバーにリクエスト（要求）し、サーバーからレスポンス（応答）を伝えるために実際に使用されているのがHTTPメッセージです。
私たちの身近なところで、「手紙」がこのHTTPメッセージに例えることができます。
相手とメッセージを行なう際に実際に使われている媒体です。これと同じ役割をHTTPメッセージは果たしています。


## HTTPリクエストとは
HTTPリクエストとは、Webブラウザやアプリケーションがサーバーに「こういう情報が欲しいよ」「このデータを送るよ」とお願いする通信のことです。
Webサイトを見たり、フォームを送信したりすると、裏側ではこのHTTPリクエストがやり取りされています。

### HTTPリクエストの構成
![Image 2025-04-20 at 16.52.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907600/a893decb-be0d-4cf0-8e10-4be736e73cbe.jpeg)

※ https://atmarkit.itmedia.co.jp/ait/articles/1508/31/news016_3.html より

HTTPリクエストは4つの構成要素から成り立っています。

**① リクエストライン**
リクエストの「種類・対象・HTTPバージョン」を一行で指定します。
```sh:例
GET / index.html HTTP/1.1
```
・種類：GET（何をしたいか）
・対象：index.html（リクエスト対象のパス、どこにあるか）
・HTTPバージョン：使用するHTTPバージョン

**② リクエストヘッダ**
クライアントが送る追加情報（メタデータ）です。1行ずつ「キー: 値」の形式で書かれます。
```sh:例
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
...
```
キーに該当する部分は**ヘッダ名**といいます。
・Host: サーバー名。HTTP/1.1では必須
・User-Agent: ブラウザやアプリの種類
・Accept: 受け入れ可能なレスポンスの形式（HTML, JSONなど）

その他ヘッダとして、ボディの長さ（バイト数）を表す`Content-Length`やボディに含まれるデータの形式を表す`Content-Type`などがあります。

**③ 空行**
ヘッダの終わりとボディの始まりを区切るための1行です。
これがあることにより、ヘッダとボディを区別できます。

**④ メッセージボディ**
リクエスト時に送信するデータの中身のことです。
GETメソッドでは通常使用されず、POSTメソッドで使用されます。

※ただし、厳密にはHTTPのバージョンによってフォーマットが異なります。上記ではHTTP/1.1の場合を記載しています。


## HTTPレスポンスとは
クライアントから送信されたリクエストをサーバーが処理して、その処理結果をクライアントに返信する応答のことを指します。
HTTPリクエストでブラウザから送信されたデータを使用して、サーバーは処理を行ない、結果をレスポンスとして返します。

### HTTPレスポンスの構成
![Image 2025-04-20 at 16.55.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907600/083461a0-8807-4e9d-9d76-9f629b73356a.jpeg)
※ https://atmarkit.itmedia.co.jp/ait/articles/1511/27/news013.html より

HTTPリクエストと同様に、HTTPレスポンスも4つの構成要素から成り立っています。

**① ステータスライン（Status Line）**
レスポンスの結果（ステータスコード）と説明を表す1行目です。

```sh: 例
HTTP/1.1 200 OK
```

・HTTP/1.1: HTTPのバージョン
・200: ステータスコード（成功）
・OK: ステータスメッセージ（人向けの説明）

**② レスポンスヘッダ**
レスポンスに関する情報（メタデータ）が1行ずつ「キー: 値」で書かれています。
```sh: 例
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Set-Cookie: sessionid=abc123; Path=/; HttpOnly
...
```
・Content-Type: 返すデータの種類（HTML, JSONなど）
・Content-Length: ボディのバイト数
・Set-Cookie: クッキーの設定（ログイン情報など）

**③ 空行（Blank Line）**
ヘッダとボディを分けるための空行です。

**④ メッセージボディ**
ブラウザやアプリに表示・使用されるデータの本体です。
HTMLページ、JSONデータ（APIの場合）、画像や音声などのバイナリ、ダウンロードファイルなどが格納されます。


## HTTP通信フロー
![Image 2025-04-20 at 17.11.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907600/d925ee43-8e0a-44d2-a3b0-4944a863541e.jpeg)
※ https://shukapin.com/infographicIT/http より

上記のようにHTTPプロトコルを使用して、ブラウザとサーバーが互いにHTTPメッセージのやりとりを行なうことで私たちはWebページを見ることができます。

### 3wayハンドシェイク
HTTP通信では前準備として、TCPプロトコルによって通信経路を確立します。
なぜなら、HTTP通信はTCPの上に成り立つプロトコルであるためです。

クライアント（ブラウザなど）がサーバーとHTTPで通信するには、まずTCPで接続を確立する必要があり、その際に使用される接続手順を**3wayハンドシェイク**といいます。

![Image 2025-04-20 at 17.15.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3907600/e4ac2fb6-b026-4a6d-a118-32bbaf134f88.jpeg)
※ https://shukapin.com/infographicIT/http より

信頼できる通信経路をつくるための3段階の通信手順を行ないます。
① クライアント → サーバー ： SYN（接続要求）
② サーバー → クライアント ： SYN-ACK（接続許可と応答）
③ クライアント → サーバー ： ACK（確認応答）
この3ステップを終えると、TCPのコネクションが確立されるので、その後にHTTPリクエストが送れるようになります。
TCPは信頼性を重視しているため、お互いに確認が取れることで通信の土台を作ります。

# まとめ
HTTP通信が成立するための手順や、HTTPメッセージの構成についてまとめました。
HTTP通信はWebの土台とも言える技術で、基本構造を理解することで「なぜこう動くのか」が見えてきます。
これを押さえておくと、Web開発はもちろん、セキュリティやAPI設計にも大きく役立つといえるでしょう。

最後までお読みいただき、ありがとうございました。

# 参考・画像引用元URL
https://shukapin.com/infographicIT/http
https://envader.plus/article/506
https://programmer-life.work/html_css/html-request
https://atmarkit.itmedia.co.jp/ait/articles/1508/31/news016_3.html
https://atmarkit.itmedia.co.jp/ait/articles/1511/27/news013.html
『』