turbo+Remix+supabaseのmonorepoアプリケーションをclaudeと一緒に作っていく過程

1. Turboのセットアップを手作業で

1-1. まずはturboで新規作成

$ pnpm dlx create-turbo@latest

1-2. 不要なフォルダなどの整理

1-3. turboのフォルダ構成の参考はこれ

共通UI、データアクセス、ビジネスロジックをpackagesに共通化する予定

YoshikiAgatsuma

2. Turboの/app内に必要なRemixアプリを追加していく&deploy設定

2-1. create-remixする

$ pnpm dlx create-remix@latest

2-2. 追加したアプリをvercelで設定する

2-1で追加したディレクトリを指定するだけで完了
ついでにdev環境のドメイン切ってdev/prod環境分けて作成
↓
この作業を必要なアプリ分繰り返す

2-3. 一旦ディレクトリ構成はこんな感じになった

$ tree -L 3
.
├── README.md
├── apps
│   ├── app1
│   │   ├── README.md
│   │   ├── app
│   │   ├── ...etc
│   ├── app2
│   │   ├── README.md
│   │   ├── app
│   │   ├── ...etc
│   ├── app3
│   │   ├── README.md
│   │   ├── app
│   │   ├── ...etc
│   └── app4
│       ├── README.md
│       ├── app
│   │   ├── ...etc
├── docs ==> ## ここにClaudeと一緒に作ったドキュメント入れていく
│   ├── README.md
│   ├── api
│   ├── architecture
│   │   └── application_architecture.md
│   ├── database
│   │   └── er.mmd
│   ├── requirements_definision_mvp.md
│   └── ui
├── lefthook.yml
├── node_modules
│   └── ...etc
├── package.json
├── packages
│   ├── biome-config
│   │   ├── biome.json
│   │   └── package.json
│   ├── shadcn-config
│   │   ├── components.json
│   │   └── package.json
│   ├── typescript-config
│   │   ├── base.json
│   │   ├── nextjs.json
│   │   ├── package.json
│   │   ├── react-library.json
│   │   └── remix.json
│   └── ui
│       └── ...etc
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── tsconfig.json
└── turbo.json

YoshikiAgatsuma

3. Remixアプリ内の設定/開発環境の整理

3-1. ディレクトリ構成メモ

3-2. biomeの設定諸々

TODO

3-3. shadcnの追加

packages/uiにshadcn追加して、app側で読み取るような構成にしようと思った
こんな感じのイメージで最初進めてた

しかし、packages/uiで作ったshacnのコンポーネントをapp側で表示しても思うようなcssが効かない
- 色々試したけどダメ...orz
いちいち共通化する方法模索するのだるくなったので、アプリ個別でshadcnセットアップする方向で一旦進めようと思った

YoshikiAgatsuma

4. Claudeと一緒に要件定義等の資料を作る

4-1. ある程度イメージしてるシステムなど全体図を先に文字に起こす

今回はある程度、弊社でいつも使う要件定義の雛形に必要な項目を入れた上で、その内容をClaudeに渡した

# 1. はじめに
# 2. プロダクト構成草案(登場人物)
# 3. 解決したい課題について
# 4. 機能/非機能要求草案
# 5. 各種費用に関して(optional)
# 6. スケジュール感

4-2. 上記を準備した上で、Claudeとの共同作業

始まりはこんな感じ

要件定義を適宜詰めつつ、技術スタックを指定したり

要件定義が固まってきたら、次回以降何すれば良いかもナビゲートしてくれるのが最高
こんな感じでわからないことや変更箇所は適宜伝えながら、アウトプットとして出してくれる資料をGit管理に載せて資料に出来るのが楽で良い。

YoshikiAgatsuma

進めてく順番はこんな感じだった

＜全体の整理＞

要件定義
データモデリング
システムアーキテクチャの整理

＜各画面や各機能ごとの設計＞

UI/UXデザイン（ワイヤーフレーム作成）
開発タスクの優先順位付けと工数見積もり
テスト戦略の策定

ここまでの所感メモ

ワイヤーは画像とかデザインツールではなく、コードのartifactなので、ちゃんとするなら他のAIツールとか使うとより良いなと感じる(createとか、AIデザインツール系)
あげてくるコードは、1つのファイルに全てまとまった形(当たり前だが)で上がってくるので、ファイル分割化とかその辺りはインテグレートする側の匙加減になりそう。(この辺は別途Cursor側のcomposer側で、ファイル分割して！とか、リファクタリングして！を雑に投げられるのを確認出来たので、そっちでやってもらうのがよきかなっておもた)