Tips
そのエラー、4xxならあなたのミス、5xxならサーバーの問題
2025-10-20
結論：4xxと5xxの違いだけ覚える
| 範囲 | 意味 | 調べる場所 |
|---|---|---|
| 4xx | あなたのミス | リクエスト側 |
| 5xx | サーバーの問題 | サーバー側 |
5xxが出たのにフロントのコードを直しても無駄。サーバーのログを見る。
4xxでよく見るやつ
| コード | 意味 | まず確認すること |
|---|---|---|
| 400 | リクエストが不正 | パラメータの形式 |
| 401 | 認証が必要 | ログインしたか |
| 403 | 権限がない | アクセス権限 |
| 404 | 見つからない | URLのtypo |
401と403の違い
- 401 = 「あなた誰？」（未ログイン）
- 403 = 「あなたは知ってるけど、ダメ」（権限不足）
401→ログインする、403→管理者に権限をもらう。
404が出たら
- URLのスペルを確認
- ファイルがサーバーに存在するか確認
- リダイレクト設定を確認
5xxでよく見るやつ
| コード | 意味 | まず確認すること |
|---|---|---|
| 500 | サーバー内部エラー | サーバーのエラーログ |
| 502 | Bad Gateway | 上流サーバーの状態 |
| 503 | サービス利用不可 | 過負荷orメンテ中 |
| 504 | タイムアウト | 処理時間 |
500が出たら
**サーバーのエラーログを見る。**フロントのコードを見ても無駄。
# Apacheの場合
tail -f /var/log/apache2/error.log
# Nginxの場合
tail -f /var/log/nginx/error.log
PHPなら構文エラー、パーミッションエラーが多い。
私がやらかした失敗
APIが500を返す → JavaScriptのfetchを何度も書き直す → 変わらない
2時間後、サーバー側のPHPでセミコロンが抜けていたと判明。
5xxが出たら、フロントを疑うのは時間の無駄。まずサーバーのログ。
DevToolsでの確認方法
- DevTools → Networkタブ
- リクエストをクリック
- Status列でコードを確認
赤字で表示されているリクエストがエラー。
curlでの確認
# ヘッダーだけ取得
curl -I https://example.com/api/data
# レスポンス例
HTTP/1.1 404 Not Found
ブラウザを経由せず確認できる。キャッシュの影響も受けない。
3xxはリダイレクト
| コード | 意味 |
|---|---|
| 301 | 恒久的な移動（SEO引き継ぐ） |
| 302 | 一時的な移動（SEO引き継がない） |
| 304 | 変更なし（キャッシュ使用） |
301と302を間違えるとSEOに影響。恒久的な移動なら301。
よくある症状と原因
| 症状 | 最初に確認 |
|---|---|
| ページが表示されない | ステータスコード |
| 画像だけ表示されない | その画像のリクエストが404か |
| APIが動かない | 401/403か500か |
| たまに動かない | 503/504か |
まとめ
- 4xxはこちらのミス、5xxはサーバーの問題
- 500が出たらサーバーのログを見る（フロントを直しても無駄）
- 401は「誰？」、403は「権限ない」
- DevToolsのNetworkタブでステータスコードを確認
- 恒久リダイレクトは301、一時的なら302