女性向けエンジニアスクール
3秒でわかる
ブラウザとサーバーが文書やデータをやり取りするための取り決め。要求と応答を一往復ずつ交わす形で、Webのほぼすべての通信を担っています。
30秒図解
もう少し詳しく
どういうものか
HTTP は、ブラウザなどのクライアントとサーバーが文書やデータをやり取りするための取り決めです。クライアントが要求を送り、サーバーが応答を返す。この一往復が単位で、サーバーは前回の往復を覚えていません。この性質を状態を持たないと表現します。
要求は、メソッドと対象のパス、ヘッダ、本文でできています。応答は、状態コードとヘッダ、本文でできています。中身は人が読める文字列で、通信内容をそのまま目で追えます。暗号化を加えたものが HTTPS で、やり取りの構造自体は変わりません。
なぜ必要か
異なる作り手のブラウザとサーバーが会話するには、共通の言い方が要ります。要求の書式と応答の意味を全員が同じに解釈するからこそ、どのブラウザからどのサーバーへでもつながります。API を作るときにメソッドと状態コードを正しく選ぶことは、利用する側に説明書なしで意図を伝えることでもあります。
具体例
要求と応答の生の形は下のようになります。
GET /api/items?limit=2 HTTP/1.1
Host: example.com
Accept: application/json
HTTP/1.1 200 OK
<a href="/glossary/content-type" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">Content-Type</a>: application/json
[{"id":1,"name":"coffee"},{"id":2,"name":"tea"}]JavaScript から同じことをする場合です。
const res = await <a href="/glossary/fetch-api" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">fetch</a>("https://example.com/api/items?limit=2");
if (!res.ok) throw new Error(`failed ${res.status}`);
const items = await res.json();主なメソッドは、取得の GET、作成の POST、全体更新の PUT、部分更新の PATCH、削除の DELETE です。状態コードは百の位で意味が決まり、2 で始まれば成功、3 は転送、4 は要求側の誤り、5 はサーバー側の障害です。
つまずきやすいところ
fetch は 404 や 500 でも例外を投げません。通信自体は成立しているためで、成否は ok や status で自分で確かめる必要があります。
GET で状態を変える設計も避けます。GET は何度呼んでも結果が変わらない前提で、ブラウザや中継機構が自由に再取得やキャッシュを行うためです。ブラウザから別ドメインの API を叩いて拒否される場合は、HTTP ではなく CORS の設定を疑います。応答ヘッダに許可の宣言が無いと、サーバーが正しく返していてもブラウザ側で捨てられます。
覚え方
「一回の質問に一回の答え、覚えていない」。ログイン状態が保てるのはクッキーが毎回付いてくるからだ、と繋げて理解できます。
