レシピ#3-5: Cursor + ClaudeでAPI通信を実装する

多くの魅力的なアプリは、外部のサーバーとAPI（Application Programming Interface）を通じて通信し、最新のデータを取得・表示しています。ニュースアプリ、天気アプリ、SNSアプリ... これらはすべてAPI通信の賜物です。

しかし、API連携の実装を学ぶには、通常、APIキーの取得や、有料プランへの登録、あるいは自分でサーバーを立てるといった手間がかかります。

このレシピでは、その手間を一切省き、Claudeを「擬似的なAPIサーバー」として活用することで、FlutterアプリにAPI通信機能を実装する方法を学びます。

前提知識: * 非同期プログラミング (Future, async/await)の基本を理解していること。 * 実践 - APIを使ったニュースアプリを作るを読んでおくと、よりスムーズです。

Step 1: Claudeに「APIサーバー」になってもらう

まず、Cursor + Claudeで、Claudeに「APIサーバーとして振る舞ってください」と役割をお願いします。

💬 Cursor活用プロンプト (APIサーバーの役割設定)

これからAPI連携の実装練習をします。あなたは、ユーザー情報を返すREST APIサーバーです。

私が「GET /users/1」のように、HTTPメソッドとパス形式でリクエストを送ったら、必ず以下のJSON形式でユーザー情報を返してください。

成功時の応答 (JSON): json { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz", "phone": "1-770-736-8031 x56442" }

もし、GET /users/999 のように存在しないIDをリクエストされた場合は、以下のようなエラー応答を返してください。

失敗時の応答 (JSON): json { "error": "User not found" }

準備ができたら「APIサーバー、起動しました。リクエストを待っています...」とだけ返信してください。

Claudeが「準備完了」と返信したら、あなたの擬似APIサーバーが起動しました！

Step 2: データモデルとHTTPクライアントをCursor + Claudeに作らせる

次に、この擬似APIサーバーと通信するための、Flutter側の準備をCursor + Claudeに任せます。

💬 Cursor活用プロンプト (クライアントコード生成)

あなたはFlutterのネットワーク通信に詳しいエキスパートです。

先ほど定義したユーザー情報APIと通信するための、クライアントサイドのコードを生成してください。

要件: 1. APIから返ってくるJSONデータを格納するための、Userモデルクラスを作成してください。json['key']の形式からインスタンスを生成するfromJsonファクトリコンストラクタも実装してください。 2. httpパッケージを使って、指定されたuserIdでAPIを叩き、Userオブジェクトを返すfetchUser(int userId)関数を作成してください。 3. API通信は失敗する可能性があるので、適切なエラーハンドリング（try-catch）も実装してください。

これらのコードを、services/user_service.dartというファイルに記述することを想定して生成してください。 Serviceクラスはシングルトンパターンで実装してください。

なぜこれが良いのか？ * JSONパースの自動化: JSONを手動でパースし、Dartのオブジェクトに変換するコードは、面倒で間違いやすい作業です。Cursor + Claudeは、fromJsonのような定型コードをミスなく生成してくれます。 * 非同期処理のベストプラクティス: http.getを呼び出し、レスポンスのステータスコードをチェックし、成功時と失敗時で処理を分ける、という一連の非同期処理のベストプラクティスをCursor + Claudeが実装してくれます。

Step 3: UIからAPIを呼び出し、結果を表示する

最後に、UIからAPIクライアントを呼び出し、取得したデータを画面に表示します。この「つなぎ込み」もCursor + Claudeに手伝ってもらいましょう。

💬 Cursor活用プロンプト (UIとの連携)

APIクライアントの準備ができました。

次に、シンプルなUIを作成し、ボタンを押したらUserServiceのfetchUser(1)を呼び出し、取得したユーザーの名前とメールアドレスを画面に表示する機能を実装してください。

要件: 1. 状態管理にはStatefulWidgetを使い、非同期のデータ取得処理を管理してください。 2. 以下の状態を管理してください： - bool _isLoading: ローディング中かどうか - String? _error: エラーメッセージ - User? _user: 取得したユーザーデータ 3. UIは状態に応じて適切に表示し分けてください： - ローディング中: CircularProgressIndicatorを表示する。 - エラー発生時: エラーメッセージを表示する。 - データ取得成功時: ユーザーの名前とメールアドレスを表示する。 - 初期状態: 「データを取得」ボタンを表示する。 4. このUIの完全なコードを提示してください。

なぜこれが良いのか？ * StatefulWidgetのシンプルさ: StatefulWidgetを使うことで、外部ライブラリに依存せず、Flutterの標準機能だけでAPI通信の状態を管理できます。 * UIの状態分岐: 非同期処理のUI実装で最も重要な「初期状態」「ローディング中」「エラー時」「成功時」の4つの状態分岐を、シンプルなif文で実装できます。 * 保守性: コードが一つの場所にまとまっており、流れが追いやすく、デバッグしやすい設計です。

このレシピを通じて、あなたは実際のサーバーを一切使うことなく、API通信の設計から実装、UIへの反映まで、一連のワークフローを安全かつ効率的に学ぶことができます。これは、Cursor + Claude時代ならではの、新しい学習スタイルです。