【実装公開】 型で繋ぐフロントエンド開発 gRPC-Connect × Mock DI × AI駆動 by fujidomoe

バックエン・インフラが主のエンジニアが初めてReactアプリを構築した実践記。Protocol BuffersからTS/Go双方の型を生成し、Repositoryパターンでコマンド一発でgRPC/Mock実装を切り替えるDI基盤を整備し、shadcn/ui+Tailwindの「way」に乗る
① Contract-First: .proto→TS+Goの型自動生成
② Repository DI: Mock/gRPC切替と並行開発
③ AI駆動UI: 型安全な境界がFigma MCP×Claude Codeを機能させた話
④ 「ウェイ」戦略: DI基盤上でshadcn/ui+Tailwindに委ねる割り切り

Mock実装はTypeScriptだけで完結していて、バックエンドの知識不要で書ける
フロント専門でなくても型で境界を定義すれば人間もAIもパラレルに動ける、という学びを共有します