開発のタイムラグ：フロントエンドが画面を作り終えたのに、バックエンドがまだデータベースを準備中...

標準的なソフトウェア開発チームでは、通常、フロントエンドエンジニアがUIのデザインを担当し、バックエンドエンジニアがAPIとデータベース管理を担当します。

最もよくあるオフィスの悲劇はこうです：フロントエンドエンジニアがTailwind CSSを使って半日かけて美しい「商品リストページ」を作り上げました。今、彼は画面を動かすための実際の商品データが必要です。彼はバックエンドエンジニアに尋ねます：「/api/productsのAPIはできていますか？」バックエンドエンジニアは汗だくで答えます：「まだです！データベースの権限に問題があって、アーキテクトと相談中です。あと2日はかかります」

この時、フロントエンドエンジニアは仕方なく自分のコードに手動でダミーデータを書くしかありません：

const fakeProducts = [
  { id: 1, name: "りんご", price: 100 },
  { id: 2, name: "バナナ", price: 50 }
];

2日後に実際のAPIが完成したら、フロントエンドはまた時間をかけてこれらのダミーデータをすべて削除し、実際のfetchロジックに置き換える必要があります。これは時間の無駄であるだけでなく、非常にミスが起こりやすいです。

Mock APIとは？フロントエンドの救世主

この「バックエンドにブロックされる」ジレンマを解決するために、業界では**Mock API（モックAPI）**という手法が流行しています。そのコンセプトは：バックエンドとRESTful APIのフォーマットと見た目について既に合意しているなら、フロントエンドが自分で「偽のAPIサーバー」を立ち上げればいいのではないか、というものです。

この偽のサーバーが、フロントエンドがGET /api/productsを呼び出した時に、事前に合意したJSON形式のデータを返せば、フロントエンドはこれを完全に本物のAPIとして開発を進めることができます。将来バックエンドが実際にAPIを完成させたら、フロントエンドはAPIのURLを「偽物（localhost:3001）」から「本物（api.company.com）」に変更するだけで済みます！ロジックコードを一行も変更する必要はありません！

以前なら、Mock APIサーバーを自分で構築するには、Node.jsを書いたりExpressのルーティングを設定したりする必要があり、フロントエンドにとっては苦戦必至でした。しかし今、Vibe Codingの力があれば、json-serverという小さなツールと一段の神級Promptで、5分で自分専用のMock APIが手に入ります！

Vibe実戦：5分で偽データ大軍を構築

ステップ1：神器`json-server`をインストール

まず、json-serverというオープンソースパッケージを利用します。これはたった30秒で、単純なJSONファイルを完全なRESTful APIに変身させます！ターミナルを開き、次のコマンドを入力してください： npm install -g json-server (これでjson-serverがコンピュータのグローバル環境にインストールされます)

ステップ2：Vibe Prompt詠唱！大量のリアルな偽データを生成

自分で手動でJSONの偽データを作成すると、3つ目くらいで疲れてしまい、名前もtest1、test2のような現実感のないデータになりがちです。 AIにこの作業を代行してもらいましょう。Cursorで次のPromptを入力してください：

【リアルな偽データ生成Prompt】 json-serverを使ってMock APIを構築しています。 db.jsonファイルの内容を生成してください。

要件：

これは「オンライン書店」のデータベースです。

books配列を作成し、少なくとも10冊の本のデータを含めてください。

各本には次のフィールドが必要です：id（数字）、title（本のタイトル、現実的なベストセラー名）、author（著者名）、price（価格、300-800の間）、stock（在庫数）、is_published（ブール値）。

JSONフォーマットが完全に正しいことを確認し、構文エラーがないようにしてください。

出力は純粋なJSONコードのみでお願いします。

AIが生成した高品質なJSONデータ：

{
  "books": [
    {
      "id": 1,
      "title": "Atomic Habits: 小さな習慣が大きな変化を生む実証済みの法則",
      "author": "James Clear",
      "price": 330,
      "stock": 150,
      "is_published": true
    },
    {
      "id": 2,
      "title": "嫌われる勇気: 自己啓発の父アドラーの教え",
      "author": "岸見一郎",
      "price": 300,
      "stock": 85,
      "is_published": true
    },
    {
      "id": 3,
      "title": "投資で一番大切な20の教え: ウォーレン・バフェットが2回読んだ本",
      "author": "Howard Marks",
      "price": 380,
      "stock": 0,
      "is_published": false
    }
    // ... 残り7件の精巧な偽データ
  ]
}

プロジェクトフォルダにdb.jsonというファイルを作成し、このデータを貼り付けて保存してください。

ステップ3：Mock APIサーバーを起動！

さあ、奇跡の瞬間です。ターミナルで次のコマンドを入力してください： json-server --watch db.json --port 3001

ターミナルに笑顔が表示され、サーバーが起動したことがわかります。ブラウザやPostmanを開き、次のURLを入力してください： http://localhost:3001/books

Enterを押すと、AIが生成した10冊の本が、API JSON形式で完璧に表示されます！

さらに驚くべきことに、json-serverはGET（読み取り）だけでなく、 PostmanでDELETE http://localhost:3001/books/1を送信すると、実際にdb.jsonファイルから最初の本が削除されます！すべてのCRUD RESTful操作を完全にサポートしています！

結論：データフローを制御し、フルスタックマスターになろう

この5章のAPIコースを通じて、あなたはフロントエンドとバックエンドのコミュニケーションの神秘のベールを剥がしました。 JSONとは何か、Postmanでの注文方法、RESTfulの注文規格、Tokenを使ったハッカー対策、さらには人に頼らずMock APIを構築する方法を学びました。

今後、Google Map API、緑界決済API、Line Bot APIなど、見知らぬサードパーティサービスに遭遇しても、もう恐れることはありません。すべてのAPIは、結局のところ「特定のURLに通行証を持って、JSON形式の注文書を送る」だけだとわかったからです。

これらの堅実なネットワーク通信知識を持って、Vibe Codingの旅を続けてください！次のコースでは、データの宝庫：Pythonスクレイピングとデータ分析の世界へご案内します！

🎁 [VIP限定ボーナス] API高度なデバッグ術とWebhookリバースエンジニアリング

受託市場で最も儲かる案件は、「ゼロからウェブサイトを作る」ことではなく、「AシステムとBシステムを連携させる」ことです。例えば：顧客が自社のERPシステムとLINE公式アカウントを連携させたい場合。この時、APIとWebhookの概念が、10万円から始まるこのような案件を受注するための核心的な武器になります。

1. APIエラーメッセージを読む技術を習得（手探り状態からの脱却）

PostmanでAPIを呼び出して赤いErrorが返ってきた時、すぐにCursorに聞く前に、自分でステータスコードを解読する技術を学びましょう：

401 Unauthorized：90%の確率でHeadersにBearer Tokenが含まれていないか、Tokenが期限切れです。再ログインして新しいTokenを取得しましょう！
403 Forbidden：Tokenはありますが、権限が不足しています。例えば一般会員が/api/admin/delete_userを呼び出そうとした場合など。
422 Unprocessable Entity：送信したデータ形式が間違っています。例えばバックエンドが{"age": 25}を期待しているのに、文字列で{"age": "二十五"}を送信した場合。JSON Bodyを注意深く確認してください！
CORS Error（フロントエンドの悪夢）：ブラウザで他人のAPIを呼び出した時に赤いCORSエラーが表示された場合。これは相手のサーバーがあなたのドメインからのアクセスを許可していないことを意味します。解決策：バックエンドにcorsパッケージを追加するか、Next.jsのRoute Handlersを使ってプロキシ層を作成します。

2. Webhookと��？（APIの逆操作）

従来のAPIは「あなたが積極的に他人に尋ねる」ものです。例えば：5分ごとに/api/check-paymentを呼び出して緑界科技に「この注文はお客様が支払いを完了しましたか？」と尋ねます。これはサーバーリソースの大きな無駄です。

Webhookは「他人が積極的にあなたに通知する」ものです。あなたがAPI（例えば/api/webhook/ecpay）を作成し、このURLを緑界に渡します。お客様が支払いに成功した瞬間、緑界が「積極的に」あなたのAPIを呼び出し、「支払いが成功しました！注文番号は12345です」と通知します。これが**Webhook（ネットフック）**と呼ばれるもので、現代のSaaSサービス間で最も主流の通信方法です（LINE Bot、Stripe、緑界、GitHub ActionsなどすべてがWebhookに依存しています）。

3. Vibe Coding実戦：ワンクリックでWebhookレシーバーを生成

Webhookを開発する時、「他人があなたを呼び出す」ため、Postmanで自分でテストすることができません。この時、強力なCursorが再び力を発揮します。

✅ Vibe Promptデモ：

「LINE公式アカウントのWebhookメッセージを受信するためのNode.jsルートが必要です。

パスはPOST /api/webhook/lineです。

LINE Signatureを検証するセキュリティロジックを実装し、このリクエストが本当にLINE公式から送信されたことを確認してください。

ユーザーのテキストメッセージを受信したら、まずconsole.logで内容を出力してください。

最後に、必ず200 OKをLINEサーバーに返してください。そうしないとLINEは送信失敗と判断します。」

この概念を理解すれば、全世界のすべてのSaaSシステムの「任督二脈」を打通する能力を身につけたことになります。企業の目に映るシステム統合マスターになる準備はできていますか？