本文へ移動

ホーム / QA / 第2部 テストの基礎

第2部 テストの基礎・第4章

Web の仕組みと不具合の切り分け

★★☆ 重要5トピック・面接 4問

不具合の原因の見当をつけ、正確に報告するための Web の仕組みを押さえる。API と DB のテストは次の章で扱う。

別のページで開く →

ネットワーク図を読み込んでいます…

ひとことで

ステータスコードの百の位で、送った側(4xx)かサーバー側(5xx)かの見当をつけ、画面の問題か API の問題かを切り分ける。

Web やアプリの不具合の多くは、画面の裏でやり取りしている HTTP の通信を見ると原因の見当がつきます。ブラウザの開発者ツール(F12)の「ネットワーク」タブで、リクエストごとにステータスコード・送ったデータ・返ってきたデータ・時間を見られます。

ブラウザアプリサーバーAPIリクエスト:メソッド(GET・POST)・URL・ヘッダー・本文レスポンス:ステータス(200・404・500)・ヘッダー・本文ステータスの百の位で「どちら側の問題か」の見当をつける:4xx は送った側、5xx はサーバー側
HTTP のやり取りの中身と、ステータスコードの読み方
ステータス意味QA として考えること
2xx(200・201・204)成功画面がおかしければフロント側か、返ってきたデータの中身を疑う
3xx(301・302・304)リダイレクト・キャッシュを使ったログイン後の戻り先、古い表示が残るならキャッシュ
400リクエストの形が正しくない入力チェックの漏れ。画面で止めるべき値が送られていないか
401・403401:ログインしていない/403:権限がない権限のテスト。他人のデータが見えないか
404見つからないURL の誤り、削除済みのデータ
409・422競合・内容が正しくない二重登録、同時更新
429回数の制限を超えたレート制限の仕様どおりか
500サーバー内部のエラーサーバーの不具合。時刻とリクエストを添えて報告
502・503・504途中の中継やサーバーが応答しない・時間切れ障害や過負荷。環境の問題かも先に確認

ステータスコードの詳しい解説(SRE)

面接ではこう答える

画面の不具合を見つけたら、まず開発者ツールでその操作の HTTP の通信を見ます。ステータスが 2xx なのに表示がおかしければフロントエンドか返ってきたデータの中身、4xx なら送った値や権限、5xx ならサーバー側を疑います。401 はログインしていない、403 は権限がない、のように意味を区別して報告すると、開発者がすぐ原因に当たれます。

4.2開発者ツールの使い方

用語★★☆ 重要
ひとことで

ブラウザに付いている調査の道具。ネットワーク・コンソール・アプリケーションのタブで、通信・エラー・Cookie を見られる。

ブラウザの開発者ツール(F12、Mac は Command+Option+I)は、QA の一番の道具です。画面の裏で起きていることを見て、不具合の原因の見当をつけ、報告に証拠を添えられます。

ネットワークリクエストの一覧ステータス・時間送った値・返った値cURL としてコピーコンソールJavaScript のエラーCORS などの警告赤い行に注目アプリケーションCookie・ストレージキャッシュの中身ログイン状態の確認その他要素:HTML と CSS端末の表示を真似る通信を遅くする
開発者ツールのタブと、QA がよく見るもの
やりたいこと操作
問題の通信を探すネットワークタブを開いたまま操作し、赤い行(4xx・5xx)や時間が長い行を見る
ページを移っても記録を残す「ログを保持」(Preserve log)に印を付ける
遅い回線を再現するネットワークタブの通信速度の設定(Slow 4G など)
スマホの表示を見るデバイスのツールバーで画面の大きさを切り替える(本物の端末の代わりにはならない)
通信の記録を渡すHAR ファイルとして書き出す(中に Cookie やトークンが含まれるので扱いに注意)

報告には、問題のリクエストを右クリックして「cURL としてコピー」した内容を添えると、開発者がすぐ再現できます(トークンなどの秘密は消してから)。

面接ではこう答える

開発者ツールは、ブラウザに付いている調査の道具です。ネットワークタブでは操作ごとの通信のステータス・時間・送った値と返った値、コンソールでは JavaScript のエラー、アプリケーションタブでは Cookie やストレージを見られます。不具合の報告には、問題のリクエストを cURL としてコピーしたものやエラーの内容を添えると、開発者がすぐ再現できます。

4.3CORS エラーの見方

用語★★☆ 重要
ひとことで

別のオリジンへの通信を、相手が許可しているときだけブラウザが読ませる仕組み。サーバーのエラーが CORS エラーに見えることがある。

CORS:プリフライトと、500 が CORS エラーに見える落とし穴ブラウザサーバー(API)OPTIONS /api/orders(プリフライト)204 + Access-Control-Allow-OriginPOST /api/orders(本体)201 + Access-Control-Allow-Origin → 画面で読めるPOST /api/orders(サーバーの中でエラー)500(エラー応答に CORS のヘッダーが付かない)落とし穴コンソールには「blocked by CORS policy」とだけ出る → ネットワークタブで本当のステータス(500)を確かめる
CORS のやり取りと、サーバーのエラーが CORS エラーに見える例

CORS は、ブラウザが「別のオリジン(プロトコル・ドメイン・ポートの組)への通信を、相手が許可しているときだけ読ませる」仕組みです。開発者ツールのコンソールに「blocked by CORS policy」と出たら、次の順に見ます。

  • ネットワークタブで、本体のリクエストの前に OPTIONS(プリフライト)が出ていないか、そのステータスは何か。
  • レスポンスに Access-Control-Allow-Origin が付いているか、値が今のオリジンと一致しているか。
  • よくある落とし穴:サーバーが 500 などのエラーを返すと、そのエラー応答に CORS のヘッダーが付かず、ブラウザには CORS エラーとしか見えないことがあります。CORS エラーを見たら、実際のステータスコードも必ず確かめます。

CORS とオリジンの詳しい解説(SRE)

面接ではこう答える

CORS は、ブラウザが別のオリジン、つまりプロトコル・ドメイン・ポートの組が違う相手への通信を、相手が許可しているときだけ読ませる仕組みです。コンソールに CORS のエラーが出たら、プリフライトの OPTIONS とそのステータス、レスポンスの Access-Control-Allow-Origin を確かめます。注意したいのは、サーバーが 500 を返すとその応答に CORS のヘッダーが付かず、CORS エラーにしか見えないことで、実際のステータスも必ず見ます。

別のページで開く →

障害対応の演習を読み込んでいます…

ひとことで

一度取ったデータを保存して使い回す仕組み。ブラウザ・CDN・サーバーに何段もあり、古い表示の原因になる。

「修正をデプロイしたのに直っていない」「他の人には新しい表示が見える」ときは、どこかのキャッシュ(一度取ったデータを保存して使い回す仕組み)が古いまま残っていることを疑います。

ブラウザのキャッシュスーパーリロードで消えるCDN のキャッシュ配信網の途中に保存サーバーのキャッシュRedis などDB本当のデータ「直したのに古い表示のまま」は、どこかの段のキャッシュが残っていることが多い
キャッシュは何段にもある
切り分けの手順分かること
スーパーリロード(Ctrl+Shift+R)・シークレットウィンドウで開く自分のブラウザのキャッシュが原因か
ネットワークタブで「キャッシュを無効化」に印を付けて再読み込み同上。304(変わっていない)や「メモリから」の表示も見る
レスポンスヘッダーの Cache-Control・Age・CDN の HIT / MISS を見るCDN の途中で古いものが返っているか
API を直接呼ぶサーバー側のキャッシュ(Redis など)が古いか

テストでは、データを更新したあとに一覧・詳細・検索の結果がいつ新しくなるか(すぐか、数分後か)を仕様として確かめます。「数分の遅れは許す」と決まっていれば不具合ではありません。

面接ではこう答える

キャッシュは、一度取ったデータを保存して使い回し、速くする仕組みです。ブラウザ、CDN、サーバーのアプリや Redis など何段にもあるので、修正したのに古い表示のままという不具合が起きます。切り分けは、スーパーリロードやシークレットウィンドウで自分のブラウザを除き、レスポンスヘッダーで CDN のヒットを見て、最後に API を直接呼んでサーバー側を確かめます。

この章のまとめ

🖨 まとめシート(印刷・PDF)
  • ステータスコードと開発者ツールで、画面か API かを切り分ける
  • CORS・Cookie・キャッシュの不具合の見分け方
  • 再現できる証拠(cURL・HAR)を添えて報告する
  • HTTP のステータスコードと切り分け:ステータスコードの百の位で、送った側(4xx)かサーバー側(5xx)かの見当をつけ、画面の問題か API の問題かを切り分ける。
  • 開発者ツールの使い方:ブラウザに付いている調査の道具。ネットワーク・コンソール・アプリケーションのタブで、通信・エラー・Cookie を見られる。
  • CORS エラーの見方:別のオリジンへの通信を、相手が許可しているときだけブラウザが読ませる仕組み。サーバーのエラーが CORS エラーに見えることがある。
  • Cookie とセッションで起きる不具合:Cookie はブラウザがサイトごとに保存して自動で送る小さなデータで、ログイン状態の受け渡しに使う。属性で送る範囲や期限が決まる。
  • キャッシュで起きる「古い表示」:一度取ったデータを保存して使い回す仕組み。ブラウザ・CDN・サーバーに何段もあり、古い表示の原因になる。

この章のクイズ

面接ではこう聞かれる

まず答えを見ずに声に出して答え、そのあと開いて比べる。

Q1不具合を見つけたとき、どんな情報を報告しますか?

模範回答

開発者がすぐに再現して直せるように、次の情報を報告します。まず一言で分かる件名、再現手順(前提のデータやアカウントも含めて番号つきで)、期待する結果と実際の結果、そして再現する頻度(毎回か、10回に1回か)です。

次に環境として、検証環境の名前、アプリのバージョンやコミット、ブラウザや OS、端末です。証拠として、スクリーンショットや画面の録画、開発者ツールで見た失敗したリクエストのステータスとレスポンス(cURL の形でコピーし、トークンは消します)、発生した時刻(サーバーのログを探すため)、エラーのメッセージを添えます。

最後に、影響の範囲と重大度の見立て、回避策があるかを書きます。他の条件で起きるか(別のブラウザ、別のユーザー)も試しておくと、原因の切り分けが早くなります。

深掘りされたら

  • 開発者に「再現しない」と言われたらどうしますか?
  • 重大度と優先度はどう分けて考えますか?

見られているポイント再現手順・期待と実際・環境・ログやリクエスト

Q2画面に「エラーが発生しました」と出ました。原因がフロントエンドかサーバーかを、どう切り分けますか?

模範回答

まずブラウザの開発者ツールのネットワークタブで、その操作のときのリクエストを見ます。リクエストが 4xx や 5xx を返していればサーバー側(4xx なら送った内容が正しくない可能性もある)、200 で正しいデータが返っているのに画面がおかしければフロントエンド側を疑います。コンソールタブに JavaScript のエラーが出ていないかも見ます。

次に、そのリクエストを curl などで画面を通さずに送り直し、同じ結果になるかを確かめます。同じならサーバー、画面からだけ起きるならフロントエンドや送るデータの作り方です。報告には、リクエストとレスポンス、発生した時刻(サーバーのログを探すため)を添えます。CORS エラーに見えても、実はサーバーが 500 を返していることがあるので、ステータスコードは必ず確認します。

深掘りされたら

  • 開発者ツールが使えないスマホのアプリでは、どう調べますか?

見られているポイントネットワークタブ・ステータスコード・API 単体での再現という手順

Q3「ログインしているのに、ときどき急にログアウトされる」と報告がありました。何を調べますか?

模範回答

まず再現の条件を集めます。どの画面で、どの操作のあとに起きるか、時間がたってからか、別のタブや別のサブドメインに移ったときか、外部の決済画面から戻ったときか、です。

次に開発者ツールで、ログアウトになった直前のリクエストに Cookie が送られているか、レスポンスが 401 か、Cookie の有効期限・Domain・SameSite の属性を確かめます。外部から戻るときだけなら SameSite、サブドメインをまたぐときだけなら Domain、一定時間後なら有効期限やサーバー側のセッションの期限を疑います。条件と証拠をそろえて開発者に渡します。

深掘りされたら

  • 再現しないときは、どう情報を集めますか?
  • セキュリティの観点で、ログアウトで確かめることは?

見られているポイント再現条件の絞り込みと、Cookie の属性の知識

Q4修正をデプロイしたのに、自分の画面では直っていません。どう切り分けますか?

模範回答

キャッシュを順に疑います。まずスーパーリロードやシークレットウィンドウで開き直し、直れば自分のブラウザのキャッシュです。直らなければ、ネットワークタブでレスポンスのヘッダーを見て、CDN でヒットしていないか、どの版の JavaScript を読んでいるかを確かめます。

それでも古ければ API を直接呼び、サーバー側のキャッシュや、そもそもデプロイが反映されていないかを開発者と確かめます。利用者にも同じことが起きるなら、キャッシュを消す手順やファイル名に版を付ける仕組みが必要か、という改善の提案にもつなげます。

深掘りされたら

  • 利用者が古い表示のままにならないよう、どんな仕組みがありますか?

見られているポイントキャッシュの段を意識した、順序立てた切り分け