メインコンテンツにスキップ

HTTPリクエスト/レスポンスを理解する 📡

Webサイトを訪問したり、アプリを使用するとき、コンピュータとサーバーはどのように会話するのでしょうか？それはHTTPというルールを使っています！初心者でも簡単に理解できるように説明します。

HTTPを日常生活に例えると？​

HTTPをレストランの注文に例えてみましょう。

レストランの話 🍽️​

1. 客: "パスタをください！" (リクエスト)
2. ウェイター: キッチンに伝える
3. キッチン: パスタを調理
4. ウェイター: "パスタができました！" (レスポンス)
5. 客: パスタを受け取る

HTTPも同じです:

1. ブラウザ: "index.htmlをください！" (HTTPリクエスト)
2. サーバー: ファイルを探す
3. サーバー: "ここにあります！" (HTTPレスポンス)
4. ブラウザ: ページを表示

HTTPの定義​

HTTP (HyperText Transfer Protocol)

  • Webブラウザとサーバーがデータをやり取りするルール
  • プロトコル = 約束されたルール
  • Webの基礎となる通信方法

HTTPリクエスト/レスポンスの流れ​

┌─────────┐                                ┌─────────┐
│         │   ── HTTPリクエスト (Request) →│         │
│ブラウザ │                                │ サーバー│
│         │   ← HTTPレスポンス (Response)──│         │
└─────────┘                                └─────────┘

全体の流れ​

  1. リクエスト (Request): ブラウザがサーバーに何かを要求
  2. 処理 (Processing): サーバーがリクエストを処理
  3. レスポンス (Response): サーバーが結果をブラウザに送信
  4. レンダリング (Rendering): ブラウザが画面に表示

HTTPメソッド (リクエスト方法)​

サーバーに**「どのように」**するか伝える動詞です。

1. GET 📖​

「取得する」 - データを要求する

GET /products/123

例:

  • Webページを見る
  • 検索結果を取得する
  • 商品リストを見る

特徴:

  • データを取得するだけ
  • サーバーのデータを変更しない
  • URLにデータが表示される
  • ブックマーク可能

実際の使用:

https://google.com/search?q=javascript
                         └───────┬──────┘
                         GETパラメータ

2. POST 📝​

「作成する」 - 新しいデータをサーバーに送信

POST /users
{
  "name": "田中太郎",
  "email": "tanaka@example.com"
}

例:

  • 会員登録
  • 投稿作成
  • 注文する

特徴:

  • サーバーにデータを作成
  • 本文(Body)にデータを含む
  • URLにデータが表示されない
  • ブックマーク不可

3. PUT ✏️​

「更新する」 - 既存データを丸ごと置き換える

PUT /users/123
{
  "name": "佐藤花子",
  "email": "sato@example.com"
}

例:

  • プロフィール全体を更新
  • 投稿全体を更新

4. PATCH 🔧​

「一部更新する」 - 既存データの一部だけを変更

PATCH /users/123
{
  "email": "newemail@example.com"
}

例:

  • メールアドレスのみ変更
  • パスワードのみ変更

5. DELETE 🗑️​

「削除する」 - データを削除

DELETE /users/123

例:

  • アカウント削除
  • 投稿削除
  • 商品削除

HTTPメソッド比較表​

メソッド用途データ変更データの場所
GET取得❌URL
POST作成✅Body
PUT全体更新✅Body
PATCH一部更新✅Body
DELETE削除✅URL

HTTPリクエストの構造​

GET /api/users?page=1 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer token123

{本文データ (POST, PUT, PATCHの場合)}

構成要素​

  1. リクエストライン: GET /api/users HTTP/1.1

    • メソッド: GET
    • パス: /api/users
    • HTTPバージョン: 1.1

  2. ヘッダー (Headers): 追加情報

    Host: どのサーバー?
    User-Agent: どのブラウザ?
    Accept: どの形式を受け取る?
    Authorization: 認証情報

  3. 本文 (Body): 実際のデータ (POST, PUT, PATCH)

HTTPレスポンスの構造​

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

{
  "id": 1,
  "name": "田中太郎"
}

構成要素​

  1. ステータスライン: HTTP/1.1 200 OK

    • HTTPバージョン: 1.1
    • ステータスコード: 200
    • ステータスメッセージ: OK

  2. ヘッダー (Headers): レスポンス情報

    Content-Type: どの形式?
    Content-Length: データサイズ

  3. 本文 (Body): 実際のデータ

HTTPステータスコード 🚦​

サーバーが**「どうなった」**を教えてくれる数字です。

2xx - 成功 ✅​

コード意味説明
200OK成功!
201Created新しく作成されました
204No Content成功したが送る内容がありません

3xx - リダイレクション 🔄​

コード意味説明
301Moved Permanently永久に移動しました
302Found一時的に別の場所にあります
304Not Modified変更されていないのでキャッシュを使用してください

4xx - クライアントエラー ❌​

コード意味説明
400Bad Requestリクエストが間違っています
401Unauthorizedログインが必要です
403Forbidden権限がありません
404Not Found見つかりません
429Too Many Requestsリクエストが多すぎます

5xx - サーバーエラー 🔥​

コード意味説明
500Internal Server Errorサーバーに問題が発生しました
502Bad Gatewayゲートウェイエラー
503Service Unavailableサービスが利用できません
ヒント

HTTP Status Guideですべてのステータスコードを確認できます!

実践例​

例1: 検索 🔍​

リクエスト:

GET https://google.com/search?q=javascript

レスポンス:

HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>検索結果...</body>
</html>

例2: ログイン 🔐​

リクエスト:

POST https://api.example.com/login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "password123"
}

レスポンス (成功):

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

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "id": 1,
    "name": "田中太郎"
  }
}

レスポンス (失敗):

HTTP/1.1 401 Unauthorized
Content-Type: application/json

{
  "error": "Invalid email or password"
}

例3: 投稿作成 ✍️​

リクエスト:

POST https://api.example.com/posts
Content-Type: application/json
Authorization: Bearer token123

{
  "title": "最初の投稿",
  "content": "こんにちは!"
}

レスポンス:

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": 42,
  "title": "最初の投稿",
  "content": "こんにちは!",
  "createdAt": "2025-01-23T10:30:00Z"
}

例4: プロフィール修正 ✏️​

リクエスト:

PATCH https://api.example.com/users/me
Content-Type: application/json
Authorization: Bearer token123

{
  "email": "newemail@example.com"
}

レスポンス:

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

{
  "id": 1,
  "name": "田中太郎",
  "email": "newemail@example.com"
}

例5: 投稿削除 🗑️​

リクエスト:

DELETE https://api.example.com/posts/42
Authorization: Bearer token123

レスポンス:

HTTP/1.1 204 No Content

HTTPヘッダー理解する​

よく使用するリクエストヘッダー​

Content-Type: application/json    # 送信するデータ形式
Accept: application/json           # 受け取りたいデータ形式
Authorization: Bearer token123     # 認証トークン
User-Agent: Mozilla/5.0...         # ブラウザ情報
Cookie: session=abc123             # クッキー

よく使用するレスポンスヘッダー​

Content-Type: application/json    # レスポンスデータ形式
Content-Length: 1234               # データサイズ
Set-Cookie: session=abc123         # クッキー設定
Cache-Control: no-cache            # キャッシュ設定
Access-Control-Allow-Origin: *     # CORS設定

HTTPツールを使用する​

API Testerで実習​

API Testerで:

  1. URLを入力
  2. メソッドを選択 (GET, POST, PUT, DELETE)
  3. ヘッダーを追加
  4. 本文を作成 (POST, PUT, PATCH)
  5. Sendボタンをクリック!

実習例​

GETリクエストテスト:

URL: https://api.github.com/users/github
Method: GET

結果:

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  ...
}

よくある質問 (FAQ)​

Q1: GETとPOSTはいつ使用しますか?​

A:

  • GET: データ照会 (読み取りのみ)
  • POST: データ作成 (書き込み)

Q2: PUTとPATCHの違いは?​

A:

  • PUT: 全体を置き換える 
    PUT /users/1
    {"name": "佐藤花子", "email": "sato@example.com", "age": 25}
  • PATCH: 一部だけ変更する 
    PATCH /users/1
    {"email": "newemail@example.com"}

Q3: 404エラーはなぜ発生しますか?​

A: 要求されたページやデータが見つからないとき!

  • URLのスペルミス
  • 削除されたページ
  • 間違ったパス

Q4: 500エラーとは?​

A: サーバーに問題が発生しました!

  • サーバーコードエラー
  • データベース接続失敗
  • サーバー過負荷

Q5: HTTPSはHTTPと何が違いますか?​

A: セキュリティが追加されました!

  • HTTP: 平文送信 (誰でも見られる)
  • HTTPS: 暗号化送信 (安全) 🔒

CRUDとHTTPメソッド​

CRUD = データの基本操作

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

例: ブログ投稿​

投稿一覧表示:  GET /posts
投稿読み取り:  GET /posts/123
投稿作成:      POST /posts
投稿更新:      PUT /posts/123
投稿削除:      DELETE /posts/123

RESTful API​

REST = HTTPを効果的に活用する設計方法

良いAPIデザイン ✅​

GET    /users          # ユーザー一覧
GET    /users/123      # 特定ユーザー
POST   /users          # ユーザー作成
PUT    /users/123      # ユーザー更新
DELETE /users/123      # ユーザー削除

悪いAPIデザイン ❌​

GET  /getUsers
POST /createUser
POST /updateUser
POST /deleteUser

次のステップ 🚀​

HTTPを理解したら:

  1. ✅ API Tester - 直接HTTPリクエストを送る
  2. ✅ HTTP Status Guide - すべてのステータスコードを学ぶ
  3. ✅ cURL Converter - cURLコマンドを変換
  4. ✅ APIとは? - API概念を再確認
  5. ✅ JSONデータ形式を理解する - HTTPでやり取りするデータ

まとめ​

HTTPはWebの基礎です! 🌐

覚えておくポイント:

  • GET: 照会 (読み取り)
  • POST: 作成 (書き込み)
  • PUT/PATCH: 更新
  • DELETE: 削除
  • ステータスコード: 2xx(成功), 4xx(クライアントエラー), 5xx(サーバーエラー)

API Testerで直接実験すれば、すぐに慣れるでしょう! 🎉

これでWebサイトとサーバーがどのように会話するか理解できましたか?