Web初心者でもしっかり押さえておきたい「HTTPの基礎」


![Frame 401.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982981/4e38763c-73ec-336c-0354-d37328ac41b4.png)

# HTTPをざっくり理解しよう

ITの現場では、Webの通信を扱ううえで避けて通れないのが **HTTP** です。

:::note warn 会話ブロック
🐬「HTTPってよく聞くけど、実のところどういうものなんですかぁ？」

🐚「ボクもなんとなく知ってはいますけど、しっかり説明するとなるとちょっと不安かもしれないです」
:::


## HTTPとは？

**HTTP**（**H**yper**t**ext **T**ransfer **P**rotocol）とは、以下の用語を含むWeb通信の取り決めです。

- **HyperText（ハイパーテキスト）**：文章中にリンクを埋め込むことで、他の情報に素早くアクセスできるテキスト形式のこと。
- **Transfer（転送）**：データを送ったり受け取ったりする動作のこと。
- **Protocol（プロトコル）**：通信を行う際のルールやお約束事を意味します。

つまり、HTTPとはWebブラウザとWebサーバーがこれらのルールに基づいてデータをやり取りするための規約です。


### HTTPリクエストとレスポンス

たとえば、あなたがブラウザでWebサイトを開こうとすると、まずブラウザ（クライアント）がサーバーに「ページをちょうだい！」とサーバーに**HTTPリクエスト**を送ります。
サーバーはそのリクエストを受け取って中身を確認し、対応するWebページなどを**HTTPレスポンス**として返します。

#### 用語解説

```text
+------------+          Request         +------------+
| Client     | -----------------------> |  Server    |
+------------+ <----------------------- +------------+
                       Response
```


- **クライアント（Client）**: ブラウザなどのリクエストを送る側
- **サーバー（Server）**: リクエストを受け取り、レスポンスを返す側
- **リクエスト（Request）**: ブラウザなどのクライアントからサーバーに送られる情報
- **レスポンス（Response）**: サーバーからクライアントに返ってくる情報


#### リクエストの流れ

1. **ブラウザ（クライアント）** からサーバーへアクセスする。
2. `GET /index.html HTTP/1.1` のように、**メソッド**や**パス**、**HTTPバージョン**などを指定してデータを取りに行く。これがHTTPリクエストです。
3. サーバーがリクエストを処理し、レスポンスを返す。

#### レスポンスの流れ

1. サーバーは「OK、これがindex.htmlだよ」といった形で**ステータスコード**（例：200 OK）を含んだレスポンスを返す。
2. レスポンスにはHTMLなどの **本文（ボディ）** も入っていて、ブラウザはそれを受け取って画面に表示する。


:::note warn 会話ブロック

🐬「例えば出前アプリを利用する時に、アプリで料理の注文を送信するのがリクエスト！」

🐚「そしてそのリクエストに対して店舗が料理を準備して配達されるというレスポンスが返ってくる流れですね！」
:::

### HTTPメソッド

HTTPで使われる代表的な**メソッド**（クライアントがサーバーに行いたい動作を示す命令）には以下のようなものがあります。

| メソッド | 主な用途                                        |
|:--------:|:-----------------------------------------------:|
| **GET**  | データ（主にページ）を取得する                  |
| **POST** | データをサーバーに送信して処理を依頼する        |
| **PUT**  | サーバー上にあるデータを更新または新規作成する  |
| **DELETE**| サーバー上のデータを削除する                  |

リクエストの先頭に「GET /example.html HTTP/1.1」のように書いて、 **「どのデータをどうしてほしいか？」** をサーバーに伝えます。

:::note warn 会話ブロック

🐬「**POST**が手紙を投函するイメージだとすると、**GET**は逆に郵便ポストから手紙を受け取るイメージですかねぇ？」

🐚「そんな感じだと思います！行き先と、何をしたいかを指定するわけですね」

:::


### ステータスコード

サーバーが返してくるレスポンスには、**ステータスコード**という数字が含まれます。これによって、リクエストが成功したかどうかがわかります。

- **200 OK** : リクエストが成功
- **404 Not Found** : リクエストされたページが見つからない
- **500 Internal Server Error** : サーバー側で何らかのエラーが起きた

:::note warn 会話ブロック

🐚「`404`は見たことある人も多そうです！ 『ページが見つかりません』ってやつですね」

🐬「検索結果のページが消えてたときに見た記憶がありますぅ」

:::

### HTTPヘッダーとボディ

#### ヘッダー(Header)

HTTPリクエストやレスポンスには、追加情報を持たせるために**ヘッダー**と呼ばれる部分が含まれます。
具体的には、**相手に伝えておきたい設定や条件**などを記載します。

たとえば、
- **Host**: アクセス先のホスト名（例：example.com）
- **User-Agent**: ブラウザやOSなどの情報
- **Content-Type**: 本文の形式（HTMLやJSON、画像など）

がヘッダーとして含まれます。

#### ボディ(Body)

実際のページデータなどは**ボディ**と呼ばれる部分に入ります。

:::note warn イメージ図

```text
[リクエスト例]
POST /api/users HTTP/1.1
Host: www.example.com
Content-Type: application/json
User-Agent: Mozilla/5.0

(ここは空行)
{
  "name": "Dolphin",
  "age": 24
}
```

🐬 「ヘッダーは、送り状のようなもので宛先や品目などの情報が記載されていて、ボディは実際に運ばれる荷物の中身って感じですかぁ？」

🐚 「そうみたいですね！ヘッダーの情報をもとに、配送業者であるサーバーが荷物をどう扱うか判断するようですっ。」
![名称未設定のアートワーク 146.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982981/a86053fb-9d23-cab4-3017-d1f14509e3b1.png)

:::

## まとめ

HTTPの基本的な流れは「リクエストを送り、レスポンスを受け取る」シンプルな仕組みです。
しかし、その中には**リクエストメソッド**や**ヘッダー**、**ボディ**といった複数の要素が含まれており、**何をどのように送るか**を明確に伝えるためのルールが存在します。


:::tip ポイント
- **HTTP**はWebブラウザとサーバーがやり取りするための**通信ルール**。
- リクエストとレスポンスで情報をやり取りする。
- メソッド（GET、POSTなど）で「何をどうしたいか」を伝える。
- ステータスコード（200、404など）で「成功したかどうか」を確認する。
:::

:::note warn 会話ブロック

🐬「なんとなくHTTPの仕組みがわかってたぁ！」

🐚「ネット上でデータをやり取りするときの**基本中の基本**みたいだから、まずはこれをしっかり押さえておくと良さそうですね！」

:::