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

生徒

「ReactでAPIを使うときに、axiosを毎回書くのが面倒なんですが、もっと楽にする方法はありますか？」

先生

「ありますよ。そのためにuseAxiosというカスタムフックを作ると便利です。」

生徒

「useAxiosってどんなものなんですか？普通にaxiosを使うのとどう違うんですか？」

先生

「API処理をひとまとめにして再利用できるようにする仕組みです。これでコードが短くなり、管理もしやすくなるんですよ。実際の作り方を一緒に見ていきましょう！」

1. useAxiosカスタムフックとは？

useAxiosは、axiosを使ったAPI通信処理をまとめるカスタムフックです。Reactでは、データを取得するたびにaxios.getやaxios.postを呼び出すことが多いですが、毎回書くのは手間ですし、エラー処理や読み込み状態の管理も忘れがちになります。

そこでuseAxiosを作っておけば、「APIを呼び出す→結果を受け取る→読み込み中やエラーを処理する」という流れを一度に扱えるようになります。

料理に例えると、毎回スパイスをひとつひとつ量るのは大変ですが、「調合されたミックススパイス」があればすぐに料理に使えますよね。それと同じで、useAxiosは「API処理の便利セット」のような役割を持っています。

2. useAxiosカスタムフックの基本コード

まずはシンプルなuseAxiosを作ってみましょう。axiosでデータを取得し、その結果やエラー、読み込み状態を返すようにします。


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

function useAxios(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    axios(url, options)
      .then((res) => {
        setData(res.data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

export default useAxios;

このカスタムフックは、URLとオプションを受け取り、axiosでリクエストを送ってデータを返します。

3. useAxiosを使った具体例

次に、このuseAxiosを使ってコンポーネントからAPIを呼び出してみましょう。


import React from "react";
import useAxios from "./useAxios";

function App() {
  const { data, loading, error } = useAxios("https://api.example.com/items");

  if (loading) return <p>読み込み中...</p>;
  if (error) return <p>エラー: {error}</p>;

  return (
    <div>
      <h1>商品一覧</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に「商品一覧」と表示され、APIから取得したデータがリストで並びます。読み込み中は「読み込み中...」と表示され、エラーが起きればエラーメッセージが表示されます）

4. useAxiosを使うメリット

カスタムフックにすることで、次のようなメリットがあります。

再利用できる：同じ処理を何度も書かなくてよい
コードが見やすい：UIとAPI処理を分けて管理できる
エラーや読み込み状態を統一管理：バラバラに書くよりわかりやすい
保守が楽になる：仕様変更があってもフックを直せば全体に反映される

特に初心者にとって大きなメリットは「コードがスッキリすること」です。複雑な処理がカスタムフックに隠れるので、アプリの見た目に集中できます。

5. 初心者が注意すべきポイント

useAxiosを作るときに気をつけることがあります。

カスタムフックの名前は必ずuseで始めること
フックはコンポーネントや他のフックの中でしか呼べないこと
非同期処理なので「読み込み中」の状態を必ず用意すること

Reactには「フックのルール」という決まりがあり、それを守ることで安定したアプリが作れるようになります。

6. 実際のアプリでの活用イメージ

例えば、ニュースアプリで記事一覧を取得したり、チャットアプリでメッセージを取得したりするときに、このuseAxiosを使えばすぐに実装できます。

また、POSTやPUTといったデータ送信の処理も、同じuseAxiosに少し工夫を加えれば簡単に対応できます。実際の現場では、共通化されたカスタムフックを用意しておくことで、チーム全員が効率的に開発できるようになるのです。

まとめ

useAxiosカスタムフックでAPI管理をシンプルにする考え方

この記事では、ReactでAPI通信を行う際に便利な useAxios カスタムフックの基本について、初心者の方にも分かりやすい形で解説してきました。Reactでアプリケーションを作っていると、データ取得や送信といったAPI通信は避けて通れません。しかし、コンポーネントごとに axios.get や axios.post を直接書いていくと、コードが長くなり、同じような処理が何度も登場してしまいます。

そこでカスタムフックとして useAxios を用意しておくと、「データを取得する」「読み込み中かどうかを管理する」「エラーを扱う」といった処理を一か所にまとめることができます。これにより、コンポーネント側では表示に関するコードだけを書けばよくなり、全体の構造がとても整理されたものになります。

カスタムフックがもたらす開発のメリット

useAxiosのようなカスタムフックを使う最大のメリットは、再利用性の高さです。一度作ったフックは、商品一覧画面、ユーザー一覧画面、設定画面など、さまざまな場所でそのまま使えます。APIのURLを変えるだけで同じ仕組みが動くため、アプリが大きくなってもコードの書き方がブレにくくなります。

また、エラー表示やローディング表示の考え方が統一される点も重要です。画面ごとにバラバラな実装をしていると、「この画面だけ挙動が違う」といった問題が起こりやすくなりますが、useAxiosを使えば共通のルールで管理できます。これは個人開発だけでなく、複数人での開発でも大きな助けになります。

振り返り用のシンプルなサンプル


import React from "react";
import useAxios from "./useAxios";

function App() {
  const { data, loading, error } = useAxios("https://api.example.com/users");

  if (loading) return <p>読み込み中...</p>;
  if (error) return <p>エラーが発生しました</p>;

  return (
    <div>
      <h1>ユーザー一覧</h1>
      <ul>
        {data.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面にユーザー一覧が表示され、データ取得中は読み込み表示、エラー時はエラーメッセージが表示されます）

このように、コンポーネント側のコードはとてもシンプルになります。API通信の詳細はuseAxiosに任せることで、「何を表示したい画面なのか」が一目で分かる構成になります。これがReactらしい設計の考え方でもあります。