tanaka101
進捗: 2 / 4

リクエストとレスポンス

HTTPリクエストとレスポンスの構造を理解しよう

まずは実際のHTTP通信を見てみよう

とがどんなものか、具体例から見ていきましょう。

たとえば、あなたがSNSアプリで「自分のプロフィール情報」を表示するとき、アプリは裏側でこんなをサーバーに送っています。

GET /users/123 HTTP/1.1
Host: api.example-sns.com
Accept: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...

「自分（ユーザーID: 123）の情報をください」というお願いです。

すると、サーバーからこんなが返ってきます。

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": 123,
  "name": "田中太郎",
  "email": "tanaka@example.com",
  "bio": "プログラミング勉強中です"
}

「了解しました（200 OK）、こちらがあなたの情報です」という返事ですね。

ブラウザの開発者ツール（DevTools）を使えば、実際にこのようなHTTP通信を見ることができます。

F12 キーを押して、「Network」タブを開いてみましょう。

では、このとの中身を詳しく見ていきましょう。

の構造

先ほどのをもう一度見てみます。

GET /users/123 HTTP/1.1        ← リクエストライン（1行目）
Host: api.example-sns.com      ← ヘッダー（2行目以降）
Accept: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...

は、3つの部分で構成されています。

┌─────────────────────────────────────┐
│ リクエストライン                      │  ← 何をしたいか
├─────────────────────────────────────┤
│ ヘッダー                             │  ← 追加情報
├─────────────────────────────────────┤
│ ボディ                               │  ← 送りたいデータ（あれば）
└─────────────────────────────────────┘

リクエストライン

の1行目で、「何を」「どこに」要求するかを示します。

GET /users/123 HTTP/1.1
部分例意味
GETどんな操作をしたいか（取得、作成、削除など）
パス/users/123どのリソースに対して操作するか
バージョンHTTP/1.1HTTPのバージョン

リクエストヘッダー

に関する追加情報を「名前: 値」の形式で送ります。

Host: api.example-sns.com
Accept: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
ヘッダー役割例
Host先のサーバー名.example-sns.com
Accept受け取りたいデータの形式application/json
Authorization認証情報（ログイン済みの証明）Bearer eyJhbGci...
Content-Type送るデータの形式application/json

リクエストボディ

サーバーに送りたいデータ本体です。

先ほどの例（プロフィール取得）では、データを取得するだけなのでボディはありません。

ボディが必要になるのは、新しいデータを作成したり、更新したりするときです。たとえば、プロフィールを更新する場合はこうなります。

PUT /users/123 HTTP/1.1
Host: api.example-sns.com
Content-Type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...

{
  "name": "田中太郎",
  "bio": "Web開発を勉強中です"
}

ヘッダーの後に空行を挟んで、更新したいデータ（JSON）を送っています。

の構造

次は、サーバーから返ってきたを詳しく見てみましょう。

HTTP/1.1 200 OK                ← ステータスライン（1行目）
Content-Type: application/json ← ヘッダー（2行目以降）

{                              ← ボディ（空行の後）
  "id": 123,
  "name": "田中太郎",
  "email": "tanaka@example.com",
  "bio": "プログラミング勉強中です"
}

も、と似た3つの部分で構成されています。

┌─────────────────────────────────────┐
│ ステータスライン                      │  ← 結果（成功/失敗）
├─────────────────────────────────────┤
│ ヘッダー                             │  ← 追加情報
├─────────────────────────────────────┤
│ ボディ                               │  ← 返すデータ
└─────────────────────────────────────┘

ステータスライン

の1行目で、処理の結果を示します。

HTTP/1.1 200 OK
部分例意味
バージョンHTTP/1.1HTTPのバージョン
200処理結果を表す番号
ステータステキストOKの説明

200 OK は「が成功しました」という意味です。

については後のセクションで詳しく説明します。

レスポンスヘッダー

に関する追加情報です。

Content-Type: application/json
Content-Length: 128
ヘッダー役割例
Content-Type返すデータの形式application/json
Content-Lengthデータのサイズ（バイト）128

レスポンスボディ

サーバーから返されるデータ本体です。APIの場合、通常はJSON形式です。

{
  "id": 123,
  "name": "田中太郎",
  "email": "tanaka@example.com",
  "bio": "プログラミング勉強中です"
}

セクションまとめ

  • ✓は「リクエストライン」「ヘッダー」「ボディ」で構成される
  • ✓は「ステータスライン」「ヘッダー」「ボディ」で構成される
  • ✓GETにはボディがない
  • ✓APIのデータは通常JSON形式でやり取りされる