HTTPとAPIにおけるデータのやり取り

HTTPとは？

HTTP (Hypertext Transfer Protocol)は、クライアント（フロントエンド）とサーバー（バックエンド）の間でデータを送受信するためのルール（プロトコル）です。ウェブページの取得だけでなく、API通信にも使われます。


APIにおけるHTTPの役割

API（Application Programming Interface）は、システム同士がデータをやり取りするためのインターフェースです。HTTPは、APIの通信においてデータの送受信を行うプロトコル（ルール）として使われます。


リクエストとレスポンスの役割

リクエスト (Request)

フロントエンドからバックエンドにデータを要求するために送信されます。リクエストには、HTTPメソッド（GET, POSTなど）、URL、ヘッダー、および必要に応じてボディが含まれます。

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "John",
  "age": 30
}
JavaScriptのリクエスト実装例
fetch('https://example.com/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'John', age: 30 }),
})
  .then(response => response.json())
  .then(data => console.log(data));

レスポンス (Response)

バックエンドがフロントエンドに処理結果を返します。レスポンスにはステータスコード、ヘッダー、および必要に応じてボディが含まれます。

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

{
  "id": 1,
  "name": "John",
  "age": 30
}

HTTPリクエストとレスポンスの構造

HTTPリクエストとレスポンスはテキスト形式のメッセージで構成されており、ヘッダー、ボディ、URLなどの要素を持ちます。これにより、クライアントとサーバーがデータのやり取りを行います。

POSTなどのリクエストではボディにデータが含まれ、GETでは主にクエリパラメータが使用されます。

1. HTTPリクエストのテキスト形式の例

POST /api/memo HTTP/1.1
Host: example.com
Content-Type: application/json
Authorization: Bearer abc123
Content-Length: 51

{
  "title": "Meeting",
  "content": "Discussion"
}

解説

  • リクエストライン（1行目）
    • HTTPメソッド: POST
    • パス: /api/memo
    • HTTPバージョン: HTTP/1.1
  • ヘッダー（2～5行目）
    • Host: サーバーのホスト名
    • Content-Type: データ形式 (application/json)
    • Authorization: 認証トークン (Bearer abc123)
    • Content-Length: ボディのサイズ (51バイト)
  • ボディ（JSON形式のデータ） 
    {
  "title": "Meeting",
  "content": "Discussion"
}

HTTPメソッドの具体例と使い方

HTTPメソッド 目的 例
GET データを取得する /usersでユーザー一覧を取得
POST 新しいデータを作成する /usersに新しいユーザーを登録
PUT 既存データを更新する /users/1でIDが1のユーザーを更新
DELETE データを削除する /users/1でIDが1のユーザーを削除

2. HTTPレスポンスのテキスト形式の例

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

{
  "id": 1,
  "title": "Meeting",
  "content": "Discussion"
}

解説

  • ステータスライン（1行目）
    • HTTPバージョン: HTTP/1.1
    • ステータスコード: 200 (成功)
    • ステータスメッセージ: OK
  • ヘッダー（2～3行目）
    • Content-Type: application/json
    • Content-Length: 85
  • ボディ（JSON形式のデータ） 
    {
  "id": 1,
  "title": "Meeting",
  "content": "Discussion"
}

HTTPステータスコードまとめ

ステータスコード 意味
200 OK 正常に処理された
201 Created 新しいリソースが作成された
204 No Content 処理成功・返すデータなし
400 Bad Request 不正なリクエスト
404 Not Found リソースが見つからない
500 Internal Server Error サーバー内部でエラー発生

HTTPメッセージはテキスト形式ですが、通信経路上ではバイナリデータとして送信されます。多くの場合、HTTPSによって暗号化され、通信が保護されます。


パスパラメータ、クエリパラメータ、リクエストボディの違い

パスパラメータ（Path Parameter）

URLの一部に含まれる変数のようなもので、リソースを一意に識別するために使用します。

GET /users/123

例: ユーザーID「123」の情報を取得するリクエスト。


クエリパラメータ（Query Parameter）

URLの末尾に?で始まり、&で複数のパラメータを区切ります。主に検索条件やフィルタリングで使用します。

GET /products?category=shoes&color=red

例: 靴カテゴリーで色が赤い商品を取得するリクエスト。


リクエストボディ（Request Body）

HTTPのボディ部分にデータを含めて送信する方法で、主にPOSTやPUTリクエストで使用されます。大きなデータや複雑なデータ構造に適しています。

POST /users
Content-Type: application/json

{
  "name": "John",
  "age": 30
}

例: 新しいユーザー「John」を作成するリクエスト。


パスパラメータ、クエリパラメータ、リクエストボディの違いの比較

パスパラメータ、クエリパラメータ、リクエストボディの違いの比較としては下記になる。


項目 パスパラメータ クエリパラメータ リクエストボディ
データの場所 URLの一部 URLの末尾 HTTPのボディ
主な用途 リソースの識別 検索条件やフィルタリング データの新規作成・更新
HTTPメソッド GET、DELETE GET POST、PUT、PATCH
送信可能なデータ量 短いデータ（IDなど） URLの長さに制限あり 大きなデータも対応可能
セキュリティ URLに表示される URLに表示される URLに表示されない
  • パスパラメータ: 特定のリソースを指定する場合に使用。例: /users/123
  • クエリパラメータ: 検索条件やフィルタリングに使用。例: /products?category=shoes
  • リクエストボディ: データの新規作成や更新に使用。例: POSTリクエストでユーザーを作成。

パスパラメータ、クエリパラメータ、リクエストボディは、それぞれ異なる用途で使われます。

URLに含めても問題ないデータはパスやクエリパラメータで渡し、複雑なデータや大きなデータはリクエストボディで送信します。