HTTPあるある『なんとなく理解』から卒業する方法

Posted at 2025-08-19

はじめに

HTTPリクエストやレスポンスについて業務で使用した際に、POSTリクエストやらGETリクエストやらheaderやらをなんとなくの理解で使っていたため、ここらでアウトプットしよう！ということで記事を書いてみました。
備忘録のような形ですが、参考になれば幸いです。

この記事で学べること

HTTPリクエスト・レスポンスの基本的な仕組み
GET、POST、HEADメソッドの具体的な使い分け
リクエスト・レスポンスの構成要素の詳細

HTTPとは

そもそもHTTPとはなんなのかについて説明します。
HTTPとはwebブラウザとサーバーがやり取りをするための仕組みです。
みなさんがたとえば「猫」と検索した際に、猫のサイトが表示されますよね？
これはブラウザがサーバーに「猫」の情報をください！とリクエストをして、サーバーが「猫はこれらの情報ですね」というように返してくれることを指します。
これがHTTPと呼ばれる仕組みとなります

リクエストとレスポンスの流れ

画像のような流れになっています

クライアント（ブラウザ）がリクエストを送信
- ユーザーがURLを入力またはリンクをクリック
- ブラウザが「このページが欲しい」「このデータを保存して」などの要求を作成
- 要求をHTTPリクエストとしてサーバーに送信
サーバーがリクエストを受信・処理
-リクエストの内容を解析（どのページが欲しいのか、どんなデータが送られたか）
- データベースから情報を取得したり、ファイルを読み込む
サーバーがレスポンスを返送
- 処理結果をHTTPレスポンスとして作成
- HTMLページ、JSONデータ、画像ファイルなどを返送
- 成功・失敗の状況も併せて通知
クライアントがレスポンスを受信・表示
- ブラウザがレスポンスを受け取り
- HTMLページとして表示・画像なら表示、エラーならエラーページを表示

この一連の流れが、私たちがWebページを見るたびに繰り返されています

リクエストとレスポンスの中身について

構成の概要
HTTPリクエストとレスポンスは、どちらも３つの部分から構成されています。

リクエストライン
- 何をしたいのかの概要
ヘッダー
- サーバーへの追加情報
ボディ
- 送信する実際のデータ

リクエストの中身

リクエストライン
GET: サーバーから情報を取得するためのメソッド※後々説明します
/users:パス

GET /users?page=1 HTTP/1.1

ヘッダー

Host: アクセス先のサーバー名（必須）
User-Agent: ブラウザやアプリの詳細情報
Accept: 受け取りたいデータの形式

データ	データの形式	用途
application/json	JSONデータの形式が欲しい	APIへのデータ送信
text/html	HTML形式が欲しい	従来のWebフォーム
image/png	PNG画像が欲しい	画像・文書のアップロード

Accept-Language: 希望する言語
Content-Type: 送信するデータの形式

データ	データの形式	用途
application/json	JSONデータの形式が欲しい	APIへのデータ送信
text/html	HTML形式が欲しい	従来のWebフォーム
image/png	PNG画像が欲しい	画像・文書のアップロード

Content-Length: 送信するデータのサイズ
Cookie: 保存されているクッキー情報
Authorization: 認証情報（ログインが必要な場合）

Host: example.com
User-Agent: Mozilla/5.0（Windows NT 10.0; Win64; x64）
Accept: text/html, application/json,*/*
Accept-Language: ja, en-US; q=0.9
Content-Type: application/json
Content-Length: 85
Cookie: session=abc123; user_pref=dark_mode
Authorization: Bearer
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

ボディ（データ送信時）
- ボディの役割と使用条件
  - ボディは「実際に送信するデータ」を格納する部分。メソッドによって使用するかどうかが決まる
    - GET/HEAD
      - ボディは使わないのが通例（情報はURLに含める）
    - POST
      - ボディを使う（送信するデータを含める）

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

レスポンスの中身

レスポンスの3つの構成要素

ステータスライン
- 処理結果の概要
ヘッダー
- レスポンスの詳細情報
ボディ
- 実際のデータ
ステータスライン
ステータスコード: リクエストの結果を数値で表したもの

ステータスコード	意味
2xx	成功
3xx	リダイレクト
4xx	クライアントエラー
5xx	サーバーエラー

バージョン: HTTPのバージョンを表している(HTTP/1.1)

HTTP/1.1 200 OK

ボディ（実際のデータ）
- HEADリクエストの場合
  - HEADリクエストでは、ヘッダーは返されますが、ボディは空になる。これにより、ファイルサイズや形式だけを確認できる

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

3つの基本メソッド

メソッドとは

HTTPメソッドは「サーバーに対して何をしたいか」を指定する命令のようなものです。

GETリクエスト

GETリクエストはデータを取得するために使用される
Webページの表示、検索結果の取得
URLに全てのデータが含まれるため、ボディは使わない

GET https://example.com/search?q=スマートフォン&category=electronics

POST

データを送信・作成する
フォーム送信、ユーザー登録
データの機密性の高い情報が多いため、URLではなくボディに含まれる

POST https://api.example.com/users
// URLではなく、ボディに含まれる
Body: {"name": "田中太郎", "email": "tanaka@example.com"}

HEAD

ファイル情報だけを取得する
データの中身は取得しないため、通信量を大幅に節約する

HEAD https://example.com/images/photo.jpg
Response: Content-Length: 2048576 (約2MB)

実際の使用場面での違い

# 商品情報を見たい時
GET https://shop.example.com/products/123
→ 商品の詳細情報をHTMLやJSONで取得

# 新しい商品を登録したい時  
POST https://shop.example.com/products
→ 商品データをボディで送信して新規作成

# 商品画像のサイズだけ確認したい時
HEAD https://shop.example.com/products/123/image.jpg
→ ファイルサイズや形式の情報のみ取得

なぜ使い分けをするのか？

セキュリティの観点から使い分けをしています。たとえば、会員登録をGETリクエストで送った場合、ユーザー名やパスワードがURLに含まれてしまうため、盗まれる可能性があります。
それを防ぐために、使い分けをしています

# 危険な例（パスワードがURLに露出）
GET /login?username=tanaka&password=secret123
→ ブラウザ履歴、サーバーログ、プロキシで見える可能性

# 安全な例（パスワードはボディに格納）
POST /login
Body: {"username": "tanaka", "password": "secret123"}
→ BODYであればURLに含まれず暗号化されて送信される（※HTTPSの場合）

※HTTPSとは
詳しくはこちらを御覧ください
https://qiita.com/nucomiya/items/f4251cfd3e2ff8fd2612
通信方法にはHTTPとHTTPSというものがあるのですが、HTTPでは暗号化されて表示がされず、HTTPSだと暗号化されて送信が出来ます
HTTPSのほうが安全なので、Googleなどでは、HTTPSのサイトだとSEOの上位に上がりやすく、HTTPのサイトだと警告が出るようになっています。

メソッドの比較と使い分け

項目	GET	POST	HEAD
用途	データ取得	データ送信	情報確認
データの場所	URL	ボディ	URL
データサイズ	制限あり	制限なし	制限あり
セキュリティ	低い	高い	低い
キャッシュ	される	されない	される

まとめ

HTTPリクエストとレスポンスの仕組みを理解することで、Web開発における適切なメソッドの選択や、セキュリティを考慮した実装ができるようになります。
特に、GET、POSTの使い分けは、実際の開発現場で頻繁に判断が求められる重要なポイントです

もっと他の記事も読んでみたい方

当社に興味がある方はこちら👀

エンジニア採用について | 株式会社ネクスウェイ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up