第四章：フロントエンドを生き生きと！API連携、Axiosと非同期の魔法

前章では、モックデータを使って美しいテーブルとリアルタイム検索機能を作成しました。しかし、上司にこのページを見せると、「なぜ表示されている名前は全て王小明と李大華なのか？今日の私の打刻記録はなぜ出てこない？」と質問されるでしょう。

その通り、フロントエンドのデータはコード内にハードコードされており、現実世界で何が起こっているかを知りません。 現実の世界では、フロントエンドのウェブページは「バックエンドサーバー（例えば以前作成したFastAPI）」に最新データを要求する必要があります。このフロントエンドとバックエンドの通信の橋渡しを**API（アプリケーション・プログラミング・インターフェース）**と呼びます。

🎯 本章の目標

  1. フロントエンドとバックエンドの通信の基本ロジックを理解する：HTTPリクエストとは？APIとは？
  2. 業界最強のHTTPクライア��トライブラリaxiosを学ぶ。
  3. ReactのuseEffectフックをマスターし、「ページが開いたら自動的にデータを取得する」機能を実装する。
  4. 「ローディング中（Loading）」と「エラー（Error）」の状態を処理する。これはプロのフロントエンドエンジニアに必須のスキルです。

📞 APIとは？FetchとAxiosとは？（図解でわかりやすく説明）

高級フレンチレストランで食事をする場面を想像してください：

  • あなた（フロントエンド）：美しいメニュー（UIインターフェース）を見て、何を食べるか決めます。しかし、自分で厨房に入って料理を取ることはできません。
  • 厨房（バックエンドデータベース）：全ての食材（打刻記録）が保管されており、シェフ（FastAPI）が料理を担当しています。
  • ウェイター（API）：注文票をウェイターに渡すと、ウェイターは厨房に行き料理を運んできてくれます。この「注文」と「料理を運ぶ」動作がAPI呼び出しです。

JavaScriptでは、ウェイターを呼び出す最も基本的な方法はfetch()というネイティブ関数です。 しかし、fetchは少し冗長で、JSON形式を扱う際に変換が必要であり、エラー処理もあまりスマートではありません。 そのため、世界中のフロントエンドエンジニアはAxiosというサードパーティライブラリを使用しています。Axiosはデータ取得プロセスを非常にエレガントにし、様々な強力な機能を備えています。

🚀 実践：AxiosのインストールとAPIインスタンス（Instance）の作成

🔥【Vibe Prompt 実践呪文】 React（Vite）プロジェクトを開発中で、ローカルのFastAPIバックエンドAPIに接続する必要があります。 1. npmでaxiosをインストールするコマンドを教えてください。 2. 業界標準の方法として、API接続設定は独立させます。src/utils/にapi.tsファイルを作成してください。 3. api.ts内でaxios.createを使用してインスタンスを作成し、baseURLを'http://localhost:8000/api'に、タイムアウトを5000ミリ秒に設定してください。

AIはターミナルで次のコマンドを実行するように指示します：

npm install axios

そして完璧なAPIモジュール設定ファイルを生成します：

// 📂 src/utils/api.ts
import axios from 'axios';

// Axiosインスタンスを作成
// こうすることで、今後APIを呼び出す際に毎回長いURLを入力する必要がなく、'/punches'と書くだけで済みます！
export const apiClient = axios.create({
  baseURL: 'http://localhost:8000/api', // FastAPIのローカルURL
  timeout: 5000, // ウェイターが厨房から5秒以内に戻ってこない場合、注文失敗（タイムアウト）と判定
  headers: {
    'Content-Type': 'application/json',
  },
});

⏳ useEffectと組み合わせ：画面読み込み時にデータを取得

apiClientを準備したら、いつ呼び出すべきでしょうか？ 答えは：このData Tableコンポーネントが初めて画面に表示された時です！ Reactでは、「初めて表示された時に何かを行う」を制御するために、強力なuseEffectを使用します。

🔥【Vibe Prompt 実践呪文】 以前のDataTable.tsxを修正し、ハードコードされたmockDataを実際のAPI呼び出しに置き換えてください。 1. 作成したapiClientをインポートしてください。 2. useEffectを使用してコンポーネントの【初回マウント時】にGET /punches APIを呼び出してください。 3. 3つの状態を必ず処理してください：データ（data）、ローディング中（isLoading、デフォルトtrue）、エラーメッセージ（error）。 4. 画面レンダリング時、isLoadingがtrueの場合、スピナーまたは「データ読み込み中...」というテキストを表示してください。errorに値がある場合、赤色のエラー警告を表示してください。 5. データを取得したら、バックエンドから返された配列をdata stateにセットしてください。

AIはプロフェッショナルな非同期（Async/Await）コードを生成します：

import { useEffect, useState } from 'react';
import { apiClient } from '../utils/api';

export default function DataTable() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 💡 useEffectの最後に空配列[]を渡すと、このロジックは「画面が初めて表示された時」に1回だけ実行されます！
  useEffect(() => {
    const fetchPunchRecords = async () => {
      try {
        setIsLoading(true);
        // ウェイター（API）に注文（/punchesのデータをリクエスト）
        const response = await apiClient.get('/punches');
        
        // ウェイターが運んできた料理をテーブル（State）にセット
        setData(response.data);
      } catch (err) {
        console.error("API呼び出し失敗", err);
        setError("打刻記録を取得できません。サーバーが起動しているか確認してください。");
      } finally {
        // 成功しても失敗しても、最後にローディングアニメーションを必ず停止！
        setIsLoading(false);
      }
    };
    
    fetchPunchRecords();
  }, []);

  // レンダリングのフォールバック処理：三項状態処理
  if (isLoading) return <div className="p-10 text-center animate-pulse">📡 サーバーからデータを取得中...</div>;
  if (error) return <div className="p-10 text-center text-red-500 bg-red-50 rounded-lg">❌ {error}</div>;

  return (
    // ... ここに元の美しいテーブルをレンダリングし、実際のdataを渡す ...
    <div>
        {/* テーブルUIは省略... */}
    </div>
  );
}

💼 [ビジネス応用シナリオ] なぜSkeleton（スケルトンスクリーン）が重要なのか？

上記の実装では、isLoadingの状態を追加しました。このシステムを大企業に販売する場合、これは非常に重要です。 ウェブページがバックエンドのデータを待っている0.5秒間、画面上に何も表示されない場合、ユーザーはサイトがフリーズしたと思い、リフレッシュボタンを狂ったようにクリックし始めます��これによりAPIリクエストが2倍になり、最終的にサーバーを圧迫します。

これは**User Perceived Latency（ユーザーが感じる遅延）**と呼ばれます。 プロの開発者として、PromptでAIに「isLoading時にTailwindで書かれたSkeleton（スケルトンスクリーン）エフェクトを表示してください」と指示できます。画面上に灰色で点滅する仮のブロックを表示させます。 ユーザーは点滅するブロックを見て、「システムが動作中」と感じ、忍耐力が0.5秒から3秒に延びます。この小さなUIの詳細が、初心者とベテランエンジニアの大きな違いです！

✅ 本章のまとめ

フロントエンドエンジニアの日常業務の核心を学びました：バックエンドにデータを要求し、待機とエラーをエレガントに処理し、実際のデータを画面に表示すること！

しかし、このコードを初めて実行し、Chromeブラウザを見ると、データは表示されず、フロントエンド開発者の永遠の敵「CORSクロスオリジン制限エラー」に遭遇するでしょう。 心配ありません！全てのエンジニアがこの挫折を経験しています。次章では、最もわかりやすい方法でCORSの秘密を解き明かし、Promptを使って一瞬で解決する方法を教えます！

完全なチュートリアルをロック解除

このチャプターは有料コンテンツです。プロジェクトに参加して、10以上の神レベルのPromptや実際のソースコード例を含む、5000字以上の深い分析をロック解除してください！

💳 支払いプランを見る (NT$ 1999)すでに購入済みですか？ここをクリックしてログイン