WEB PROTOCOL

HTTPステータスコード(HTTP Status Codes)

1xx〜5xxの各グループと代表的なステータスコードの意味を可視化

INTERACTIVE VISUALIZATION
1xx情報
2xx成功
3xxリダイレクト
4xxクライアントエラー
5xxサーバーエラー
グループ
ALL
全体
ステータスコード
-
意味
-
全体概要
進捗
1 / 12
HTTPステータスコードとは
シナリオ
1xx〜5xxの各グループを順に解説し、代表的なステータスコードの意味を学びます
ステップ1 / 12
自動再生でHTTPステータスコードの流れを順番に確認できます
HTTPステータスコードは、サーバーがクライアントのリクエストに対して返す3桁の数値です。
最初の1桁でレスポンスの種類(成功/リダイレクト/エラー等)が決まり、残り2桁で詳細な意味を表します。RFC 7231等で定義されています。
ステータスグループ
1xx
情報
2xx
成功
3xx
リダイレクト
4xx
クライアントエラー
5xx
サーバーエラー
解説

📌
HTTPステータスコードとは

HTTPステータスコードは、サーバーがクライアントのリクエストに対して返す3桁の数値で、リクエストの処理結果を示します。学校の通知表に例えてみましょう。先生(サーバー)が生徒(クライアント)の提出物(リクエスト)に対して成績(ステータスコード)を返すようなものです。「よくできました(200 OK)」「提出先が変わりました(301)」「未提出です(404)」「採点できませんでした(500)」といった具合です。

1xx情報レスポンス (処理を続行中)
2xx成功 (リクエストが正常に処理された)
3xxリダイレクト (別の場所に転送)
4xxクライアントエラー (リクエストに問題あり)
5xxサーバーエラー (サーバー側で問題発生)

上のツールで「ステータスコード一覧」シナリオを再生すると、各グループの詳細と代表的なコードが確認できます。

📌
特徴

  • 🔢3桁の数値体系百の位(最初の1桁)がカテゴリを決定します。1xx=情報、2xx=成功、3xx=リダイレクト、4xx=クライアントエラー、5xx=サーバーエラー。残りの2桁で具体的な意味を表現します。この体系により、コードを見ただけで大まかな意味が分かるように設計されています。
  • ⚙️自動処理3xxリダイレクトはブラウザが自動的に追従します。例えば301 Moved Permanentlyを受け取ると、ブラウザはLocationヘッダーに指定された新しいURLに自動的にリクエストを送信します。ユーザーが手動でURLを変更する必要はありません。
  • 📡RESTful設計の基盤REST APIでは、適切なステータスコードの使用がAPI設計の品質を左右します。リソース作成には201、削除成功には204、認証エラーには401、権限エラーには403を返すことで、クライアントは統一的にエラーハンドリングを実装できます。
  • 🔍DevToolsで確認可能ChromeのDevTools(F12→Networkタブ)で、各HTTPリクエストのステータスコードをリアルタイムに確認できます。200、301、404、500など、実際のWeb通信で発生するステータスコードを観察することで理解が深まります。

📌
ユースケース

📡 REST API設計
GET→200、POST→201、PUT→200、DELETE→204のように、CRUD操作ごとに適切なステータスコードを選択します。バリデーションエラーには400、認証エラーには401を返すことで、クライアント側のエラーハンドリングが統一的になります。
🔍 SEO(301 vs 302)
URL変更時に301(恒久的移動)と302(一時的移動)を正しく使い分けることが重要です。301はSEO評価を新URLに引き継ぎますが、302は旧URLの評価を維持します。サイトリニューアル時は301、メンテナンスページは302が適切です。
⚠️ エラーハンドリング(4xx vs 5xx)
4xxはクライアント側の問題(ユーザーに修正を促す)、5xxはサーバー側の問題(運用チームにアラートを送る)です。401と403の使い分けも重要で、401は「ログインしてください」、403は「アクセス権限がありません」を意味します。
📊 監視/アラート(5xxの急増検知)
5xxエラーの急増はサーバー障害の兆候です。Datadog、New Relic等の監視ツールで5xxレートを追跡し、閾値を超えた場合にSlack通知やPagerDutyアラートを送信します。502/503/504の区別により、障害がアプリ、プロキシ、上流サーバーのどこで発生しているかを特定できます。

📌
用語解説

200 OK
= 成功
最も一般的なHTTPステータスコードです。GETリクエストでリソースの取得に成功した場合、POSTリクエストで処理が正常に完了した場合に返されます。レスポンスボディにはリクエストされたデータ(HTML、JSON等)が含まれます。REST APIでは、読み取り操作(GET)と更新操作(PUT)の成功時に使用します。
Client200S
301 Moved Permanently
= 恒久的リダイレクト
リソースが恒久的に別のURLに移動したことを示します。ブラウザはLocationヘッダーに指定された新しいURLに自動的にリクエストを送信します。検索エンジンはSEO評価を新URLに引き継ぎます。サイトリニューアルやドメイン変更、HTTP→HTTPSへの移行時に使用されます。
old URLnew URL301
304 Not Modified
= キャッシュ有効
条件付きリクエスト(If-None-Match、If-Modified-Since)に対して、リソースが変更されていないことを示します。サーバーはレスポンスボディを送信せず、クライアントはローカルキャッシュを使用します。帯域幅の節約とレスポンス時間の短縮に貢献します。
Cachevalid304
401 vs 403
= 認証 vs 認可
401 Unauthorized: 認証が必要(=ログインしていない)。WWW-Authenticateヘッダーで認証方式を通知します。403 Forbidden: 認証済みだが権限がない(=ログイン済みだがアクセス権限なし)。管理者限定ページに一般ユーザーがアクセスした場合などに返されます。この2つの使い分けはセキュリティ設計で重要です。
401= not logged in403= no permission
404 Not Found
= リソース未発見
リクエストされたリソースがサーバー上に存在しないことを示す、最もよく知られたエラーコードです。URLのタイプミス、削除されたページ、無効なAPIエンドポイントで発生します。カスタム404ページを用意し、ユーザーをトップページや検索ページに誘導するのがベストプラクティスです。
404Not Found
500 Internal Server Error
= サーバー内部エラー
サーバー内部で予期しないエラーが発生したことを示す汎用的なエラーコードです。アプリケーションの例外、設定ミス、依存サービスの障害などが原因です。本番環境ではエラーの詳細をユーザーに公開せず、サーバーログに記録してデバッグに活用します。Sentryなどのエラー追跡ツールと連携して迅速に検知・修正します。
500Server Error

📌
ステータスコード一覧

1xx 情報
100Continue
101Switching Protocols
2xx 成功
200OK
201Created
204No Content
3xx リダイレクト
301Moved Permanently
302Found
304Not Modified
307Temporary Redirect
4xx クライアントエラー
400Bad Request
401Unauthorized
403Forbidden
404Not Found
429Too Many Requests
5xx サーバーエラー
500Internal Server Error
502Bad Gateway
503Service Unavailable
504Gateway Timeout

📌
REST APIでの使い分け

CRUD操作ごとの推奨ステータスコードを整理します。適切なステータスコードを返すことで、APIの品質と使いやすさが向上します。

GET
リソース取得
200OK
POST
リソース作成
201Created
PUT
リソース更新
200OK
PATCH
リソース部分更新
200OK
DELETE
リソース削除
204No Content
エラー時の使い分け
400バリデーションエラー
401未認証(ログインが必要)
403権限不足
404リソースが存在しない
429レート制限超過
500サーバー内部エラー

関連コンテンツ

HTTP通信

HTTP通信

ブラウザとサーバー間のHTTPリクエスト/レスポンスの仕組みを可視化

HTTP/1.1 vs HTTP/2

HTTP/1.1 vs HTTP/2

直列リクエストと多重化の違いをウォーターフォールチャートで比較

セッション vs Cookie vs JWT

セッション vs Cookie vs JWT

認証方式の違いと使い分けを可視化

CDNエッジキャッシュ

CDNエッジキャッシュ

CDNのエッジキャッシュとオリジンサーバーの関係と仕組みを可視化

CORS

CORS

ブラウザのクロスオリジン制約とCORSヘッダーによるアクセス制御の仕組みを可視化

ブラウザキャッシュ

ブラウザキャッシュ

Cache-Control、ETag、条件付きリクエストによるブラウザキャッシュの仕組みを可視化