generic-feature-developer

汎用機能開発者

あらゆる技術スタックでの機能開発をガイドします。

このスキルを使う場面

次の場合に使います：

• 既存のコードベースに機能を追加する
• 現在のシステムを変更または拡張する
• アーキテクチャの変更を計画する
• 実装方法の選択肢を比較する
• 新しい機能のデータフローを設計する

次の場合は使わないでください：

• UIやスタイルのみの作業 → generic-design-system を使います
• UXデザインの判断 → generic-ux-designer を使います
• コードレビュー → generic-code-reviewer を使います

開発ワークフロー

1. 把握 - CLAUDE.md を読み、影響を受けるファイルを特定し、制約をリストアップします
2. 計画 - パターンを選び、データフローを設計し、エッジケースを特定します
3. 実装 - レビューしやすい小さな変更を行い、こまめにコミットします
4. レビューと文書化 - エッジケースや呼び出し元に照らして差分をレビューし、ドキュメントを更新して、パフォーマンスを確認します

プロジェクトの種類別アーキテクチャ

静的サイト

project/
├── index.html
├── css/           # variables.css, style.css
├── js/            # main.js, utils.js
└── assets/

パターン： CSS 変数、ES モジュール、イベント委譲

React/Next.js

src/
├── components/    # ui/, features/, layout/
├── hooks/
├── stores/
├── services/
└── types/

パターン： コンテナー／プレゼンテーショナル、カスタムフック、Zustand/React Query

NestJS バックエンド

src/
├── modules/[feature]/
│   ├── feature.module.ts
│   ├── feature.controller.ts
│   ├── feature.service.ts
│   └── dto/
└── common/        # guards, decorators

パターン： モジュール編成、DTO、Guard、Prisma

機能の判断フレームワーク

スコープの評価（最初に実施）

スコープ	対応
単一コンポーネント	直接実装します
横断的関心事	まずインターフェースを設計します
新しいサブシステム	アーキテクチャ文書を作成し、承認を得ます

自作か統合か

要素	カスタム開発	ライブラリを使用
製品の中核に関わる	はい
一般的な機能		はい
緊密な統合が必要	はい
時間が重要		はい
長期的な所有が必要	はい

状態管理の選択

スコープ	ソリューション
コンポーネント内	useState/useReducer
機能全体	Context または Zustand slice
アプリ全体	Zustand/Redux store
サーバー状態	React Query/SWR
フォーム状態	React Hook Form

API 設計チェックリスト

• RESTful または GraphQL の選択を文書化する
• 認証方式を選択する
• エラーレスポンス形式を標準化する
• ページネーション戦略を定義する
• レート制限を検討する

よくある機能

UI コンポーネントの追加

1. コンポーネントを作成 → 2. エクスポート → 3. 使用方法とエッジケースをレビュー → 4. 文書化

API エンドポイントの追加

1. ルートを定義 → 2. バリデーションを追加 → 3. サービスを実装 → 4. エラーパスをレビュー

状態管理の追加

1. 形状を定義 → 2. ストアを作成 → 3. アクションを追加 → 4. コンポーネントを接続

データベースの変更

1. スキーマを設計 → 2. マイグレーションを作成 → 3. モデルを更新 → 4. サービスを追加

データフローのパターン

フロントエンドのデータフロー

User Action → Event Handler → State Update → Re-render → UI Feedback

• 楽観的更新： UI をすぐに更新し、エラー時にはロールバックします
• 悲観的更新： サーバーの確認を待ちます
• 判断： リスクが低い場合（いいねなど）は楽観的更新、リスクが高い場合（決済など）は悲観的更新を使います

API リクエストのフロー

Request → Auth Check → Validation → Business Logic → Database → Response

• バリデーション失敗時は早期に処理を終了します
• 複数ステップの操作にはトランザクション境界を設けます
• エラーレスポンス形式を統一します

イベント駆動パターン

イベント種別	アプローチ
ユーザーイベント	即時フィードバック
サーバーイベント	リアルタイム処理には WebSocket/SSE を使用
バックグラウンドタスク	時間のかかる処理にはキューを使用

エラー処理戦略

エラーの種類	フロントエンド	バックエンド
バリデーション	フィールド内にエラーを表示	400 + フィールドエラー
認証	ログイン画面にリダイレクト	401/403
見つからない	空の状態を表示、またはリダイレクト	404
サーバーエラー	一般的なメッセージ + 再試行	500 + ログ
ネットワーク	オフラインインジケーター + キュー	N/A

フロントエンドのパターン

try {
  await apiCall();
} catch (error) {
  if (error instanceof ValidationError) showFieldErrors(error.fields);
  else showGenericError();
}

バックエンドのパターン

if (err instanceof ValidationError)
  return res.status(400).json({ errors: err.errors });
if (err instanceof AuthError)
  return res.status(401).json({ message: "Unauthorized" });

テスト戦略（ユーザーからテストを求められた場合）

層	種類	ツール
UI	コンポーネント	Testing Library
ロジック	単体	Jest, Vitest
API	統合	Supertest
E2E	エンドツーエンド	Playwright

パフォーマンス

フロントエンド： コード分割、遅延読み込み、メモ化、デバウンス バックエンド： DB インデックス作成、キャッシュ、コネクションプーリング、バックグラウンドジョブ

機能実装チェックリスト

機能を完了としてマークする前に、次の項目を確認してください。

• 想定どおりの操作で動作する
• エラー状態に対処している
• 読み込み状態を実装している
• エッジケースを確認している
• TypeScript の型がすべて揃っている
• テストを作成している（ユーザーから求められた場合のみ）
• ドキュメントを更新している

関連項目

• コードレビュー基準 - 品質チェック
• デザインパターン - UI パターン
• generic-design-system - スタイリングとビジュアルの一貫性のために
• generic-ux-designer - UX フローの決定のために
• プロジェクトの CLAUDE.md - ワークフローのルール

共有基準を確認するタイミング：

• 複雑な機能の設計 → CODE_REVIEW_STANDARDS.md（アーキテクチャのセクション）
• UI コンポーネントのパターン → DESIGN_PATTERNS.md（コンポーネントのセクション）