Windsurfで「API待ち」をゼロにする。Cascadeで創る自動モックデータ生成の極意
こんにちは。開発環境の設計に命をかけているエンジニアです。
皆さんはフロントエンド開発をしていて、「バックエンドのAPI実装待ち」で作業が止まった経験はありませんか？ 「まだエンドポイントがないから、とりあえずハードコードしたJSONで凌ごう」……その場しのぎのデータは、往々にしてテストの不備を招き、後で膨大なデバッグコストを支払うことになります。
今日は、次世代AIエディタ「Windsurf」の真髄である「Cascade（カスケード）」を使い、API仕様書（Swagger/OpenAPI）から、Fakerライブラリを用いた「生きたモックデータ」を自動生成するアーキテクチャを構築しましょう。
これをマスターすれば、バックエンドの開発速度に依存することなく、本番さながらのデータ構造でフロントエンドを極限まで作り込めるようになります。
—
1. なぜWindsurfのCascadeなのか？
従来のAIエディタとWindsurfの決定的な違いは、Cascadeが「現在のファイルシステム」と「実行コンテキスト」を深く理解している点にあります。
単にコードを生成するだけでなく、プロジェクト内の型定義（TypeScriptのインターフェース）を参照し、それに基づいた「テストデータの構造」を推論する能力が異常に高いのです。今回は、この能力をフル活用します。
—
2. 準備：開発環境の土台を整える
まずは、Node.js環境で`faker`を導入します。Windsurfのターミナルを開き、以下のコマンドを打ってください。
プロジェクト初期化
npm init -y
開発用モック生成ライブラリをインストール
npm install @faker-js/faker –save-dev
型安全性を確保するためのTS設定（必要に応じて）
npm install typescript ts-node @types/node –save-dev
—
3. Cascadeへの「魔法のプロンプト」
ここが本題です。`openapi.yaml`（またはJSON）をプロジェクト内に配置したら、WindsurfのCascadeを開き、以下の要領で指示を出してください。
プロンプト例：
> 「この`openapi.yaml`の`User`スキーマを読み取って。その構造を完璧に再現したモックデータを、`@faker-js/faker`を使って生成するスクリプトを`mock-server/generate-users.ts`に作成して。特に、emailやuuid、createdAtはFakerの適切な関数を使ってランダムかつリアルに生成してね。」
なぜこの指示が強力なのか？
Cascadeは単にコードを書くのではなく、YAML内の`type`や`format`（例: `format: email`）を読み取り、`faker.internet.email()`を自動で選択します。人間が手作業でマッピングする手間を、AIが一瞬でショートカットするのです。
—
4. 生成されたモックデータ生成スクリプト（実例）
Cascadeが生成したコードは、以下のような高度なものになります。
// mock-server/generate-users.ts
import { faker } from ‘@faker-js/faker’;
// APIスキーマに準拠したインターフェース定義
interface User {
id: string;
username: string;
email: string;
createdAt: string;
}
// ユーザーデータを生成するファクトリー関数
export const generateUser = (): User => ({
id: faker.string.uuid(), // UUIDを生成
username: faker.internet.userName(), // リアルなユーザー名を生成
email: faker.internet.email(), // 正しい形式のメールアドレス
createdAt: faker.date.past().toISOString(), // ISO形式の過去日時
});
// 10件のデータを一括生成（フロントのリスト表示テスト用）
export const mockUsers: User[] = Array.from({ length: 10 }, generateUser);
console.log(JSON.stringify(mockUsers, null, 2));
—
5. 実務で「震えるほど」役立つ知見：ここからが本番
単にデータを作るだけでは初心者レベルです。現場のアーキテクトが教える「真の効率化」はここからです。
1. エッジケースの自動生成
Cascadeに対してこう追加指示を出してみてください。
> 「`mockUsers`を生成する際、あえて`email`が空のデータや、`username`が極端に長いデータも20%の確率で混入させるロジックを追加して」
これで、フロントエンドの「バリデーションチェック」や「レイアウト崩れ」のテストが、実装完了前に終わります。
2. MSW (Mock Service Worker) との統合
生成したスクリプトを、`MSW`というライブラリと組み合わせることで、ブラウザ側のネットワークリクエストを横取りして、生成したモックデータを返すことができます。これで、フロントエンドは本番APIがあるかのように振る舞えます。
—
結び：開発の「待ち時間」を「創造の時間」に
「バックエンドがまだだから…」という言い訳は、今日で終わりにしましょう。WindsurfとCascadeを使えば、仕様書さえあれば、その瞬間に開発はスタートできます。
最初は難しく感じるかもしれませんが、一度このフローを構築すれば、あなたの開発効率は間違いなく3倍以上に跳ね上がります。ぜひ、次のプロジェクトで試してみてください。
分からないことがあれば、またいつでも聞いてくださいね。あなたのコードが、世界を少しだけ便利にすることを応援しています。