Frontend Academy · レッスン

ローディング状態とエラー状態の処理

コンポーネントにローディング状態とエラー状態の変数を追加し、取得中はスピナーを表示し、失敗時にはわかりやすいエラーメッセージを表示します。

「ローディング状態とエラー状態の処理」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

非同期データの 3 つの状態

非同期データの操作には、次の 3 つの状態があります。loading（リクエスト処理中）、success（データを受信済み）、error（リクエスト失敗）です。UI では、3 つすべてを明示的に処理してください。

読み込み中の UI

読み込み中は、スピナー、スケルトン、プレースホルダーのいずれかを表示します。読み込み中にボタンを無効にして、フォームの再送信を防ぎます。ユーザーには、アプリが処理中であることを常に伝える必要があります。

if (loading) {
  return (
    <div className="loading-state">
      <Spinner size="lg" />
      <p>Loading users...</p>
    </div>
  );
}

エラー UI

リクエストが失敗した場合は、わかりやすいエラーメッセージを表示します。ユーザーが行き詰まらないように、再試行操作を用意します。開発者向けには、エラーの完全な情報をログに記録します。

if (error) {
  return (
    <div className="error-state">
      <p>Failed to load data: {error}</p>
      <button onClick={() => setRetry(n => n + 1)}>Try Again</button>
    </div>
  );
}

再試行の仕組み

state の再試行カウンターを増加させ、それをエフェクトの依存配列に追加します。ユーザーが Retry をクリックするとカウンターが変化し、エフェクトが再度実行されます。

const [retry, setRetry] = useState(0);

useEffect(() => {
  // fetch...
}, [userId, retry]); // retry in deps triggers re-fetch

<button onClick={() => setRetry(n => n + 1)}>Retry</button>

読み込み state のベストプラクティス

1) リクエスト開始時にすぐ読み込み状態を表示します。2) キャッシュされたデータがある場合は再設定せず、読み込み状態を最小限に保ちます。3) ページネーションでは、初回の読み込みと追加読み込みを区別します。4) 100ms 未満のスピナーは表示しません。遅延を追加するか、以前のデータを表示したままにします。

楽観的更新

楽観的更新とは、サーバーで確認される前に UI をすぐ更新し、リクエストが失敗した場合に元に戻す方法です。瞬時に応答しているような印象を与えられます。

// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
  await deleteItem(id);
} catch (err) {
  setItems(prevItems); // revert on failure
  showError('Delete failed. Changes reverted.');
}

レンダリングエラー用の Error Boundary

レンダリング中にスローされたエラーを捕捉するには、Error Boundary（componentDidCatch を持つクラスコンポーネント）を使用します。アプリ全体をクラッシュさせる代わりに、フォールバック UI を表示できます。

HTTP エラーのマッピング

HTTP ステータスコードをユーザーにわかりやすいメッセージに対応付けます。401 → ログインにリダイレクトします。403 → 「アクセスが拒否されました」と表示します。404 → 「見つかりません」と表示します。429 → 「リクエストが多すぎます。しばらくお待ちください」と表示します。500 以上 → 「サーバーエラーです。もう一度お試しください」と表示します。

function mapStatusToMessage(status: number): string {
  if (status === 401) return 'Please sign in to continue';
  if (status === 403) return 'You don\'t have permission to do this';
  if (status === 404) return 'This item no longer exists';
  if (status === 429) return 'Too many requests. Please wait a moment';
  if (status >= 500) return 'Server error. We\'re looking into it';
  return 'Something went wrong';
}

複雑な fetch state に useReducer を使用する

loading、error、data が相互に関係する場合（再読み込み時に error をクリアする場合など）は、複数の useState 呼び出しよりも reducer を使用したほうが整理しやすくなります。

type FetchState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; message: string };

const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });

Suspense — これからの方式

データ取得フレームワーク（React Query、Relay、Next.js）と React Suspense を組み合わせると、データを待っている間、コンポーネントを「suspend」できます。親の Suspense boundary が自動的にフォールバック UI を表示します。これは React が進もうとしている方向です。

ネットワークエラーとサーバーエラー

ネットワークエラー（接続なし、CORS）は catch ブロックでスローされます。サーバーエラー（4xx、5xx）は通常どおり解決されるため、検出するには res.ok を確認する必要があります。エラー処理では、両方の種類に対応してください。

確認問題

「楽観的更新」とは何ですか？

まとめ：読み込みとエラーの状態

読み込み、成功、エラーの状態を必ず処理します。意味のある読み込み UI を表示します。HTTP エラーをユーザーにわかりやすいメッセージに対応付けます。再試行の仕組みを実装します。体感的にすぐ反応するよう、楽観的更新を使用します。連携した fetch state には useReducer を使用します。将来的には Suspense によって、このパターンがさらに簡単になります。

よくある質問

「ローディング状態とエラー状態の処理」レッスンは無料ですか？

はい。「ローディング状態とエラー状態の処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「ローディング状態とエラー状態の処理」で何を学びますか？

コンポーネントにローディング状態とエラー状態の変数を追加し、取得中はスピナーを表示し、失敗時にはわかりやすいエラーメッセージを表示します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「ローディング状態とエラー状態の処理」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る