概要
https://kakehashi-dev.hatenablog.com/entry/2025/12/05/110000
詳細内容
## 生成AIフレンドリーなフロントエンド基盤をつくる
https://kakehashi-dev.hatenablog.com/entry/2025/12/05/110000
カケハシは、生成AIとの協働で保守性の高いコードを高速に開発するため、Tailwind CSSの使用制限、shadcn/uiのラッパーコンポーネント、開発ガイドラインの整備といった3つの施策を導入し、生成AIフレンドリーなフロントエンド基盤を構築しました。
**Content Type**: Tutorial & Guide
**Language**: ja
**Scores**: Signal:5/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:5/5
**Main Journal**: 92/100 | **Annex Potential**: 90/100 | **Overall**: 92/100
**Topics**: [[生成AI開発支援, フロントエンドアーキテクチャ, コンポーネント設計パターン, 開発ガイドライン, コード品質向上]]
カケハシの生成AI研究開発チームは、新規プロジェクトにおいて少ない人数で保守性の高いコードを高速に開発することを目標に、生成AIと協働しやすいフロントエンド基盤の構築に取り組んでいます。生成AIはコード記述速度を大幅に向上させる一方で、ガードレールがないと自由すぎるコードが生成され、保守困難なコードが量産されるという課題があります。例えば、Tailwind CSSの直接記述によるスタイルの意図不明瞭化や、shadcn/uiのような柔軟性の高いライブラリの使いこなしの難しさなどが挙げられます。
この課題に対し、チームは以下の3つの施策を導入しました。
1. **Tailwind使用制限と共通コンポーネントによる意図の明確化**:
Tailwind CSSの直接使用を`components/`ディレクトリ内に限定し、`features/`や`app/`からは共通コンポーネント（`Panel`, `Flex`, `Typography`など）を使用するルールを設けました。これにより、`gap="md"`, `padding="lg"`, `variant="h2"`のようにデザインシステムの意図を明確にするプロパティでスタイルを制御できるようになり、生成AIは意味のあるコンポーネントやプロパティを選択し、保守しやすいコードを生成できるようになります。
2. **shadcn/uiのラッパーコンポーネントで実装のブレを抑制**:
shadcn/uiの柔軟性が生成AIにとって「選択肢が多すぎる」という問題を引き起こすため、`Button`, `IconButton`, `Link`、`Toast`, `Table`といったコンポーネントをプロジェクト固有のAPIでラップし、ユースケースごとに使い分けを明確にしました。例えば、ボタンとリンクを分離し、`IconButton`には`aria-label`を必須化することでアクセシビリティを強制。トースト通知は4つの固定関数に制限し、エラーや警告は自動で消えないようにしました。これにより、生成AIは適切なコンポーネントを選択し、一貫性のある実装を生成できます。
3. **ドキュメントと実装例、Cursorルールによる開発ガイドラインの整備**:
コンポーネントごとに「いつ使うか（使うとき/使わないとき）」「基本的な使い方」「よくある使い方」「実装例」を統一フォーマットの`README.md`で明確にしました。さらに、CursorなどのAIツールに強制的に守らせるためのルールファイル（`01-architecture.mdc`, `02-styling.mdc`など）を整備。実際の使用パターンを示す実装例も提供することで、人もAIも理解しやすい開発ガイドラインを構築し、ルールの強制と具体的な使用イメージを提供しています。
これらの施策は相互に補完し合い、生成AIが適切なコンポーネントを選択し、一貫性のあるコードを生成できる環境を構築しています。著者は、この取り組みを通じて、生成AIのコード生成精度の向上、既存コードのリファクタリング効率向上、人にもAIにも読みやすいコードの実現、そして継続的な改善の重要性を学びました。生成AIと協働する開発において、コードの速度だけでなく品質と保守性を両立させるためには、生成AIが適切な判断を下せるような基盤を整えることが不可欠であると結論付けています。