By name: fe-be-integration description: | FE/BE統合アーキテクチャのコア原則と概要。 詳細な実装パターンはサブスキル（fe-be-phase1-4, fe-be-phase5-9, fe-be-advanced）を参照。 allowed-tools: "Read Glob Grep" license: proprietary metadata: author: masaaki-nagasawa version: 1.0.0 category: guide-reference tags: [frontend, backend, integration, architecture]
FE/BE統合アーキテクチャスキル
発動条件
以下のキーワード・状況で自動発動:
- 「FE/BE統合」「フロントエンド・バックエンド統合」
- 「重複コード削減」「DRY原則適用」
- 「定数の一元管理」「バリデーション統合」
- 「API設計」で保守性向上が目的の場合
- FEとBEで同じ処理をしている関数を発見した場合
- 文字列置換でデータ更新が失敗する場合（→ Phase 9: 構造化データ管理）
- 複数データの紐付け管理が必要な場合（→ Phase 9）
統合アプローチ概要（9フェーズ）
| Phase | 内容 | 詳細スキル |
|---|---|---|
| 1 | 定数統合（BE側で一元管理） | /fe-be-phase1-4 |
| 2 | ロジック統合（CamelCaseModel、同義語統一、Async Wrapper） | /fe-be-phase1-4 |
| 3 | バリデーション統合（エラー/警告分離） | /fe-be-phase1-4 |
| 4 | ファイル名生成統合 | /fe-be-phase1-4 |
| 5 | ファイル検証統合（タイプ判定API） | /fe-be-phase5-9 |
| 6 | 正規表現パース統合 | /fe-be-phase5-9 |
| 7 | 進捗追跡統合（実測値ベース） | /fe-be-phase5-9 |
| 8 | コードクリーンアップ（フォールバック廃止） | /fe-be-phase5-9 |
| 9 | 構造化データ管理（文字列→フィールド操作） | /fe-be-phase5-9 |
設計原則
1. BE側が正（Single Source of Truth）
- 定数・ロジック・バリデーションルールはBE側で定義
- FEはBEのAPIを呼び出して取得・実行
2. グレースフルフォールバック
- API失敗時はローカル処理にフォールバック
- ユーザー体験を損なわない
3. 後方互換性維持
- 既存の同期関数は残す（ラッパーとして機能）
- 段階的な移行が可能
4. エラーと警告の分離
- errors: 処理を中断すべき問題
- warnings: 確認を促すが処理は継続可能
サブスキル
| スキル | 内容 |
|---|---|
fe-be-phase1-4 |
Phase 1〜4の詳細実装パターン（定数・ロジック・バリデーション・ファイル名） |
fe-be-phase5-9 |
Phase 5〜9の詳細実装パターン（ファイル検証・正規表現・進捗・クリーンアップ・構造化データ） |
fe-be-advanced |
分析手順、チェックリスト、状態管理パターン、CMS連携、Phase 0サービス層 |
関連スキル
- coding-standards: 言語別命名規則、CamelCaseModelの基本説明
- process-state-management: 複数ステップのプロセス管理、ログ記録、中断・再開機能
- text-parser-patterns: テキストパーサー実装、エッジケース処理、デバッグ手法
- playwright-browser-automation: ブラウザ自動化、フォームフィールド調査