HTTPリクエスト

概要（サマリー）

HTTPリクエストとは、ブラウザやアプリがサーバーに対して、「このページを見せて」「このデータを送って」などとお願いする通信のことである。

たとえば、Webサイトを開くとき、ブラウザはサーバーへ「このURLのページをください」とリクエストを送っている。そのお願いを受け取ったサーバーは、HTMLや画像、JSONデータなどを返す。この返事がHTTPレスポンスである。初心者向けには、HTTPリクエストは「お店に注文を出すこと」、HTTPレスポンスは「注文に対して商品や返事が返ってくること」と考えるとわかりやすい。

詳細解説

HTTPリクエストは「サーバーへのお願い」である

WebサイトやWebアプリでは、ユーザーが画面を開いたり、ボタンを押したり、フォームを送信したりするたびに、裏側で通信が行われることがある。

その通信の中で、ブラウザやアプリからサーバーへ送られる「お願い」がHTTPリクエストである。

たとえば、次のようなお願いがある。

• トップページを表示したい
• 商品一覧を取得したい
• ログイン情報を送信したい
• 問い合わせフォームの内容を送信したい
• APIからJSONデータを取得したい

つまりHTTPリクエストは、クライアント側からサーバー側へ「これをしてください」と伝えるための通信である。

Client と Server の関係

HTTPリクエストを理解するには、Client と Server の関係を見ると分かりやすい。

• Client
  リクエストを送る側。ブラウザ、スマホアプリ、フロントエンドなど
• Server
  リクエストを受け取り、処理して返事をする側

たとえば、ユーザーがブラウザで https://example.com を開いたとする。
このとき、ブラウザがClientとしてサーバーにHTTPリクエストを送る。
サーバーはそのリクエストを受け取り、必要なページデータをHTTPレスポンスとして返す。

このように、Webの基本は「ClientがRequestを送り、ServerがResponseを返す」という流れで成り立っている。

HTTP Response との違い

HTTPリクエストとセットで覚えたいのが HTTP Response である。

• HTTP Request
  クライアントからサーバーへのお願い
• HTTP Response
  サーバーからクライアントへの返事

たとえば、飲食店でたとえるなら次のようになる。

• Request = 「カレーをください」と注文する
• Response = カレーが出てくる、または「売り切れです」と返事が来る

Webでも同じように、リクエストを送った結果として、サーバーから何らかのレスポンスが返ってくる。
この往復が、Web通信の基本である。

HTTPリクエストには何が含まれるのか

HTTPリクエストは、「どこへアクセスするか」だけでなく、「何をしたいか」「どんな補足情報を送るか」「必要ならどんなデータを送るか」も含む通信である。
代表的には次のようなものがある。

URL

どこへアクセスしたいかを示す情報である。
たとえば /products や /contact のようなパスも関係する。

HTTPメソッド

何をしたいかを示す種類である。
代表的には GET や POST などがある。

ヘッダー

ブラウザや認証情報、受け取りたいデータ形式など、補足情報を入れる場所である。

ボディ

フォームの入力内容やJSONデータなど、サーバーへ送る本体データである。
主に POST、PUT、PATCH などで使われる。

つまりHTTPリクエストは、「どこへ」「何をしたいか」「必要ならどんなデータを送るか」をまとめた通信である。

GET と POST の違い

HTTPリクエストで特によく出てくるのが、GET と POST である。

GET

GETは、主にデータを取得するときに使う。
たとえば、ページを表示したり、商品一覧を取得したりするときに使われる。

GET /products

これは、「商品一覧をください」というリクエストのイメージである。

POST

POSTは、主にデータを送信するときに使う。
たとえば、フォーム送信、ログイン、注文作成などで使われる。

POST /contact

これは、「お問い合わせ内容を送信します」というリクエストのイメージである。

初心者のうちは、まず「GETは取得、POSTは送信」と覚えると理解しやすい。

そのほかのHTTPメソッド

GETとPOST以外にも、APIでは次のようなHTTPメソッドが使われる。

• PUT
  データ全体を更新する
• PATCH
  データの一部を更新する
• DELETE
  データを削除する

たとえば、ユーザー情報を更新したり、商品を削除したりするAPIでは、こうしたメソッドが使われることがある。

GET    /users/123
PATCH  /users/123
DELETE /users/123

同じURLでも、HTTPメソッドが違うと意味が変わることがある。
そのため、HTTPリクエストを見るときは、URLだけでなくメソッドも一緒に見ることが大切である。

Endpoint との関係

APIの文脈では、HTTPリクエストは Endpoint に対して送られる。

たとえば、次のようなエンドポイントがある。

GET https://api.example.com/products

これは、https://api.example.com/products というエンドポイントに対して、GETリクエストを送っている状態である。

整理すると、次のようになる。

• Endpoint
  リクエストを送る具体的な入口
• HTTP Request
  その入口に送るお願い
• HTTP Response
  そのお願いに対する返事

この関係が分かると、API通信の仕組みがかなり読みやすくなる。

フォーム送信もHTTPリクエストである

問い合わせフォームやログインフォームを送信するときも、裏側ではHTTPリクエストが送られている。

たとえば、問い合わせフォームで次のような内容を入力したとする。

• 名前
• メールアドレス
• 問い合わせ内容

送信ボタンを押すと、ブラウザはその入力内容をサーバーへ送る。
サーバーは内容を受け取り、保存したり、メール送信したり、完了画面を返したりする。

つまり、フォーム送信は「ユーザーが入力したデータをHTTPリクエストとしてサーバーに渡す処理」である。

fetch や API通信でよく出てくる

JavaScriptでAPI通信を行うときも、HTTPリクエストを送っている。

たとえば、次のようなコードがある。

fetch("https://api.example.com/products")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

このコードでは、https://api.example.com/products にGETリクエストを送り、返ってきたレスポンスをJSONとして読み取っている。

このように、HTTPリクエストは画面表示だけでなく、JavaScriptからデータを取りに行くときにも使われる。

ブラウザの開発者ツールで確認できる

HTTPリクエストは、ブラウザの開発者ツールで確認できる。
Chromeなどでは、開発者ツールの「Network」タブを見ると、ページ表示時やボタン操作時にどんなリクエストが送られているかを確認できる。

たとえば、次のような情報が見られる。

• リクエスト先URL
• HTTPメソッド
• ステータスコード
• リクエストヘッダー
• レスポンス内容
• 読み込み時間

Webアプリの不具合調査では、このNetworkタブが非常に重要になる。
「ボタンを押したのに反応しない」ときも、実はリクエストが送られていない、リクエストは送られているがエラーが返っている、という切り分けができる。

Status Code との関係

HTTPリクエストを送ると、サーバーはHTTPレスポンスを返す。
そのレスポンスには、処理結果を示す Status Code が含まれる。

代表的な例は次の通りである。

• 200
  正常に成功
• 301 / 302
  別のURLへ転送
• 400
  リクエスト内容が不正
• 401
  認証が必要
• 403
  権限がない
• 404
  見つからない
• 500
  サーバー側のエラー

つまり、HTTPリクエストは「お願い」であり、ステータスコードは「そのお願いがどう処理されたかを示す結果」である。

リクエストに対して返ってくる200・301・403・404・500やJSONのレスポンスを、実際の通信とページ表示で体験したい場合は、以下のツールを使うと分かりやすい。

セキュリティ上の注意点

HTTPリクエストでは、サーバーへデータを送ることがある。
そのため、セキュリティ面でも注意が必要である。

たとえば、次のような点を確認したい。

• パスワードや個人情報を安全に送っているか
• HTTPSで通信しているか
• 不正な入力をそのまま受け取っていないか
• 認証が必要なリクエストに認証チェックがあるか
• 他人のデータを操作できないようにしているか

特にAIが生成したAPIやフォーム処理では、「動くかどうか」だけでなく、「不正なリクエストが来ても安全か」を確認することが重要である。

AIコーディングとの関係

AIにWebアプリやAPIを作らせると、HTTPリクエストという考え方はかなり頻繁に出てくる。
たとえば、次のような場面で必要になる。

• フロントエンドからAPIを呼び出す
• フォーム送信処理を作る
• ログイン処理を実装する
• エラーの原因をNetworkタブで調べる
• サーバー側のEndpointを設計する
• fetchやaxiosのコードを読む

このとき、HTTPリクエストの意味が分かっていないと、「どこに何を送っているのか」「なぜPOSTなのか」「なぜ404や500が出ているのか」が見えにくい。

逆に、HTTPリクエストを「サーバーへのお願い」と理解しているだけで、AIが書いたコードやエラー調査の説明がかなり読みやすくなる。

よくある勘違い

HTTPリクエストは、ページを開いたときだけ送られる？

そうではない。ボタンを押したとき、フォームを送信したとき、JavaScriptからAPIを呼び出したときなど、画面を開いたあとの操作でも裏側で何度もHTTPリクエストが送られている。開発者ツールのNetworkタブを見ると、ページ表示後にも次々とリクエストが発生していることが確認できる。

URLが同じなら、同じ処理が行われる？

そうとは限らない。同じURLでも、HTTPメソッドが違えば意味が変わる。たとえば GET /users/123 はユーザー情報の取得だが、DELETE /users/123 は同じURLでもそのユーザーの削除を意味する。URLだけでなく、メソッドも合わせて見る必要がある。

エラーが出ないなら、リクエストは正しく届いている？

そうとは限らない。ボタンを押しても反応がない場合、そもそもリクエストが送られていない、リクエストは送られているがステータスコードがエラーを示している、など複数の原因がありうる。Networkタブでリクエストの有無とステータスコードを確認することが切り分けの基本になる。

まとめ

• HTTPリクエストは、ブラウザやアプリがサーバーに対して、「このページを見せて」「このデータを送って」などとお願いする通信のこと。
• リクエストには、URL・HTTPメソッド・ヘッダー・ボディといった情報が含まれる。
• GETは主にデータ取得、POST/PUT/PATCH/DELETEは主にデータの送信・更新・削除に使われる。
• リクエストに対してサーバーが返す結果がHTTPレスポンスであり、処理結果はステータスコード（200・404・500など）で示される。
• ブラウザの開発者ツールのNetworkタブで、実際に送られているリクエストとレスポンスを確認できる。

情報ソース

• RFC 9110: HTTP Semantics
• MDN Web Docs: HTTP メッセージ

より詳しくAIに聞いてみよう

• HTTPリクエストとは何かを、中学生でもわかるように具体例つきで説明してください。
• HTTP Request と HTTP Response の違いを、初心者向けに整理してください。
• GET と POST と PUT と PATCH と DELETE の違いを、具体例つきで教えてください。
• ブラウザのNetworkタブでHTTPリクエストを確認する方法を教えてください。
• AIが書いたAPI通信コードを確認するとき、HTTPリクエストのどこを見るべきか教えてください。