フロントエンドエンジニアのためのHTTP Status Code 入門編

「404はページが見つからないエラーで、500は...なんだっけ」と曖昧に覚えてしまいがちなステータスコードについてざっくりおさらい。

HTTP Status Codeとは

API通信したときや、ページにアクセスしたときなどに表示されるステータスです。
詳しい説明は天下のMDNさんから引用すると以下のようになります。

HTTP のレスポンスステータスコードは、特定の HTTP リクエストが正常に完了したどうかを示します。 レスポンスは 5 つのクラスに分類されています。
情報レスポンス (100–199)
成功レスポンス (200–299)
リダイレクトメッセージ (300–399)
クライアントエラーレスポンス (400–499)
サーバーエラーレスポンス (500–599)
『HTTP レスポンスステータスコード - HTTP | MDN』 より引用
https://developer.mozilla.org/ja/docs/Web/HTTP/Status

これがしっかり理解できていないと、API通信に失敗したときなどに問題の切り分けが正しくできず、デバッグに時間を要します。

「何が間違ってて通信が失敗するんだろう？」
「渡すパラメータ？」「エンドポイント？」「フロントじゃなくてサーバー側の書き方？」

返ってくるHTTP Status Codeを見れば一目瞭然。
そのために代表的な9つのHTTP Status Codeを見ていきましょう。

代表的な9つのHTTP Status Code

200: OK

全エンジニアが好きなステータスコード。
通信が成功したことを意味します。

400: Bad Request

不正なリクエストが送られてきた時に返ってきます。
主にAPI叩く時にわたすパラメータが間違っている場合があるので、そこを見直しましょう。
API仕様書や（仕様書がない場合は）バックエンドの処理を覗くなどして、どういったパラメータを受け取ることが想定されているか確認します。

401: Unauthorized

認証が通らないときに出ます。馴染み深いのがBasic認証ですね。
今一度IDとパスワードが間違っていないか確認しましょう。

403: Forbidden

サーバー側がフロントからのリクエストを拒否している状態です。
リクエストする権限がありません。
本来認証が必要な保護されたコンテンツに対して、ログインせずにアクセスしている可能性があります。

404: Not Found

ページが存在しない時に出ます。
普通にネットブラウジングしてて対象のページがないときによく見かけますね。
フロントエンド開発のときはAPIを実装していてエンドポイントが存在しない場合に出ます。
私がよくやってしまうのは、バックエンドのローカルサーバーを立ち上げてはいるものの、gitをpullし忘れていたり、違うブランチを参照したりして、エンドポイントがないパターンです。
その場合はgitをpullする or ちゃんとエンドポイントが書かれてるブランチにcheckoutして解決します。

405: Method Not Allowed

許可されていないメソッドを使用しています。
POSTやGET、PUTなどのHTTPメソッドの種類が間違っていないか確認しましょう。

500: Internal Server Error

サーバー側でバグがあったりして処理に失敗しているパターン。
こうなったらフロントエンドの責任じゃない。
サーバー側を開発しているエンジニアに事象を相談しましょう。

502: Bad Gateway

サーバへのアクセス集中、またはブラウザにキャッシュが溜まりまくってる状態です。
また、リクエストに対しての処理に時間がかかりすぎていることで、途中で強制的に終了している場合もあります。

503: Service Unavailable

めっちゃサーバに負荷がかかっています。
アクセスが集中している、メンテナンス中であるなどの理由でサーバから返ってくるエラーです。