ReactのuseEffectでエラー状態を管理する方法を徹底解説！初心者でもわかる非同期処理のエラーハンドリング

1. エラー状態とは？

1. エラー状態とは？

エラー状態とは、APIからデータを取ってくるときに問題が発生したことを記録しておく仕組みです。例えばサーバーが止まっていたり、インターネットが切れていたりするとデータが取得できません。そのときにエラー状態をtrueにして、画面に「エラーが発生しました」と表示すれば、ユーザーは「何か問題があるんだな」と理解できます。

2. useStateでエラーを管理する

2. useStateでエラーを管理する

Reactでは、useStateでエラーの内容を保存できます。例えば最初はnullにしておいて、問題が起きたときにエラーメッセージを代入します。これで「エラーがあるかないか」を判定できるようになります。

イメージとしては、空っぽの箱にエラーメッセージを入れておいて、箱の中身があるかどうかでエラーを判定するようなものです。

3. useEffectでエラーを検知するサンプルコード

3. useEffectでエラーを検知するサンプルコード

実際にエラーを管理するReactのコードを見てみましょう。

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

function App() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/invalid-url");
        if (!response.ok) {
          throw new Error("サーバーからの応答が正しくありません");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      <h1>エラー状態のサンプル</h1>
      {error ? <p style={{ color: "red" }}>エラー: {error}</p> : <p>{data ? data.title : "データを読み込み中..."}</p>}
    </div>
  );
}

export default App;

4. finallyを使って状態を確実に更新する

4. finallyを使って状態を確実に更新する

エラー処理をするときは、必ずローディング状態も解除しなければなりません。これを忘れると画面がずっと「読み込み中」のままになります。そこでtry...catch...finallyを使うと便利です。

finallyはエラーが起きても起きなくても必ず実行される部分です。たとえば「ローディングを終了する」という処理をここに書いておけば、必ず実行されます。

5. エラーをユーザーにどう見せるか

5. エラーをユーザーにどう見せるか

エラーメッセージをそのまま英語で表示しても、初心者のユーザーにはわかりにくいことがあります。そこで以下の工夫が役立ちます。

• 「インターネット接続を確認してください」とユーザーに行動を促す
• 「サーバーで問題が発生しています」と簡単に伝える
• 画面に赤い文字やアイコンを使ってエラーを目立たせる

こうした工夫をすることで、ただ「エラー」と出すよりもユーザーに優しい設計になります。

6. 実際のアプリでのエラー管理の活用例

6. 実際のアプリでのエラー管理の活用例

エラー状態の管理はどんなアプリでも必須です。例えば以下のような場面で役立ちます。

• ショッピングサイトで商品データが取れないとき
• 天気予報アプリでサーバーが落ちているとき
• ログイン処理で間違ったパスワードを入力したとき
• チャットアプリでメッセージが送信できなかったとき

エラーをただ無視してしまうと、ユーザーは「アプリが壊れたのかな？」と不安になります。だからこそ、エラー状態を管理して「問題があります」と伝えることが大切なのです。

まとめ

まとめ

useEffectでのエラー状態管理を振り返る

この記事では、Reactにおける非同期処理とエラーハンドリングについて、特にuseEffectを使ったエラー状態の管理方法を中心に解説してきました。API通信は必ず成功するとは限らず、通信エラーやサーバーエラー、想定外のレスポンスなど、さまざまな問題が発生します。そのため「エラーが起きる前提」で設計することが、安定したReactアプリを作るうえで非常に重要です。

エラー状態を管理するという考え方は、「失敗したらどうするか」をあらかじめ決めておくこととも言えます。useStateでエラー用の状態を用意し、useEffect内の非同期処理でtryとcatchを使ってエラーを検知することで、画面表示を安全に切り替えられるようになります。これにより、アプリが突然止まったり、何も表示されなくなったりする事態を防げます。

エラー状態を持つことの意味

エラー状態を持つ最大の意味は、「今の画面がどんな状況なのか」を明確にできる点にあります。データ取得中なのか、正常に取得できたのか、それとも問題が起きたのかをstateで分けて管理することで、Reactコンポーネントの役割がはっきりします。特に初心者のうちは、状態を言葉で説明できるように意識すると理解が深まります。

例えば「errorがnullなら正常」「errorに文字が入っていれば失敗」というルールを決めるだけでも、コードの読みやすさは大きく変わります。この考え方は、今後ローディング状態や成功状態を組み合わせるときにもそのまま応用できます。

エラー表示を工夫する重要性

エラーが起きたときに何を表示するかは、ユーザー体験に直結します。ただエラーメッセージを出すだけではなく、「どうすればよいか」を伝えることで、ユーザーの不安を減らせます。例えば「通信に失敗しました。時間をおいて再度お試しください」と表示するだけでも、印象は大きく変わります。

Reactでは条件分岐を使って、エラー時だけ特別なメッセージやスタイルを表示することが簡単にできます。エラー状態をstateとして管理しているからこそ、こうした柔軟な表示切り替えが可能になります。

エラー状態を含めたシンプルな考え方の例

if (error) {
  return <p>エラーが発生しました</p>;
}
if (!data) {
  return <p>データを読み込み中...</p>;
}
return <p>{data.title}</p>;

このように「エラー」「読み込み中」「成功」の三つの状態を分けて考えるだけで、非同期処理の全体像が整理されます。複雑に見えるエラーハンドリングも、状態を一つずつ分けて考えれば決して難しいものではありません。

実務や学習で役立つポイント

useEffectでのエラー管理は、学習用のサンプルだけでなく、実際の開発現場でも頻繁に使われます。API連携がある限り、エラー処理は必ず必要になります。最初からエラー状態を意識してコードを書く癖をつけておくと、後から機能を追加するときにも困りにくくなります。

また、エラーをstateとして管理する考え方は、ログイン失敗、入力チェック、送信失敗など、さまざまな場面で応用できます。Reactの基礎として、非常に汎用性の高い知識と言えるでしょう。