MENU

HTTPステータスコードを開発者ツールで見る

目次

はじめに: ステータスコードはサーバーからの返事

ブラウザやJavaScriptがサーバーへHTTPリクエストを送ると、サーバーはHTTPレスポンスを返します。このレスポンスには、処理結果を表すステータスコードが含まれます。

ステータスコードは、サーバーからの返事の状態を数字で表したものです。成功したのか、別のURLへ移動したのか、ページが見つからないのか、サーバー側でエラーが起きたのかを判断する手がかりになります。

たとえば、Webページが表示されないとき、画面だけを見ても原因は分かりにくいことがあります。しかし、開発者ツールでステータスコードを見ると、404ならURLやルーティング、500ならサーバー側の処理、401なら認証まわり、といった切り分けがしやすくなります。

基本情報技術者試験でも、HTTPステータスコードはHTTPの基礎知識として出てきます。この記事では、代表的な分類を押さえながら、Chrome開発者ツールで実際に見る視点へつなげます。

HTTPステータスコードは、サーバーがHTTPリクエストに対してどのような結果を返したかを示す数字です。

HTTPレスポンスとステータスコードの関係

HTTP通信は、リクエストとレスポンスの組み合わせです。

ブラウザ  -- HTTPリクエスト -->  サーバー
ブラウザ  <-- HTTPレスポンス --  サーバー

ステータスコードは、サーバーから返るHTTPレスポンスに含まれます。

たとえば、ページの取得に成功した場合は 200、存在しないURLにアクセスした場合は 404、サーバー内部でエラーが起きた場合は 500 が返ることがあります。

JavaScriptの fetch() でも、レスポンスのステータスコードを確認できます。

fetch("/api/articles")
  .then((response) => {
    console.log(response.status);
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });

response.status には、サーバーから返ってきたステータスコードが入ります。

ステータスコードは、レスポンス本文の中身を見る前に、通信の結果を大まかに判断するための重要な情報です。

HTTPステータスコードはHTTPレスポンスに含まれ、通信結果を大まかに判断する手がかりになります。

ステータスコードの大まかな分類

HTTPステータスコードは、最初の数字を見ると大まかな意味が分かります。

100番台  → 情報
200番台  → 成功
300番台  → リダイレクト
400番台  → クライアント側の問題
500番台  → サーバー側の問題

最初からすべてのコードを暗記する必要はありません。まずは分類を押さえることが大切です。

代表的なものを見てみます。

200 OK                  → 成功
301 Moved Permanently   → 恒久的なリダイレクト
302 Found               → 一時的なリダイレクト
304 Not Modified        → キャッシュを使える
400 Bad Request         → リクエストの形式が不正
401 Unauthorized        → 認証が必要
403 Forbidden           → アクセス権限がない
404 Not Found           → リソースが見つからない
500 Internal Server Error → サーバー内部エラー
503 Service Unavailable → 一時的に利用できない

たとえば、400番台はクライアント側のリクエストに問題がある場合によく使われます。URLが間違っている、認証情報がない、権限が足りない、といった状況です。

500番台は、サーバー側で処理できなかった場合に使われます。PHPのエラー、データベース接続の失敗、サーバーの過負荷などが原因になることがあります。

ステータスコードは、最初の数字を見ると成功、リダイレクト、クライアント側の問題、サーバー側の問題を大まかに判断できます。

開発者ツールでステータスコードを見る

Chrome開発者ツールでは、NetworkタブでHTTPステータスコードを確認できます。

手順は次のとおりです。

1. Chromeでページを開く
2. 開発者ツールを開く
3. Networkタブを選ぶ
4. ページを再読み込みする
5. Status列を見る

Networkタブには、HTML、CSS、JavaScript、画像、API通信などが一覧で表示されます。その中のStatus列に、200404500 などのステータスコードが表示されます。

通信の1行をクリックすると、さらに詳しい情報を見られます。特に、次の項目を合わせて見ると原因を追いやすくなります。

Request URL     → どのURLにアクセスしたか
Request Method  → GETやPOSTなど
Status Code     → サーバーからの結果
Response        → 返ってきた本文

たとえば、画像が表示されない場合、その画像ファイルのリクエストが 404 になっていれば、画像のパスが間違っている可能性があります。

API通信が 500 になっていれば、JavaScript側だけでなく、サーバー側の処理やログも確認する必要があります。

開発者ツールのNetworkタブでは、各HTTP通信のステータスコードをStatus列で確認できます。

PHPでステータスコードを返してみる

PHPでは、http_response_code() を使ってステータスコードを設定できます。

まず、成功時にJSONを返す例です。

<?php
header('Content-Type: application/json; charset=UTF-8');

echo json_encode([
    'message' => 'ok',
], JSON_UNESCAPED_UNICODE);

この場合、明示的に指定しなければ、多くの場合は成功を表す 200 として返ります。

見つからない場合に 404 を返すなら、次のように書けます。

<?php
header('Content-Type: application/json; charset=UTF-8');
http_response_code(404);

echo json_encode([
    'error' => '記事が見つかりません',
], JSON_UNESCAPED_UNICODE);

サーバー側の処理でエラーとして扱いたい場合は、500 を返すこともあります。

<?php
header('Content-Type: application/json; charset=UTF-8');
http_response_code(500);

echo json_encode([
    'error' => 'サーバー側でエラーが発生しました',
], JSON_UNESCAPED_UNICODE);

大切なのは、エラー本文だけでなく、適切なステータスコードも返すことです。JavaScript側や開発者ツールでは、ステータスコードを見て通信結果を判断するからです。

PHPでは http_response_code() を使うと、HTTPレスポンスのステータスコードを明示できます。

よく見るステータスコードと原因の考え方

実務でよく見るステータスコードは、原因の見当をつけるためのヒントになります。

200 は成功です。HTML、画像、APIのJSONなどが正常に返っている状態です。

301302 はリダイレクトです。別のURLへ移動するようにサーバーが指示しています。HTTPからHTTPSへ転送する場合や、ログイン後に別ページへ移動する場合などに使われます。

304 は、以前取得したデータを再利用できることを示します。キャッシュが関係するため、画像やCSS、JavaScriptの読み込みで見ることがあります。

401 は認証が必要な状態です。ログインしていない、トークンがない、認証ヘッダーが足りない、といった原因が考えられます。

403 はアクセスが禁止されている状態です。認証はされていても権限が足りない場合などに使われます。

404 は見つからないという意味です。URLの間違い、ルーティングの設定漏れ、ファイルの配置ミスなどが原因になります。

500 はサーバー内部エラーです。PHPのエラー、例外、データベース接続の失敗など、サーバー側のログを確認する必要があります。

ステータスコードを見ると、エラーの原因がクライアント側に近いのか、サーバー側に近いのかを切り分けやすくなります。

試験ではどう問われるか

基本情報技術者試験では、HTTPステータスコードは分類で押さえておくと理解しやすくなります。

特に重要なのは、200番台が成功、300番台がリダイレクト、400番台がクライアント側の問題、500番台がサーバー側の問題を表すことです。

代表的なコードとしては、200301302404500 などを見かけることがあります。

また、HTTPリクエストとHTTPレスポンスの関係も一緒に理解しておくと、問題文を読みやすくなります。クライアントがリクエストを送り、サーバーがレスポンスとしてステータスコードや本文を返します。

試験では、ステータスコードを丸暗記するより、最初の数字による分類を理解することが大切です。

実務ではどう使われるか

実務では、ステータスコードを見ることでトラブルの切り分けがしやすくなります。

たとえば、ページが見つからない場合に 404 なら、URLやルーティング、ファイル配置を確認します。500 なら、サーバー側のエラーログやPHPの処理を確認します。

API通信が失敗したときも、まずNetworkタブでステータスコードを見ます。JavaScriptのエラーだけを見ていると、サーバーが何を返したのか分からないことがあります。

ログインがうまくいかない場合、401 なら認証情報、403 なら権限を疑うことができます。画像やCSSが反映されない場合、404304 を見ることで、パスの問題なのかキャッシュの問題なのかを考えやすくなります。

実務では、画面の見た目だけで判断せず、Networkタブで実際のステータスコードを確認することが大切です。

HTTPステータスコードを読めると、Webアプリの通信エラーを原因別に切り分けやすくなります。

まとめ: ステータスコードを読むと通信の状態が分かる

HTTPステータスコードは、サーバーがHTTPリクエストに対して返す結果を表す数字です。成功、リダイレクト、クライアント側の問題、サーバー側の問題を大まかに判断できます。

最初はすべてのコードを覚える必要はありません。200番台、300番台、400番台、500番台の分類を押さえ、よく見る 200404500 などから理解していくと十分です。

Chrome開発者ツールのNetworkタブを使えば、実際のWebページやAPI通信で返っているステータスコードを確認できます。PHPでは http_response_code() を使って、意図したステータスコードを返せます。

ステータスコードを理解すると、HTTP通信の結果を読み取り、エラー調査を落ち着いて進めやすくなります。

あわせて読みたい
Chrome開発者ツールでHTTP通信を見る はじめに Webページを開くとき、ブラウザの裏側ではさまざまなHTTP通信が行われています。 たとえば、HTMLを取得する通信、CSSファイルを取得する通信、JavaScriptファ...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

20代前半に、ゲームボーイアドバンス、ニンテンドーDS、Wii向けソフトの開発に携わりました。

その後、20代後半にかけては組み込み系エンジニアとして、主にサーバーソフトウェアの開発を経験。

30代からはWebエンジニアとして、さまざまなWebサービスの開発に携わってきました。

現在は40代となり、ゲーム開発、組み込み開発、Web開発で培った経験を活かしながら、技術をわかりやすく伝える活動にも取り組んでいます。

コメント

コメントする

CAPTCHA


目次