Day40/ 久しぶりにAIを色々いじりながら、Next.js開発

[kazzyfrog]

久しぶりにAIを色々いじりながら、Next.js開発

[kazzyfrog]

やること

• AI 使った開発を少しいろいろ試してみる

[kazzyfrog]

• まず、AI を使った開発の現状のベストプラクティス的なのはあるのか？
• 仕様、もっと効率的な開発フローを、調査しつつ実践してみる！

[kazzyfrog]

AIを使って、、下記をつくる

• 完了時のエフェクト
• 404ページ
• エラーページ
• サインインページ

[kazzyfrog]

ざっくりAI駆動開発の流れ：

• まず、準備フェーズとして、ドキュメント駆動で進めるために、各種設計ファイルを用意する。
• 用意できたら、実際にAIに対して明確な指示を出していく。
• そして一通りの実装が完了したら、テストと品質担保についてもAIに指示出しする
• そして、次の改善とリファクタリングに繋げるための提案をさせる。

project-root/
├── README.md                    # プロジェクト概要
├── ARCHITECTURE.md              # アーキテクチャ設計
├── SPEC.md                      # 機能仕様
├── DESIGN_SYSTEM.md            # デザインシステムガイド
├── .cursor/rules               # AI向けコーディング規約
└── docs/
    ├── API_SPEC.md             # API仕様
    └── USER_FLOW.md            # ユーザーフロー図

AI駆動開発では、AIが主体的にコードを生成し、人間はその指示・レビュー・調整を行うという関係性の逆転 が重要です。

レイヤー別実装戦略

実装順序:

1. データレイヤー(DB設計・API)
   ↓
2. ビジネスロジックレイヤー
   ↓
3. プレゼンテーションレイヤー(UI)

[kazzyfrog]

なので、新しいプロジェクトを始める場合、もしくは、既存のプロジェクトに適応する場合は、

• まず、ドキュメント駆動で進めるために、各種設計ファイルを用意する。これが起点になる
• 用意できたら、その仕様と、これから行うタスクに関する計画・指示書を作成して実行（直列）
• そして一通りの実装が完了したら、テストと品質担保についてもAIに指示出し

なので、要するに、

• 詳細で最新の状態のドキュメントを用意
• ーー
• イシューベースで、その内容と実行の順番や計画立てる
• 実行
• ーー
• テストと品質担保に回す

なので、下記があればいいのか

• 各種ドキュメントを生成するプロンプト
• ドキュメントとイシューを参照し、テストと品質担保を行わせるプロンプト
• イシューベースでその内容と実行の順番や計画立てるためのプロンプト

[kazzyfrog]

なんか、サボってしまうプロンプトの時があったり、
しっかりやろうとすると、少し手順が複雑で、毎回それをやる気にならなかったり。

[kazzyfrog]

今後の課題

AI駆動開発で、コードの手書きを禁止/制限 のルールで、クオリティ高いものを作ってみたい