女性向けエンジニアスクール
3秒でわかる
HTTPの応答に必ず付く3桁の数字。処理が成功したのか、どちら側の問題で失敗したのかを、機械が判断できる形で伝えるために使います。
もう少し詳しく
どういうものか
ステータスコードは、サーバーが応答の先頭に付ける3桁の数字です。百の位で大きな意味が決まり、下2桁で細かい理由を表します。1xxは処理中、2xxは成功、3xxは移動、4xxは要求した側の誤り、5xxはサーバー側の障害です。この百の位の意味だけ覚えておけば、知らない番号に出会っても誰の責任範囲かは判断できます。
なぜ必要か
本文に日本語でエラーの説明を書いても、プログラムはそれを読めません。番号で分類されているからこそ、クライアントは自動で振る舞いを変えられます。401なら再ログインへ誘導し、429なら少し待って再送し、500なら再送しても無駄だと判断できます。監視の仕組みが5xxの割合だけを見て通知を出せるのも、この分類が世界共通で決まっているためです。
具体例
const res = await <a href="/glossary/fetch-api" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">fetch</a>("/api/orders", {
method: "POST",
headers: { "<a href="/glossary/content-type" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">Content-Type</a>": "application/json" },
body: <a href="/glossary/json-stringify" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">JSON.stringify</a>(order),
});
if (res.status === 201) {
location.href = res.headers.get("Location"); // 作成された資源の場所
} else if (res.status === 401) {
location.href = "/login";
} else if (res.status === 422) {
showFieldErrors(await res.json()); // 入力内容の不備
} else if (res.status >= 500) {
showRetryButton(); // こちらでは直せない
}主要な番号は次のとおりです。
| 番号 | 意味 | 出る場面 |
|---|---|---|
| 200 | OK | 取得に成功した |
| 201 | Created | 作成に成功した |
| 301 / 302 | 移動 | URLが変わった |
| 400 | Bad Request | 送った形式が壊れている |
| 401 / 403 | 未認証 / 権限なし | 誰か不明 / 誰かは分かるが許可されていない |
| 404 | Not Found | 資源が存在しない |
| 429 | Too Many Requests | 送りすぎ |
| 500 / 503 | サーバーエラー / 一時停止 | サーバー側の問題 |
つまずきやすいところ
fetch は4xxや5xxでも例外を投げません。try で囲んだだけでは失敗を捕まえられず、成功として処理が進みます。必ず res.ok か res.status を見ます。設計側でよくあるのは、失敗しているのに200を返し、本文の中でエラーだと伝える作りです。監視も再試行も効かなくなるので、失敗は必ず番号で表します。401と403の取り違えも定番です。誰か分からないのが401、誰かは分かるが許してもらえないのが403です。
