Module 04

ReactでAPI連携を極める

課題に進む → 学ぶことを確認
ゴールAPI連携したReactアプリを実装し、ローディング/エラー/空表示を正しく出し分ける
必須スキルfetch/axios, hooks, 状態管理, エラーハンドリング, テスト
納品物コード + 動作キャプチャ

✏️ 学ぶこと

データ連携の基礎

データ取得

  • fetch / axios の使い分け
  • async/await と try/catch
  • APIレスポンスの型とバリデーション

UIステート設計

  • loading / success / empty / error の状態定義
  • スケルトンやプレースホルダー
  • 再試行ボタンの設計

状態管理

  • ローカルstateとグローバルstateの使い分け
  • カスタムフックでのロジック分離
  • メモ化と依存配列

品質/テスト

  • エラーログとユーザー向けメッセージを分ける
  • 単体テスト（React Testing Library）
  • APIモックでの挙動確認

📝 課題：API連携カード一覧

React + fetch

要件

  • モックAPIからプロフィール配列を取得
  • 読み込み中はローディングUIを表示
  • 失敗時はエラーバナーと再試行ボタン
  • フィルタ/ソートを実装（任意: ページネーション）
fetch useEffect Custom Hook

必要ファイル

React API (受講者用) 回答サンプル

🎯 完成イメージ / 制約

守るポイント

UI

  • PC 3列 / SP 1列
  • カード間に余白・影
  • ボタンのhover/activeを用意

実装

  • データ取得ロジックはカスタムフックに分離
  • 依存配列を正しく設定し無限リクエストを防止
  • 例外処理を網羅しユーザーに通知

品質

  • キー付与・aria-labelでA11y確保
  • ローディング/エラー/空をUIで明示
  • テストまたは手動手順で確認

✅ セルフチェック

提出前に確認

機能

  • 成功時にカードが表示される
  • ローディングが出て消える
  • 失敗時に再試行ボタンが動く
  • フィルタ/ソートが正しく反映

コード

  • カスタムフックで副作用を分離
  • 魔法の数字を定数化
  • 不要なconsole.logがない

理解

  • 依存配列に何を入れるか説明できる
  • エラー時のUIとログ出力の役割を説明できる
  • fetchとaxiosの違いを説明できる

🆘 詰まったら

質問テンプレ付き

デバッグ手順

  1. Network/Consoleでリクエストとエラーを確認
  2. レスポンスの中身と型をログ出力
  3. 依存配列やステート変更箇所を最小化して再現
  4. 公式ドキュメント/React.dev/MDNを参照

質問するときに書くこと

  • やりたいこと
  • 現在の状況
  • エラー内容
  • 試したこと
  • わからない点

📚 参考

Docs & Tools
React 公式: Learn MDN: Fetch API