ReactでAxiosエラーハンドリングの使い方を完全ガイド！初心者でもわかるAPI通信の失敗対処法

1. エラーハンドリングとは？

1. エラーハンドリングとは？

エラーハンドリングとは、プログラムでエラーが発生したときに適切に処理する仕組みのことです。例えば、インターネットが繋がっていない場合や、サーバーが「404 Not Found」などのエラーを返す場合があります。そのときにユーザーに「エラーが起きました」と知らせたり、別の処理に切り替えたりすることが大切です。

AxiosはJavaScriptのHTTPクライアントライブラリで、.catchやtry...catchを使ってエラーを処理できます。

2. Axiosで基本的なエラーハンドリングをする

2. Axiosで基本的なエラーハンドリングをする

まずは最も基本的なエラーハンドリングの書き方を紹介します。API通信が失敗したときに.catchでエラーを受け取ります。

import axios from "axios";

axios.get("https://jsonplaceholder.typicode.com/invalid-url")
  .then(response => {
    console.log("成功:", response.data);
  })
  .catch(error => {
    console.error("エラーが発生しました:", error);
  });

3. Reactコンポーネントでのエラーハンドリング

3. Reactコンポーネントでのエラーハンドリング

Reactのコンポーネント内でAxiosを使うときは、エラーが起きたら画面にエラーメッセージを表示することが多いです。

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

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

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/invalid-url")
      .then(res => setUsers(res.data))
      .catch(err => setError("データの取得に失敗しました"));
  }, []);

  if (error) {
    return <div>{error}</div>;
  }

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

export default UserList;

4. エラー内容を詳しく扱う方法

4. エラー内容を詳しく扱う方法

Axiosのエラーオブジェクトは、状況に応じて異なる情報を持っています。例えば、error.responseにはサーバーが返したエラー内容が入ります。error.requestにはリクエストは送られたけど応答がなかった場合の情報が入ります。

axios.get("https://jsonplaceholder.typicode.com/invalid-url")
  .catch(error => {
    if (error.response) {
      console.error("サーバーエラー:", error.response.status);
    } else if (error.request) {
      console.error("応答なし:", error.request);
    } else {
      console.error("その他のエラー:", error.message);
    }
  });

5. try...catchとasync/awaitでのエラーハンドリング

5. try...catchとasync/awaitでのエラーハンドリング

async/await構文を使うと、より読みやすいエラーハンドリングができます。try...catchを使って同期的に書けるのが特徴です。

async function fetchData() {
  try {
    const response = await axios.get("https://jsonplaceholder.typicode.com/users");
    console.log("成功:", response.data);
  } catch (error) {
    console.error("エラー:", error);
  }
}

6. エラーハンドリングを工夫するポイント

6. エラーハンドリングを工夫するポイント

実際の開発でAxiosを使うときは、次のような工夫がよく行われます。

• ユーザーにわかりやすいメッセージを表示する
• サーバーエラーとネットワークエラーを区別して処理する
• エラーをログに保存して後で調査できるようにする
• リトライ処理を組み込んで一時的な失敗に対応する

こうした工夫をすることで、ユーザーが安心して使えるReactアプリを作ることができます。

まとめ

まとめ

ReactでAxiosを使ったAPI通信を行う際のエラーハンドリングは、アプリの安全性と信頼性を高めるために欠かせない重要な考え方です。特に、インターネットの状態は常に安定しているとは限らず、外部APIが予期せぬ応答を返すことも多いため、適切な失敗対応を備えておくことでユーザーが安心して利用できる環境を整えることができます。記事の内容で学んだように、Axiosはcatchやtry...catchを用いてエラーの内容を把握し、Reactの状態管理と組み合わせることで画面上に明確なメッセージを提示できます。また、ネットワークエラーとサーバーエラーの区別ができるため、開発者にとって問題の発生箇所を推測しやすい点も大きな利点です。 加えて、初心者にとって理解しやすいのは、Axiosが返すエラーオブジェクトの構造が明確であり、どの場面でどの値が設定されるかを把握しておくことで、より細かいハンドリングが可能になるところです。サーバーからステータスコードが返ってくる場合にはerror.response、リクエストが送られたのに応答がない場合にはerror.request、その他の原因であればerror.messageというように分類されます。この仕組みを理解することで、ReactアプリのUIにおいて適切なエラー表示を実装することができます。 実際の開発では、これらに加えて「ログの保存」「リトライ処理」「ユーザー向け案内」「メンテナンス時の通知表示」など、エラー発生時の対応は多岐にわたります。Axiosのエラーハンドリングをしっかり理解しておけば、APIの応答に依存する機能でも安心して実装が進められ、より高品質で信頼性のあるアプリケーションを作れるようになります。以下では、記事の内容を踏まえつつ、Reactコンポーネント内でエラーメッセージを切り替えて表示するシンプルな実装例をまとめています。

サンプルプログラム：Axios通信でのエラー状態を画面表示する実装例

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

function ErrorSample() {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  const fetchUser = async () => {
    try {
      const res = await axios.get("https://jsonplaceholder.typicode.com/invalid-url");
      setResult(res.data);
      setError(null);
    } catch (err) {
      if (err.response) {
        setError("サーバーエラーが発生しました（" + err.response.status + "）");
      } else if (err.request) {
        setError("応答がありませんでした。通信状況を確認してください。");
      } else {
        setError("不明なエラーが発生しました。" + err.message);
      }
      setResult(null);
    }
  };

  return (
    <div className="card p-3 mb-3">
      <h2 className="fw-bold fs-4">エラーハンドリング例</h2>
      <button className="btn btn-primary mb-3" onClick={fetchUser}>
        データを取得する
      </button>

      {error && <p className="text-danger">{error}</p>}
      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
    </div>
  );
}

export default ErrorSample;

上記のように、通信成功時と失敗時でそれぞれ異なる状態を保持し、画面に反映させることでユーザーにわかりやすい案内ができます。サーバーエラー、ネットワークエラー、その他の例外を出し分けることで、Reactアプリ全体の品質向上にもつながります。さらに、Axiosにはリクエストインターセプターやレスポンスインターセプターの仕組みもあり、より高度なエラー共通処理を加えることもできるため、規模の大きなアプリでも使いやすい構造を作りやすくなります。 API通信はWebアプリ開発の中心的な機能であり、成功した場合の処理だけでなく失敗時の対応も等しく重要です。Axiosのエラーハンドリングが理解できれば、複雑なAPI構造を持つサービスでも安心してデータ取得処理が組めるようになり、Reactアプリの信頼性をさらに高めることができます。