1. はじめに（背景と課題）

• プロジェクトの背景: 大量のデータをロードし、特定の分類に基づいてユーザーをガイドする画面の開発。
• 初期の課題:
• データの増加やレイアウトの複雑化に伴い、データの整合性や表示ロジックの管理が徐々に難しくなっていた。
• 開発途中の仮データやレガシーな表示用の静的データがフロントエンドのコンポーネント内に残存しており、ファイルの可読性や今後のメンテナンス性に課題を抱えていた。

---

2. AIの特性と「Skill（拡張機能）」を活かした2ステップ開発戦略

• 「AIに丸投げ」することの罠: コード生成AIに長大なソースコードをそのまま渡し、「いい感じに連携して、不要なデータを整理して」と曖昧な要件を丸投げすると、文脈（コンテキスト）の解釈だけで膨大な入力トークンを消費し、利用コストが跳ね上がる。また、AIが内部で試行錯誤を繰り返すため出力トークンも浪費され、結果として仕様の誤認や手戻りが発生しやすい。
• ステップ①：Geminiを「要件定義・仕様整理エンジン」として使う: テキスト対話やドキュメントの解読、ロジックの構造化が非常に得意なGeminiを壁打ち相手に選択。既存の構造、UIデザインの方向性、外部マスタデータとの依存関係を段階的にインプットし、「どのデータをどう処理し、どこへマッピングすべきか」「どのレガシー部分を削るべきか」という仕様を、まずは日本語で100%言語化・整理させた。
• ステップ②：Firebase Skill搭載のCodexで最小トークン実装: 実装フェーズでは、Firebaseのデータ操作やAPIの作法をあらかじめ学習している拡張機能（Firebase Skill / Plugin）が有効化されたCodexを採用。 すでにFirebaseの最適な扱い方を理解している特化型AIに対し、ステップ①でGeminiが作成した「極限まで無駄を削ぎ落とした明確な指示文」だけをピンポイントで与える。これにより、公式ドキュメントやレガシーコードをプロンプトに長々と貼り付ける無駄（入力トークンの浪費）を完全に排除し、最適解のコードを出力させることに成功した。

3. まとめ（AI時代の開発ディレクションの心得）

• 「設計の言語化」と「実装（専用Skill）」のフェーズ分け コードを書かせる前に、まずは対話型AIで「何を整理し、どういうデータ構造にするか」という設計思想を徹底的に壁打ちすることの重要性。
• AIの「スキル適性」を見極めるディレクション AIにすべての工程を丸投げするのではなく、人間がディレクターとなり、「仕様整理が得意なAI」と「特定のSkill（Firebase連携等）を持った実装AI」を適切に使い分ける。このアプローチこそが、これからの生成AI開発においてコストを最小化し、成果物の質を最大化する最強のハックである。