先生と生徒の会話形式で理解しよう

生徒

「ReactでAxiosを使ってAPI通信するときに、毎回同じ設定を書くのは面倒じゃないですか？」

先生

「その通りです。そこで便利なのがインターセプターという仕組みです。リクエストやレスポンスを横取りして共通処理を追加できます。」

生徒

「横取りってなんだか怖いですが、どういうことですか？」

先生

「横取りといっても悪い意味ではなく、送る前や受け取る前に処理を追加できる便利な仕組みです。例を見ていきましょう。」

1. Axiosインターセプターとは？

Axiosインターセプターとは、APIリクエストをサーバーに送る前、またはサーバーからレスポンスを受け取った後に処理を追加できる仕組みです。

例えば、全てのリクエストに共通のヘッダー（例えば認証用のトークン）を付けたい場合や、レスポンスがエラーのときに自動でログアウトさせたい場合などに使われます。

つまり「通信の通過点にフィルターを置いて、好きな処理を加える」イメージです。

2. リクエストをインターセプトする方法

まずはリクエストをインターセプトする方法です。APIを呼び出す前に、ヘッダーを追加したりログを出力したりできます。


import axios from "axios";

// リクエストインターセプター
axios.interceptors.request.use(
  (config) => {
    console.log("リクエスト送信:", config.url);
    config.headers["Authorization"] = "Bearer sample-token";
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

APIを呼び出すたびに、リクエストURLがログに出力され、ヘッダーに認証トークンが追加されます。

3. レスポンスをインターセプトする方法

次にレスポンスをインターセプトする方法です。サーバーから返ってきたデータを加工したり、エラーメッセージを一括で処理できます。


import axios from "axios";

// レスポンスインターセプター
axios.interceptors.response.use(
  (response) => {
    console.log("レスポンス受信:", response.status);
    return response;
  },
  (error) => {
    console.error("エラーが発生しました:", error.response?.status);
    alert("通信に失敗しました。もう一度お試しください。");
    return Promise.reject(error);
  }
);

レスポンスが成功したときはステータスコードを表示し、エラーが起きたときは共通のメッセージを出せます。

4. Reactコンポーネントでインターセプターを使う

インターセプターはReactのコンポーネントでも使えます。例えばユーザー一覧を取得する処理に共通のログやエラーハンドリングを組み込みます。


import React, { useEffect, useState } from "react";
import axios from "axios";

// インターセプターを設定
axios.interceptors.request.use((config) => {
  console.log("API呼び出し開始:", config.url);
  return config;
});
axios.interceptors.response.use(
  (res) => {
    console.log("API呼び出し成功");
    return res;
  },
  (err) => {
    console.error("API呼び出し失敗");
    return Promise.reject(err);
  }
);

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users")
      .then(res => setUsers(res.data))
      .catch(err => console.error("エラー:", err));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

コンポーネント内のAPI呼び出しに共通の処理が追加され、毎回同じエラーハンドリングを繰り返す必要がなくなります。

5. 実務でのAxiosインターセプターの使いどころ

実際の開発では、Axiosインターセプターは次のようなケースでよく使われます。

すべてのリクエストに自動で認証トークンを付与する
API通信が失敗したときに共通のエラーメッセージを表示する
レスポンスのデータ形式を整形して扱いやすくする
ログ出力を一元管理して開発やデバッグを効率化する

このようにインターセプターを導入すると、コードの重複を減らし、保守性の高いアプリケーションを作ることができます。

まとめ

ReactでAxiosインターセプターを使う意義を振り返ると、まず重要なのは「API通信の共通処理をどこで管理するか」という点です。アプリが大きくなるにつれ、複数のコンポーネントが同じAPIを使ったり、繰り返し同じ設定を書いたりすることが増えます。そうした場面でAxiosインターセプターは、開発を効率化し、コードの重複をなくし、全体の品質を高めるための強力な仕組みとなります。リクエストとレスポンスの通過点に処理を追加できるため、認証トークンの付与、ログ出力、エラー処理の統一など、実務で重要なロジックをまとめて1箇所に集約できます。こうした工夫は開発チーム全体の生産性を高めるだけでなく、保守性にも大きく寄与します。また、インターセプターはReactのコンポーネント外でも設定できるため、アプリ全体で一貫したAPI通信が実現できます。同じエラー処理を何度も書かずに済むので読みやすいコードになり、初心者でも迷いにくい設計になります。特に、認証トークンの付与や通信失敗時のダイアログ表示など、共通化しておくべき処理に威力を発揮します。さらに、インターセプターはレスポンス内容を加工することもできるため、コンポーネントではシンプルにデータを受け取るだけで済むようになり、役割の整理にもつながります。実務では、ログ管理やアクセストークンの期限切れ検知など、より複雑な処理もインターセプターで自動化されます。そのため、ReactでAPI通信を扱うなら、インターセプターの仕組みを理解しておくことは非常に大切です。特に、APIの仕様変更やエラー形式の統一などが発生した場合でも、インターセプター側を修正するだけでアプリ全体に反映できるため、規模の大きいプロジェクトほど効果が際立ちます。API通信はアプリの基盤であり、正しく扱えることが安定した動作につながります。また、インターセプターの活用はReact開発に限らず、APIを扱うすべての場面で応用が可能です。設定方法も比較的シンプルで、プロジェクト内に専用のAxiosインスタンスを作り管理する方法も一般的です。インスタンスを使えば、特定のAPIグループだけに特有の設定を付けるなどの高度な制御が可能になり、複数のバックエンドを扱うプロジェクトでも柔軟に対応できます。これにより、アプリの複雑さが増しても、通信部分は一貫して整理された状態を保てます。次の例では、Axiosインスタンスを使ったインターセプター設定のサンプルを紹介します。

Axiosインスタンスを使ったインターセプターの例

プロジェクトごとに専用設定をまとめたいときはAxiosインスタンスを作成します。


// api.js
import axios from "axios";

const api = axios.create({
  baseURL: "https://example.com/api"
});

api.interceptors.request.use((config) => {
  console.log("送信準備:", config.url);
  config.headers["Authorization"] = "Bearer token-123";
  return config;
});

api.interceptors.response.use(
  (response) => {
    console.log("成功:", response.status);
    return response;
  },
  (error) => {
    console.error("失敗:", error.response?.status);
    return Promise.reject(error);
  }
);

export default api;

こうしておけば、Reactコンポーネント側ではシンプルに通信処理だけを書くことができます。


import React, { useEffect, useState } from "react";
import api from "./api";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    api.get("/posts")
      .then((res) => setPosts(res.data))
      .catch((err) => console.error(err));
  }, []);

  return (
    <div>
      {posts.map((p) => (
        <p key={p.id}>{p.title}</p>
      ))}
    </div>
  );
}

export default App;

このように、インターセプターを適切に使うことでReactのAPI通信は格段に扱いやすくなります。アプリ全体の信頼性も高まり、どの画面からでも安定した通信が行える状態をつくることができます。

先生と生徒の振り返り会話

生徒

「インターセプターって、ただの便利機能じゃなくて、アプリ全体の通信をまとめて管理できるすごい仕組みなんですね！」

先生

「その通りです。リクエストやレスポンスの共通処理を一箇所にまとめられるので、コードも綺麗になり、保守性も高まりますよ。」

生徒

「ReactのAPI通信が苦手だったけど、仕組みがわかると安心して書けそうです！」

先生

「理解できると一気に開発が楽になりますよ。実務でも必ず役立つ知識なので、ぜひ活用してくださいね。」