apifox-mock について
apifox-mockは、プロジェクトのAPI向けにモックデータを生成するスキルです。既定ではApifox Mock JSONを出力し、指定に応じてスクリプト、ローカルファイル、モックアドレス設定も作成します。APIの型やフィールドの意味に基づいて値を組み立てます。
主な機能
- 01既定でApifox Mock JSONを生成
- 02Apifox Mockスクリプトとローカルファイルに対応
- 03モックアドレス設定を初期化
- 04APIのリクエスト型とレスポンス型を解析
- 05フィールドの意味や列挙値から値を推定
活用シーン
- 01APIの型に沿ったモックレスポンスの作成
- 02関連フィールドや条件ロジックを含むスクリプト生成
- 03Vueファイルと同じ場所へのローカルモック作成
- 04開発環境のリクエストをApifoxのモックアドレスへ転送
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ giikin/ skills --skill apifox-mockインストール後、Claude Code で/apifox-mockを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/apifox-mock-json.mdapifox-mock-script.mdinit-mock-address.mdlocal-mock.md詳細
Mock データ生成仕様
このスキルでは、Mock データの生成方法を 4 種類提供しています。デフォルトでは Apifox Mock JSON を生成し、ユーザーが明示的に指定した場合にのみ、ほかの方法に切り替えます。
選択ルール
| ユーザーの指示の特徴 | 生成方法 | 出力形式 | 参考ドキュメント |
|---|---|---|---|
| デフォルト(特別な指定なし) | Apifox Mock JSON | チャット内に JSON コードブロックを直接返す | apifox-mock-json.md |
js、スクリプト、script に言及、またはフィールド間の関連付け/条件ロジックが必要 | Apifox Mock スクリプト | プロジェクトルートの mock/ に .js ファイルを生成。ファイル名はインターフェースのメソッドに対応 | apifox-mock-script.md |
local、ローカル に言及、または .vue ファイルを指定 | ローカル Mock ファイル | Vue ファイルと同じディレクトリに .ts ファイルを生成 | local-mock.md |
Mock アドレスを有効化、Mock アドレスを初期化、Mock を接続、Apifox にプロキシ に言及 | Mock アドレスの初期化 | .env.development と vite.config.ts を変更 | init-mock-address.md |
共通フロー
どの方法でも、最初の 2 つの手順は同じです。
1. インターフェースファイルを解析する
@/api/xxx/controller 内のインターフェースファイルを読み込み、次の内容を特定します。
- レスポンスの型(例:
RPageMcpServiceVo、RMcpServiceDetailVo) - リクエストの型(例:
McpServicePageQuery)
2. 型定義をたどる
interface/apiTypes/ ディレクトリで完全な型定義を確認します。対象には次の内容が含まれます。
- ネストされた型(例:
PageMcpServiceVo→McpServiceVo[]) - 関連する型(例:
TagVo、McpServiceToolVo) - JSDoc コメント内の列挙値と業務上の意味
フィールドの意味を推測するルール
フィールド名と型に基づいて適切な Mock 値を生成します。3 種類の方法で共通です。
| フィールド名のパターン | 推測する型 | 値の例 |
|---|---|---|
id, *Id | 連番/ランダムな整数 | 1, 2, 3 |
name, *Name(日本語の文脈) | 日本語のタイトル/氏名 | '商品名', '山田太郎' |
name(英語識別子の文脈) | 英単語を連結した文字列 | 'mcp-service-alpha' |
description, *Desc | 日本語の段落 | 'これは説明文です...' |
url, *Url, icon | 画像/リンク URL | 'https://picsum.photos/800/800' |
*Time, *At, created*, updated* | 日時 | '2024-01-15 08:30:00' |
status, is*(ブール値の意味) | 0/1 または true/false | 1 |
*Color | 16 進数カラーコード | '#3B82F6' |
*Count, *Num, total | 自然数 | 42 |
*Order, *Sort | 連番の並び順 | 1, 2, 3 |
imgs, images, *List | 対応する型の配列 | [{...}, {...}] |
content(リッチテキスト) | HTML コンテンツ | '<div><img src="..." /></div>' |
列挙値の識別
まず JSDoc コメントから列挙値を抽出します。
interface Example {
/** 创建类型:1-HTTP转MCP,2-MCP服务直接代理 */
createType?: number;
// → mock 值范围限定为 1 或 2
}
レスポンス構造
プロジェクトで共通のインターフェースレスポンス構造です。
{
"code": 200,
"bizCode": 0,
"data": {},
"msg": "success"
}
ページネーションのレスポンスには、records、total、size、current、searchCount、pages などのフィールドが含まれます。
コメント
Markdown 対応