Closed15
Cursor Composerで始めるドキュメント駆動開発(DocDD)によるNext.jsアプリ【検証スクラップ】
いまいまいCursor Composerとは
Chatの強化版みたいなやつ。広範囲にファイルを追跡・検索して、ファイルの新規作成やコマンド実行まで受け持ってくれる。
モードがNormalとAgentがある。
Agentとだとより積極的にコード生成の手伝いをしてくれる感じっぽい。Normalは一回ずつ「これやりますか？」を聞いてくれるがAgentはもうバリバリ勝手に周りのコードを読んでバリバリ進めてくれる感じ。
Normalモードより使えるContextが少なく、モデルもclaudeのみ対応。
DocDDとは
最近巷で見る「Cursorで簡単数分でアプリ制作！」は、さすがに実務で使えないことは明らかだろう。保守とかどうすんねんあれ。それを踏まえて、ドキュメントをリポジトリなどに構造的に保守した上で、そこからAIによる開発を行いましょうねというのが、ドキュメント駆動開発（DocDD）である。
調べてもうちの代表が言ったことしか出てこない新用語。
でも正直まだまだ眉唾物だと思っているので、実査にやってみることにした。
実際にやってみる
MITライセンスでリポジトリ公開してるので、好きに参考にしてください。
Cloudflareのデプロイ設定は人の手でやらないと失敗することを学んだので、それをはじめにやる。
Bun + Next.js + Cloudflare Pages
1コマンドでNext.jsアプリのcreateからdeployまでできるようになったんや...便利や...
- dirは現在いる場所
.でOK -
What would you like to start with?-
Framework StarterでNextを選択 - Next.jsの設定は全部デフォルトでOK
-
- デプロイしちゃうか聞かれるので、そのままデプロイもやっちゃう
いまいまい人側の要件定義を進める
Cursorにも投げるアプリの大元の要望を列挙してしまおう
FigmaのスクショをChatGPTに投げてそれを手直しする
# 概要
TODOアプリ
# 内容
- 複数のTODOを管理でき、削除できる
- 期限を設定できる
- カテゴリを設定できる
- チェックしたTODOはアーカイブとなる
- お気に入りが追加できる
- ログイン機能はなし
# 画面要件
画面は
1. 左：サイドバー
2. 中央：メイン画面
3. 右：日・週・月ごとの達成率
で構成され、適宜メニューとして右側にサイドバーが開くようになっている
- 1024px以下でSPレイアウトになる
- shadcn/uiを使うこと
- サイドバーはSidebar、メニューはSheetを使う
## サイドバー
- shadcnのSidebarコンポーネントで実装
- 画面左側に配置
- 全てのカテゴリ・お気に入り・アーカイブのボタンがある
- その下に各カテゴリのボタンがある
- カテゴリの右側には三点リーダーがあり、それをクリックすると画面右側にメニューが開く
- このようなメニュー系はSheetコンポーネントを使う
- 名前の編集・カテゴリのアイコン・削除ができる
- 削除するのとそのカテゴリのTODOも削除される（警告あり）
- 最後にカテゴリ追加ボタンがある
- SP版ではハンバーガーメニューとなる
## メイン画面
- ヘッダーにカテゴリ名が表示されている
- タスク追加ボタンがある
- タスク追加ボタンを押したら右側にメニューが開き、名前とカテゴリを選択できる
- 期限で昇順・降順に並び替えられる
- タスクが縦に羅列されている
- タスクは期限・チェックボックス・内容・カテゴリが表示される
- 右側にお気に入り・削除・編集ボタンがある
### 達成率
- 現在日時から、今日・今週・今月のタスクの達成率が見れる
- SP版ではハンバーガーメニュー（アイコンはグラフっぽいもの）で開ける
今後の処理に向けて要望に追記
# 今後の残処理
## 環境整備
- Biomeの設定
- lefthookの設定
- shadcn/uiの設定
## AI向けドキュメントの生成
- 開発チェックリストの生成 (specification/checklist.md)
- チェックリストをもとに以下の要件定義ファイルを生成
- それぞれ画面、コンポーネントごとにファイルを区切ること
- 画面設計書 (specification/domain/hoge.md)
- API設計書 (specification/api/hoge.md)
- コンポーネント設計書 (specification/component/hoge.md)
## DB設定
- drizzleの設定
- cloudflare D1との連携
## コンポーネント実装・ページ実装
- 以下のルールで設計する
- 基本的にはServerComponentで設計し、葉で必要があればClientComponentにする
- ロードが必要なコンポーネントに関しては、Suspenseでfallbackを表示する
## テスト実装
- 以下のテストを実装する
- コンポーネントのUnitTest
- 画面のE2Eテスト
Composerを使ってみる
ここからComposer祭り
modelをclaude-3.5でAgentモードで開始
spesicification/main.mdの今後の残処理をもとに作業を進めて
チェックリストの生成から始めた。
checklist.md
# 開発チェックリスト
## 環境整備
- [ ] Biomeの設定
- [ ] `.biome.json`の作成
- [ ] フォーマットルールの設定
- [ ] リントルールの設定
- [ ] lefthookの設定
- [ ] `lefthook.yml`の作成
- [ ] コミット前のフォーマット・リントチェックの設定
- [ ] shadcn/uiの設定
- [ ] インストールと初期設定
- [ ] 必要なコンポーネントの追加
## 要件定義ファイルの生成
### 画面設計書
- [ ] サイドバー画面設計 (specification/domain/sidebar.md)
- [ ] メイン画面設計 (specification/domain/main.md)
- [ ] 達成率画面設計 (specification/domain/achievement.md)
- [ ] メニュー画面設計 (specification/domain/menu.md)
### API設計書
- [ ] TODOのCRUD API設計 (specification/api/todo.md)
- [ ] カテゴリのCRUD API設計 (specification/api/category.md)
- [ ] 達成率取得API設計 (specification/api/achievement.md)
### コンポーネント設計書
- [ ] サイドバーコンポーネント設計 (specification/component/sidebar.md)
- [ ] TODOリストコンポーネント設計 (specification/component/todo-list.md)
- [ ] TODOアイテムコンポーネント設計 (specification/component/todo-item.md)
- [ ] 達成率グラフコンポーネント設計 (specification/component/achievement-graph.md)
- [ ] メニューコンポーネント設計 (specification/component/menu.md)
## DB設定
- [ ] drizzleの設定
- [ ] スキーマ定義
- [ ] マイグレーションファイルの作成
- [ ] シードデータの作成
- [ ] cloudflare D1との連携
- [ ] D1データベースの作成
- [ ] 接続設定
- [ ] マイグレーションの実行
## コンポーネント実装
### サイドバー
- [ ] サイドバーのベース実装
- [ ] カテゴリリストの実装
- [ ] カテゴリ操作メニューの実装
- [ ] SPレイアウト対応
### メイン画面
- [ ] TODOリストのベース実装
- [ ] TODO追加フォームの実装
- [ ] TODO編集機能の実装
- [ ] ソート機能の実装
- [ ] お気に入り機能の実装
### 達成率画面
- [ ] 達成率計算ロジックの実装
- [ ] グラフ表示の実装
- [ ] SPレイアウト対応
## テスト実装
### Unit Test
- [ ] TODOコンポーネントのテスト
- [ ] カテゴリコンポーネントのテスト
- [ ] 達成率計算ロジックのテスト
### E2Eテスト
- [ ] TODO作成・編集・削除フローのテスト
- [ ] カテゴリ作成・編集・削除フローのテスト
- [ ] お気に入り機能のテスト
- [ ] レスポンシブ対応のテスト
設計書の自動作成
これがAIが今後コードを生成するためのドキュメントとなる。
人とAIコードの中間の定義なので、中間ドキュメントと呼んでる。
今回はmarkdownで設計書を書いてもらっているが、適宜jsonとかyamlにしてもらうことも可能。
画面設計書の例
domain/ahchievment.md
# 達成率画面設計
## 概要
画面右側に配置される達成率表示画面。
日・週・月ごとのタスク達成率をグラフで視覚的に表示する。
## 画面構成
### デスクトップ版（1024px超）
- 画面右側に固定表示
- 幅: 240px
- 高さ: 100vh
### モバイル版（1024px以下）
- 非表示（グラフアイコンのメニューボタンで表示）
- 表示時は画面の80%の幅
## 機能要件
### 達成率表示
- 3つの期間の達成率を表示
- 今日の達成率
- 今週の達成率
- 今月の達成率
### 達成率計算
- 計算方法
- 完了タスク数 / 全タスク数 × 100
- 期限切れの未完了タスクも含める
- 表示形式
- パーセンテージ表示
- プログレスバーまたは円グラフ表示
### データ更新
- タスクの完了状態変更時に即時反映
- 日付変更時の自動更新
- 定期的な自動更新（5分間隔）
## UI/UXの要件
### スタイリング
- shadcn/uiのProgressまたはRadialProgressコンポーネント使用
- 達成率に応じた色変更
- 0-30%: 赤系
- 31-70%: 黄系
- 71-100%: 緑系
### アニメーション
- 数値更新時のスムーズな変化
- グラフ表示時のアニメーション
- モバイル版での表示/非表示アニメーション
### レスポンシブ対応
- SPサイズではメニューとして表示
- グラフサイズの最適化
## エラーハンドリング
- データ取得失敗時のフォールバック表示
- 計算エラー時の表示
- ネットワークエラー時の再試行
## パフォーマンス要件
- 達成率計算の効率化
- キャッシュの活用
- 必要最小限のデータ更新
Contextをわかりやすくするためのファイル生成
specificationディレクトリ内のインデックス用ファイルを作らせる
AIにもコンテキストの最大量があるはずなので、辞書用として作成
structure.md
# 設計ドキュメント構成
## ディレクトリ構造
specification/
├── main.md # プロジェクトの概要と要件
├── checklist.md # 開発チェックリスト
├── structure.md # 本ファイル：ドキュメント構成の説明
├── domain/ # 画面設計
│ ├── sidebar.md # サイドバー画面
│ ├── main.md # メイン画面
│ ├── achievement.md # 達成率画面
│ └── menu.md # メニュー画面
├── api/ # API設計
│ ├── todo.md # TODO関連API
│ ├── category.md # カテゴリ関連API
│ └── achievement.md # 達成率関連API
└── component/ # コンポーネント設計
├── sidebar.md # サイドバーコンポーネント
├── todo-list.md # TODOリストコンポーネント
├── todo-item.md # TODOアイテムコンポーネント
└── achievement-graph.md # 達成率グラフコンポーネント
## 各ファイルの説明
### メインドキュメント
- `main.md`: プロジェクトの概要、機能要件、画面構成などの基本情報を記載
- `checklist.md`: 開発タスクの進捗管理用チェックリスト
- `structure.md`: 設計ドキュメントの構成と各ファイルの説明
### 画面設計 (/domain)
- `sidebar.md`: サイドバー画面のレイアウト、機能要件、UI/UX要件を定義
- `main.md`: メイン画面のTODO一覧表示、操作機能の要件を定義
- `achievement.md`: 達成率表示画面の要件とグラフ表示仕様を定義
- `menu.md`: 右側から表示されるメニュー画面の要件を定義
### API設計 (/api)
- `todo.md`: TODOのCRUD操作に関するAPIエンドポイントの定義
- `category.md`: カテゴリのCRUD操作に関するAPIエンドポイントの定義
- `achievement.md`: 達成率データ取得に関するAPIエンドポイントの定義
### コンポーネント設計 (/component)
- `sidebar.md`: サイドバーの構成コンポーネントとその責務を定義
- `todo-list.md`: TODOリスト表示・操作に関するコンポーネント構成を定義
- `todo-item.md`: 個別のTODOアイテムの表示・操作コンポーネントを定義
- `achievement-graph.md`: 達成率グラフの表示コンポーネントを定義
## 設計方針
1. 画面設計（domain）では、ユーザー視点での機能要件とUI/UXを定義
2. API設計（api）では、フロントエンドとバックエンドの通信インターフェースを定義
3. コンポーネント設計（component）では、実装レベルでのコンポーネント構成と責務を定義
## 更新ルール
1. 各ファイルの変更は必ずチェックリストに反映する
2. 設計変更時は関連するファイルすべてを更新する
3. 変更履歴は各ファイルの末尾に記録する
チェックリストの進行
チェックリストを埋めてって言ったら現状の場所まで進めてくれる
checklist.md
# 開発チェックリスト
## 設計ドキュメント
- [x] プロジェクト概要の作成 (main.md)
- [x] 開発チェックリストの作成 (checklist.md)
- [x] ドキュメント構成の説明作成 (structure.md)
### 画面設計
- [x] サイドバー画面設計 (specification/domain/sidebar.md)
- [x] メイン画面設計 (specification/domain/main.md)
- [x] 達成率画面設計 (specification/domain/achievement.md)
- [x] メニュー画面設計 (specification/domain/menu.md)
### API設計
- [x] TODOのCRUD API設計 (specification/api/todo.md)
- [x] カテゴリのCRUD API設計 (specification/api/category.md)
- [x] 達成率取得API設計 (specification/api/achievement.md)
### コンポーネント設計
- [x] サイドバーコンポーネント設計 (specification/component/sidebar.md)
- [x] TODOリストコンポーネント設計 (specification/component/todo-list.md)
- [x] TODOアイテムコンポーネント設計 (specification/component/todo-item.md)
- [x] 達成率グラフコンポーネント設計 (specification/component/achievement-graph.md)
## 環境整備
- [ ] Biomeの設定
- [ ] `.biome.json`の作成
- [ ] フォーマットルールの設定
- [ ] リントルールの設定
- [ ] lefthookの設定
- [ ] `lefthook.yml`の作成
- [ ] コミット前のフォーマット・リントチェックの設定
- [ ] shadcn/uiの設定
- [ ] インストールと初期設定
- [ ] 必要なコンポーネントの追加
## DB設定
- [ ] drizzleの設定
- [ ] スキーマ定義
- [ ] マイグレーションファイルの作成
- [ ] シードデータの作成
- [ ] cloudflare D1との連携
- [ ] D1データベースの作成
- [ ] 接続設定
- [ ] マイグレーションの実行
## コンポーネント実装
### サイドバー
- [ ] サイドバーのベース実装
- [ ] カテゴリリストの実装
- [ ] カテゴリ操作メニューの実装
- [ ] SPレイアウト対応
### メイン画面
- [ ] TODOリストのベース実装
- [ ] TODO追加フォームの実装
- [ ] TODO編集機能の実装
- [ ] ソート機能の実装
- [ ] お気に入り機能の実装
### 達成率画面
- [ ] 達成率計算ロジックの実装
- [ ] グラフ表示の実装
- [ ] SPレイアウト対応
## テスト実装
### Unit Test
- [ ] TODOコンポーネントのテスト
- [ ] カテゴリコンポーネントのテスト
- [ ] 達成率計算ロジックのテスト
### E2Eテスト
- [ ] TODO作成・編集・削除フローのテスト
- [ ] カテゴリ作成・編集・削除フローのテスト
- [ ] お気に入り機能のテスト
- [ ] レスポンシブ対応のテスト
あとshadcn/uiを使うので、どのページ・どのコンポーネントでshadcn/ui製のコンポーネントを使うのかをまとめてもらう
AIくんはshadcn/uiのSidebarコンポーネントを知らないのかあまり使ってくれないので、別途指定する
まじでURL見てくれないので、そのページを全選択して無理やり投げる
shadcn-ui.md
# shadcn/ui コンポーネント使用計画
## インストールが必要なコンポーネント一覧
# サイドバー関連
npx shadcn-ui@latest add sidebar # サイドバーコンポーネント
# レイアウト系
npx shadcn-ui@latest add sheet # サイドメニュー、タスク追加・編集フォーム用
npx shadcn-ui@latest add separator # 区切り線
npx shadcn-ui@latest add card # TODOアイテム用
# フォーム系
npx shadcn-ui@latest add form # フォームのバリデーション
npx shadcn-ui@latest add input # テキスト入力
npx shadcn-ui@latest add button # ボタン
npx shadcn-ui@latest add checkbox # タスクの完了チェック
npx shadcn-ui@latest add select # カテゴリ選択
npx shadcn-ui@latest add badge # カテゴリ表示
npx shadcn-ui@latest add calendar # 日付選択
npx shadcn-ui@latest add popover # カレンダー表示用
# フィードバック系
npx shadcn-ui@latest add toast # 通知
npx shadcn-ui@latest add dialog # 確認ダイアログ
npx shadcn-ui@latest add progress # 達成率表示
# その他
npx shadcn-ui@latest add dropdown-menu # メニュー
npx shadcn-ui@latest add tooltip # ツールチップ
## コンポーネントごとの使用計画
### サイドバー
- Sheet: モバイル時のサイドバー表示
- Button: カテゴリ選択ボタン
- Separator: カテゴリ間の区切り線
- DropdownMenu: カテゴリの操作メニュー
- Dialog: カテゴリ削除確認
### TODOリスト
- Card: TODOアイテムのコンテナ
- Checkbox: タスク完了チェック
- Badge: カテゴリ表示
- Button: 各種アクション
- Tooltip: アクションボタンの説明
- DropdownMenu: ソート選択
### タスクフォーム
- Sheet: フォーム表示用コンテナ
- Form: フォームのバリデーション
- Input: タスク名入力
- Select: カテゴリ選択
- Calendar: 期限日選択
- Popover: カレンダー表示
- Button: 保存・キャンセル
- Toast: 保存完了通知
### 達成率グラフ
- Progress: 進捗バー
- Card: 各期間の達成率表示
- Button: 更新ボタン
- Toast: 更新完了通知
## 画面ごとの使用計画
### メイン画面
// レイアウト
Sheet // タスク追加・編集フォーム
Card // TODOアイテム
// フォーム要素
Form // タスク追加・編集フォーム
Input // タスク名入力
Select // カテゴリ選択
Calendar // 期限選択
Checkbox // タスク完了チェック
Button // 各種アクション
// フィードバック
Toast // 操作完了通知
Dialog // 削除確認
// その他
Badge // カテゴリ表示
Tooltip // アクションボタンの説明
DropdownMenu // ソートメニュー
### サイドバー画面
// レイアウト
Sheet // モバイル表示時
Separator // カテゴリ区切り
// 操作要素
Button // カテゴリ選択
DropdownMenu // カテゴリ操作メニュー
// フィードバック
Dialog // 削除確認
Toast // 操作完了通知
### 達成率画面
// レイアウト
Card // 期間ごとの達成率
// 表示要素
Progress // 進捗バー
// 操作要素
Button // 更新ボタン
// フィードバック
Toast // 更新完了通知
## スタイルカスタマイズ
### カラーテーマ
// ベースカラー
primary: "#0EA5E9" // Sky Blue
secondary: "#6B7280" // Gray
accent: "#F59E0B" // Amber
// 状態カラー
success: "#22C55E" // Green
warning: "#F59E0B" // Amber
danger: "#EF4444" // Red
### アニメーション
// トランジション
transition: {
DEFAULT: "all 0.3s ease",
fast: "all 0.15s ease",
slow: "all 0.5s ease",
}
// アニメーション
keyframes: {
slideIn: { ... },
fadeIn: { ... },
scaleUp: { ... },
}
## アクセシビリティ対応
- すべてのインタラクティブ要素にツールチップを追加
- フォーム要素にラベルとヘルプテキストを追加
- エラーメッセージは色だけでなくアイコンと文章で表示
- キーボード操作のフォーカス表示を明確に
## サイドバーの実装計画
### 基本構造
// app/layout.tsx
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/app-sidebar"
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<SidebarProvider>
<AppSidebar />
<main>
<SidebarTrigger />
{children}
</main>
</SidebarProvider>
)
}
// components/app-sidebar.tsx
import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar"
const items = [
{
title: "ホーム",
url: "/",
icon: Home,
},
{
title: "受信トレイ",
url: "/inbox",
icon: Inbox,
},
{
title: "カレンダー",
url: "/calendar",
icon: Calendar,
},
{
title: "検索",
url: "/search",
icon: Search,
},
{
title: "設定",
url: "/settings",
icon: Settings,
},
]
export function AppSidebar() {
return (
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>アプリケーション</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
)
}
### スタイル設定
@layer base {
:root {
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 0 0% 98%;
--sidebar-primary-foreground: 240 5.9% 10%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}
### カスタマイズオプション
- `side`: サイドバーの位置（"left" | "right"）
- `variant`: サイドバーのバリアント（"sidebar" | "floating" | "inset"）
- `collapsible`: 折りたたみ方式（"offcanvas" | "icon" | "none"）
### 状態管理
const {
state, // 'expanded' | 'collapsed'
open, // boolean
setOpen, // (open: boolean) => void
openMobile, // boolean
setOpenMobile, // (open: boolean) => void
isMobile, // boolean
toggleSidebar, // () => void
} = useSidebar()
### キーボードショートカット
- デフォルト: Mac = cmd+b, Windows = ctrl+b
- カスタマイズ: `SIDEBAR_KEYBOARD_SHORTCUT`変数で変更可能
### 永続化
- Cookieを使用して状態を保存
- デフォルトのCookie名: `sidebar:state`
- カスタマイズ: `SIDEBAR_COOKIE_NAME`変数で変更可能
環境構築を進めてもらう
よし、ではbiome, lefthook, shadcn/uiの設定をする
チェックリストがあるので、チェックリストを進めてでいける
こんな感じに実行するコマンドの提案をしてくれる
仮にエラーが出ても、勝手にそのエラーを解析してやり直してくれる
たまにnpmを使おうとするので注意
あと勝手にまた1から構築しようとするので、適宜現在のファイル状況を確認させよう
あとBiomeの知識も古くて、--applyを使わせたりするので、--writeにする。あとルールもちゃんと変なの追加されてないか、必要なチェックがあるか確認しよう
いまいまいが、ダメ...！
lefthookの設定めっちゃ苦戦した
これ自分でコピペした方が絶対早い
lefthook.yml
pre-commit:
parallel: true
commands:
fix:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: bun biome format --write --no-errors-on-unmatched {staged_files} && git update-index --again
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: bun biome check --write --no-errors-on-unmatched {staged_files} && git update-index --again
type:
glob: "*.{ts,tsx}"
run: bun tsc --noEmit
pre-push:
commands:
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: bun biome check --no-errors-on-unmatched {staged_files}
shadcn/uiの設定
次にshadcn/uiの設定
これも基本的にAIがやってくれる
bunx --bun shadcn@latest initの--bunを知らなさそうだったのでチャットで提案
shadcn/uiのコードでbiomeのエラーが吐かれるが、そのエラーもcursorに投げれば解決してくれる
いまいまい続いてdrizzleの設定
コマンドもテーブル定義も勝手に作ってくれる
scheme/todo.ts
import { sql } from 'drizzle-orm';
import { pgTable, text, timestamp, boolean } from 'drizzle-orm/pg-core';
export const todos = pgTable('todos', {
id: text('id').primaryKey(),
title: text('title').notNull(),
deadline: timestamp('deadline'),
categoryId: text('category_id').notNull(),
isCompleted: boolean('is_completed').notNull().default(false),
isFavorite: boolean('is_favorite').notNull().default(false),
createdAt: timestamp('created_at')
.notNull()
.default(sql`CURRENT_TIMESTAMP`),
updatedAt: timestamp('updated_at')
.notNull()
.default(sql`CURRENT_TIMESTAMP`),
});
drizzleとd1の設定は案外簡単にできた！
でもここでComposerのAgentのリミットが一杯一杯に...
いまいまいComposerのAgentくん激おそになってしまったかつ、ある程度他でアプリも作ってみたので、これまでで一旦感想
DocDDの感想まとめ
概要
DocDD（Document-Driven Development）は非常に難しいと感じました。エンジニア的には従来よりも2段階多く作業が増える印象があります。
必要な条件・改善ポイント
-
基礎的な環境構築の重要性
DocDDを実践するには、事前に基礎的な環境構築を済ませておく必要があります。 -
UIの重要性
最初はシンプルなUI（v0）で運用するのが良い。 -
要件定義と中間ドキュメント
- 要件定義からコードへの移行の間に、詳細な中間ドキュメントを生成するプロセスが必要。
- この中間ドキュメントはAIが生成できるようにするべきだが、人間によるレビューも欠かせない。
-
インデックスやチェックリストの必要性
- 中間ドキュメントを分かりやすくするためのインデックスを作成。
- 現在の作業状況を把握するためのチェックリストを用意する。
-
ドキュメントレビューの重要性
Notionでのドキュメントレビューだけでなく、中間ドキュメントのレビューも必要。
（リポジトリで全てのドキュメントを管理している場合は例外）
現状の課題
-
非エンジニアには扱いづらい
DocDDはまだ非エンジニアにとって使いこなせる段階ではありません。そのため、エンジニアがこのプロセスを支える必要があります。 -
AIの限界
AIがバグ解決に行き詰まると、膨大な中間ドキュメントを調査する必要があり大変です。
また、AIはもう一段階メタ的な視点を持つ必要があります。 -
技術の進化に追いつけない
Webの新技術（例: Next.js15のSearchParams）における詰まりやすさも課題です。AIの進化よりも速い技術進化が障害になる場合があります。
結論
- 現時点では実務でDocDDを採用するのは難しい。
- 趣味や実験として取り組む分には楽しめるが、実務レベルでは対応しきれない部分が多い。
- VercelやCloudflareとCursorの連携などの改善があれば、一気に使いやすくなる可能性がある。
DocDDは興味深いプロセスですが、ドメイン知識が不十分であったり、応用力に欠ける現状では「知識だけの赤ちゃん」を育てている感覚です。成熟するまでにはまだ時間が必要だと感じました。
いまいまいちなみに別のアプリでやった時は、ServerComponentsで良さげにコンポーネント分割してくれてたので、環境構築がネックで、あとはサラサラ行けるイメージ。
ただ使ってるライブラリのバージョンが新しかったり、Next.js15のPPRや RouteHandlerのコード生成はまだ渋い。
このスクラップは26日前にクローズされました