アジェンダ
開発者ツールのネットワークタブを使用して、API 呼び出しを確認し、コード内での呼び出し箇所を特定する具体的な手順について簡単にまとめます。
手順
1. 開発者ツールを開く
まず、ブラウザで開発者ツールを開きます。
-
Google Chrome や Microsoft Edge を使っている場合、次の手順で開発者ツールを開きます:
- 右クリックして「検証」を選択する。
- または、
F12キーを押すか、macOS ではCmd + Opt + I、Windowsでは、Ctrl + Shift + Iを押します。
-
開発者ツールのメニューが表示されたら、「ネットワーク」タブをクリックします。
2. ページをリロードして API 呼び出しをキャプチャ
「ネットワーク」タブが開いた状態で、ページをリロード（再読み込み）します。API 呼び出しはページが読み込まれる際に実行されるため、これで API リクエストがキャプチャされます。
3. フィルタリングして API 呼び出しを探す
ネットワークタブでは、膨大な数のリクエストが表示されることがあるため、XHR や Fetch フィルターを使って API 呼び出しを絞り込みます。
- XHR（XMLHttpRequest）や Fetch は、主に API 呼び出しで使用されるリクエストの種類です。これらにフィルタリングすることで、API リクエストのみを表示することができます。
4. API リクエストの詳細を確認する
特定の API リクエストをクリックすると、その詳細が表示されます。ここで重要なのは以下のポイントになります。
(a) Request URL
リクエストが送信された API の URL です。これを使用して、ソースコード内でどのエンドポイントにリクエストを送信しているかを確認できます。
(b) ペイロード（Request Payload）
- 送信されたリクエストのペイロード（データ）を確認します。特に、POST リクエストや PUT リクエストの場合、サーバーに送信されているデータがこのセクションに表示されます。
- ペイロード内のフィールドや値を使って、コード内でどのデータがどのように送られているかを確認する手がかりにできます。
(c) リクエストヘッダー
- API のリクエストヘッダーは、認証トークン（例えば
Authorizationヘッダー）や他の重要なメタ情報を含むことがあります。 - 認証や API の特定の設定がコード内でどのように実装されているかを知る手がかりとなります。
(d) レスポンス（Response）
- API からのレスポンスを確認します。返されるデータの形式（JSON など）や内容を確認することで、どのコンポーネントでこのデータが使われているかがわかる場合があります。
5. ソースコード内で API 呼び出しを検索
API の URL やリクエストペイロードを確認したら、次にソースコード内でその URL や関数を検索します。
(a) API URL で検索
- 確認した API エンドポイント（例えば
https://api.example.com/v1/products/list）で、ソースコード全体を検索します。URL が直接書かれている箇所が見つかるかもしれません。
(b) 使用されている API 関数を確認
-
axiosやfetch、trpcなど、使用されている API クライアントライブラリをソースコード内で検索します。例えば、axios.get、fetch関数、trpc.client.queryなどです。これにより、API リクエストのコード箇所を特定できます。
(c) API コールの実行タイミングを確認
- 多くの場合、API 呼び出しは
useEffectの中で行われています。そのため、useEffectを探し、API 呼び出しがいつ行われるか確認します。
6. リクエストの発行元を特定する
特定の API リクエストが行われる箇所を見つけたら、どのコンポーネントや関数で実行されているか確認し、さらにデータの流れや使い方を追跡します。