女性向けエンジニアスクール
3秒でわかる
ブラウザやアプリがサーバーへ送る要求。メソッドとURLとヘッダーとボディで「何をどうしたいか」を伝え、Webの通信はここから始まります。
もう少し詳しく
どういうものか
リクエストは、クライアント（ブラウザやアプリ）がサーバーへ送る要求のかたまりです。中身は 4 つの部品でできています。何をしたいかを表すメソッド（GET や POST）、対象を指すURL、付帯情報を並べたヘッダー、そして送信するデータであるボディです。サーバーはこれを読んでレスポンスを返します。
なぜ必要か
Web は「クライアントが聞いて、サーバーが答える」形でしか動きません。サーバーの側から勝手にページを送り込むことはできないため、画面に表示されるものはすべて、どこかで誰かがリクエストを出した結果です。ページを開いたときに画像が 30 枚出てくるなら、リクエストも 30 回以上飛んでいます。表示が遅い原因を調べるとき、この回数と 1 回あたりの時間が最初の手掛かりになります。
具体例
POST /api/v1/orders <a href="/glossary/http" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">HTTP</a>/1.1
Host: shop.example.com
<a href="/glossary/content-type" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">Content-Type</a>: application/json
Authorization: Bearer eyJhbGciOi...
{"item_id": 42, "quantity": 2}await <a href="/glossary/fetch-api" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">fetch</a>("https://shop.example.com/api/v1/orders", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: <a href="/glossary/json-stringify" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">JSON.stringify</a>({ item_id: 42, quantity: 2 }),
});上が実際に流れている生のリクエスト、下がそれを JavaScript から作るコードです。ブラウザの開発者ツールのネットワークタブを開くと、上と同じ内容がそのまま並んでいます。
つまずきやすいところ
Content-Type を付けずに JSON を送り、サーバー側でボディが空になる事故が頻発します。サーバーはヘッダーを見て解釈方法を決めるため、中身が JSON でも宣言が無ければ読めません。もうひとつは GET にボディを付ける書き方で、多くのサーバーや中継機器が黙って捨てるため、検索条件はクエリ文字列に載せます。
似た用語との違い
| 用語 | 向き |
|---|---|
| リクエスト | クライアントからサーバーへの要求 |
| レスポンス | サーバーからクライアントへの返答 |
| エンドポイント | リクエストの宛先になるURLとメソッドの組 |
覚え方
メソッドが動詞、URLが目的語、ヘッダーが但し書き、ボディが同封物。この 4 つのどれが欠けているかを考えると、通信の不具合はたいてい切り分けられます。
