api-and-interface-design
APIやモジュール間の境界、フロントエンドとバックエンドの連携など、RESTやGraphQLのエンドポイント設計時に、型定義やインターフェースを適切に設計し、システム全体の整合性を高めるSkill。
📜 元の英語説明(参考)
Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
🇯🇵 日本人クリエイター向け解説
APIやモジュール間の境界、フロントエンドとバックエンドの連携など、RESTやGraphQLのエンドポイント設計時に、型定義やインターフェースを適切に設計し、システム全体の整合性を高めるSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o api-and-interface-design.zip https://jpskill.com/download/9571.zip && unzip -o api-and-interface-design.zip && rm api-and-interface-design.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9571.zip -OutFile "$d\api-and-interface-design.zip"; Expand-Archive "$d\api-and-interface-design.zip" -DestinationPath $d -Force; ri "$d\api-and-interface-design.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
api-and-interface-design.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
api-and-interface-designフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
API とインターフェースの設計
概要
誤用しにくい、安定した、十分に文書化されたインターフェースを設計します。優れたインターフェースは、正しいことを容易にし、間違ったことを困難にします。これは、REST API、GraphQL スキーマ、モジュール境界、コンポーネントの props、およびコードの一部が別のコードと通信するあらゆる表面に適用されます。
いつ使用するか
- 新しい API エンドポイントの設計
- モジュール境界またはチーム間の契約の定義
- コンポーネントの prop インターフェースの作成
- API の形状を決定するデータベーススキーマの確立
- 既存のパブリックインターフェースの変更
主要な原則
1. 契約優先
実装する前にインターフェースを定義します。契約が仕様であり、実装はそれに従います。
// 最初に契約を定義する
interface TaskAPI {
// タスクを作成し、サーバーで生成されたフィールドを含む作成されたタスクを返します
createTask(input: CreateTaskInput): Promise<Task>;
// フィルターに一致するページ分割されたタスクを返します
listTasks(params: ListTasksParams): Promise<PaginatedResult<Task>>;
// 単一のタスクを返すか、NotFoundError をスローします
getTask(id: string): Promise<Task>;
// 部分的な更新 — 提供されたフィールドのみが変更されます
updateTask(id: string, input: UpdateTaskInput): Promise<Task>;
// 冪等な削除 — 既に削除されていても成功します
deleteTask(id: string): Promise<void>;
}
2. 一貫したエラーセマンティクス
1つのエラー戦略を選択し、それをどこでも使用します。
// REST: HTTP ステータスコード + 構造化されたエラーボディ
// すべてのエラーレスポンスは同じ形状に従います
interface APIError {
error: {
code: string; // 機械可読: "VALIDATION_ERROR"
message: string; // 人間可読: "Email is required"
details?: unknown; // 役立つ場合は追加のコンテキスト
};
}
// ステータスコードのマッピング
// 400 → クライアントが無効なデータを送信しました
// 401 → 認証されていません
// 403 → 認証されていますが、承認されていません
// 404 → リソースが見つかりません
// 409 → コンフリクト (重複、バージョンの不一致)
// 422 → バリデーションに失敗しました (意味的に無効)
// 500 → サーバーエラー (内部の詳細を公開しないでください)
パターンを混在させないでください。 一部のエンドポイントが例外をスローし、他のエンドポイントが null を返し、さらに他のエンドポイントが { error } を返す場合、コンシューマーは動作を予測できません。
3. 境界で検証する
内部コードを信頼します。外部入力が入るシステムの端で検証します。
// API 境界で検証する
app.post('/api/tasks', async (req, res) => {
const result = CreateTaskSchema.safeParse(req.body);
if (!result.success) {
return res.status(422).json({
error: {
code: 'VALIDATION_ERROR',
message: 'Invalid task data',
details: result.error.flatten(),
},
});
}
// バリデーション後、内部コードは型を信頼します
const task = await taskService.create(result.data);
return res.status(201).json(task);
});
バリデーションが属する場所:
- API ルートハンドラー (ユーザー入力)
- フォーム送信ハンドラー (ユーザー入力)
- 外部サービスレスポンスの解析 (サードパーティデータ)
- 環境変数のロード (構成)
バリデーションが属さない場所:
- 型契約を共有する内部関数間
- 既に検証されたコードによって呼び出されるユーティリティ関数内
- 自分のデータベースから来たばかりのデータ
4. 修正よりも追加を優先する
既存のコンシューマーを壊さずにインターフェースを拡張します。
// 良い例: オプションのフィールドを追加する
interface CreateTaskInput {
title: string;
description?: string;
priority?: 'low' | 'medium' | 'high'; // 後で追加、オプション
labels?: string[]; // 後で追加、オプション
}
// 悪い例: 既存のフィールド型を変更するか、フィールドを削除する
interface CreateTaskInput {
title: string;
// description: string; // 削除 — 既存のコンシューマーを壊します
priority: number; // string から変更 — 既存のコンシューマーを壊します
}
5. 予測可能な命名
| パターン | 慣例 | 例 |
|---|---|---|
| REST エンドポイント | 複数名詞、動詞なし | GET /api/tasks, POST /api/tasks |
| クエリパラメータ | camelCase | ?sortBy=createdAt&pageSize=20 |
| レスポンスフィールド | camelCase | { createdAt, updatedAt, taskId } |
| ブール値フィールド | is/has/can プレフィックス | isComplete, hasAttachments |
| Enum 値 | UPPER_SNAKE | "IN_PROGRESS", "COMPLETED" |
REST API パターン
リソース設計
GET /api/tasks → タスクのリスト (フィルタリング用のクエリパラメータ付き)
POST /api/tasks → タスクの作成
GET /api/tasks/:id → 単一のタスクの取得
PATCH /api/tasks/:id → タスクの更新 (部分的)
DELETE /api/tasks/:id → タスクの削除
GET /api/tasks/:id/comments → タスクのコメントのリスト (サブリソース)
POST /api/tasks/:id/comments → タスクへのコメントの追加
ページネーション
常にリストエンドポイントをページネーションします。
// リクエスト
GET /api/tasks?page=1&pageSize=20&sortBy=createdAt&sortOrder=desc
// レスポンス
{
"data": [...],
"pagination": {
"page": 1,
"pageSize": 20,
"totalItems": 142,
"totalPages": 8
}
}
フィルタリング
フィルターにはクエリパラメータを使用します。
GET /api/tasks?status=in_progress&assignee=user123&createdAfter=2025-01-01
部分的な更新 (PATCH)
部分的なオブジェクトを受け入れます — 提供されたもののみを更新します。
// タイトルのみが変更され、その他はすべて保持されます
PATCH /api/tasks/123
{ "title": "Updated title" }
TypeScript インターフェースパターン
バリアントには判別共用体を使用する
// 良い例: 各バリアントは明示的です
type TaskStatus =
| { type: 'pending' }
| { type: 'in_progress'; assignee: string; startedAt: Date }
| { type: 'completed'; completedAt: Date; completedBy: string }
| { type: 'cancelled'; reason: string; cancelledAt: Date };
// コンシューマーは型絞り込みを取得します
function getStatusLabel(status: TaskStatus): string {
switch (status.type) {
case 'pending': return 'Pending';
case 'in_progress': return `In progress (${status.assignee})`;
case 'completed': return `Done on ${status.completedAt}`;
case 'cancelled': return `Cancelled: ${s 📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
API and Interface Design
Overview
Design stable, well-documented interfaces that are hard to misuse. Good interfaces make the right thing easy and the wrong thing hard. This applies to REST APIs, GraphQL schemas, module boundaries, component props, and any surface where one piece of code talks to another.
When to Use
- Designing new API endpoints
- Defining module boundaries or contracts between teams
- Creating component prop interfaces
- Establishing database schema that informs API shape
- Changing existing public interfaces
Core Principles
1. Contract First
Define the interface before implementing it. The contract is the spec — implementation follows.
// Define the contract first
interface TaskAPI {
// Creates a task and returns the created task with server-generated fields
createTask(input: CreateTaskInput): Promise<Task>;
// Returns paginated tasks matching filters
listTasks(params: ListTasksParams): Promise<PaginatedResult<Task>>;
// Returns a single task or throws NotFoundError
getTask(id: string): Promise<Task>;
// Partial update — only provided fields change
updateTask(id: string, input: UpdateTaskInput): Promise<Task>;
// Idempotent delete — succeeds even if already deleted
deleteTask(id: string): Promise<void>;
}
2. Consistent Error Semantics
Pick one error strategy and use it everywhere:
// REST: HTTP status codes + structured error body
// Every error response follows the same shape
interface APIError {
error: {
code: string; // Machine-readable: "VALIDATION_ERROR"
message: string; // Human-readable: "Email is required"
details?: unknown; // Additional context when helpful
};
}
// Status code mapping
// 400 → Client sent invalid data
// 401 → Not authenticated
// 403 → Authenticated but not authorized
// 404 → Resource not found
// 409 → Conflict (duplicate, version mismatch)
// 422 → Validation failed (semantically invalid)
// 500 → Server error (never expose internal details)
Don't mix patterns. If some endpoints throw, others return null, and others return { error } — the consumer can't predict behavior.
3. Validate at Boundaries
Trust internal code. Validate at system edges where external input enters:
// Validate at the API boundary
app.post('/api/tasks', async (req, res) => {
const result = CreateTaskSchema.safeParse(req.body);
if (!result.success) {
return res.status(422).json({
error: {
code: 'VALIDATION_ERROR',
message: 'Invalid task data',
details: result.error.flatten(),
},
});
}
// After validation, internal code trusts the types
const task = await taskService.create(result.data);
return res.status(201).json(task);
});
Where validation belongs:
- API route handlers (user input)
- Form submission handlers (user input)
- External service response parsing (third-party data)
- Environment variable loading (configuration)
Where validation does NOT belong:
- Between internal functions that share type contracts
- In utility functions called by already-validated code
- On data that just came from your own database
4. Prefer Addition Over Modification
Extend interfaces without breaking existing consumers:
// Good: Add optional fields
interface CreateTaskInput {
title: string;
description?: string;
priority?: 'low' | 'medium' | 'high'; // Added later, optional
labels?: string[]; // Added later, optional
}
// Bad: Change existing field types or remove fields
interface CreateTaskInput {
title: string;
// description: string; // Removed — breaks existing consumers
priority: number; // Changed from string — breaks existing consumers
}
5. Predictable Naming
| Pattern | Convention | Example |
|---|---|---|
| REST endpoints | Plural nouns, no verbs | GET /api/tasks, POST /api/tasks |
| Query params | camelCase | ?sortBy=createdAt&pageSize=20 |
| Response fields | camelCase | { createdAt, updatedAt, taskId } |
| Boolean fields | is/has/can prefix | isComplete, hasAttachments |
| Enum values | UPPER_SNAKE | "IN_PROGRESS", "COMPLETED" |
REST API Patterns
Resource Design
GET /api/tasks → List tasks (with query params for filtering)
POST /api/tasks → Create a task
GET /api/tasks/:id → Get a single task
PATCH /api/tasks/:id → Update a task (partial)
DELETE /api/tasks/:id → Delete a task
GET /api/tasks/:id/comments → List comments for a task (sub-resource)
POST /api/tasks/:id/comments → Add a comment to a task
Pagination
Always paginate list endpoints:
// Request
GET /api/tasks?page=1&pageSize=20&sortBy=createdAt&sortOrder=desc
// Response
{
"data": [...],
"pagination": {
"page": 1,
"pageSize": 20,
"totalItems": 142,
"totalPages": 8
}
}
Filtering
Use query parameters for filters:
GET /api/tasks?status=in_progress&assignee=user123&createdAfter=2025-01-01
Partial Updates (PATCH)
Accept partial objects — only update what's provided:
// Only title changes, everything else preserved
PATCH /api/tasks/123
{ "title": "Updated title" }
TypeScript Interface Patterns
Use Discriminated Unions for Variants
// Good: Each variant is explicit
type TaskStatus =
| { type: 'pending' }
| { type: 'in_progress'; assignee: string; startedAt: Date }
| { type: 'completed'; completedAt: Date; completedBy: string }
| { type: 'cancelled'; reason: string; cancelledAt: Date };
// Consumer gets type narrowing
function getStatusLabel(status: TaskStatus): string {
switch (status.type) {
case 'pending': return 'Pending';
case 'in_progress': return `In progress (${status.assignee})`;
case 'completed': return `Done on ${status.completedAt}`;
case 'cancelled': return `Cancelled: ${status.reason}`;
}
}
Input/Output Separation
// Input: what the caller provides
interface CreateTaskInput {
title: string;
description?: string;
}
// Output: what the system returns (includes server-generated fields)
interface Task {
id: string;
title: string;
description: string | null;
createdAt: Date;
updatedAt: Date;
createdBy: string;
}
Use Branded Types for IDs
type TaskId = string & { readonly __brand: 'TaskId' };
type UserId = string & { readonly __brand: 'UserId' };
// Prevents accidentally passing a UserId where a TaskId is expected
function getTask(id: TaskId): Promise<Task> { ... }
Common Rationalizations
| Rationalization | Reality |
|---|---|
| "We'll document the API later" | The types ARE the documentation. Define them first. |
| "We don't need pagination for now" | You will the moment someone has 100+ items. Add it from the start. |
| "PATCH is complicated, let's just use PUT" | PUT requires the full object every time. PATCH is what clients actually want. |
| "We'll version the API when we need to" | Breaking changes without versioning break consumers. Design for extension from the start. |
| "Internal APIs don't need contracts" | Internal consumers are still consumers. Contracts prevent coupling and enable parallel work. |
Red Flags
- Endpoints that return different shapes depending on conditions
- Inconsistent error formats across endpoints
- Validation scattered throughout internal code instead of at boundaries
- Breaking changes to existing fields (type changes, removals)
- List endpoints without pagination
- Verbs in REST URLs (
/api/createTask,/api/getUsers)
Verification
After designing an API:
- [ ] Every endpoint has typed input and output schemas
- [ ] Error responses follow a single consistent format
- [ ] Validation happens at system boundaries only
- [ ] List endpoints support pagination
- [ ] New fields are additive and optional (backward compatible)
- [ ] Naming follows consistent conventions across all endpoints
- [ ] API documentation or types are committed alongside the implementation