⏱️ Copilot × ChatGPT × Claude 3.5 Sonnetで「カレンダー給与管理アプリ」を4時間で開発した話
🧪 技術スタック・開発環境
| 項目 | 内容 |
|---|---|
| フレームワーク | Next.js（App Router） |
| スタイリング | Tailwind CSS |
| データベース | Supabase（PostgreSQL） |
| AIツール | ChatGPT（GPT-4）＋ Claude 3.5 Sonnet |
| UIホスティング | Vercel |
| 使用コマンド | npx create-next-app@latest |
🎯 アプリの目的
TimeTree風の直感的なUIを採用しながら、
アルバイトやシフト勤務者が「働いた時間×時給」から給与の概算を計算できるというシンプルかつ実用的なWebアプリの開発を試みました。
URL: https://shift-app-mu.vercel.app
- シフトをカレンダーに登録
- 自動的に月ごとの給与を計算
- UIはTimeTreeのように使いやすく、視覚的にもスッキリ
🛠️ 開発フロー（所要時間：約4時間）
① ChatGPTに仕様書を作ってもらう（30分）
まず、UIの方向性を「TimeTreeのようにしたい」と伝えた上で、
ChatGPTに以下を一括生成してもらいました：
- 画面遷移図
- ER図
- 各コンポーネントごとのUI仕様書
- Header、Sidebarなどの構造定義
このフェーズで「人間が考える工数を爆速で圧縮」できました。
② Claude 3.5 Sonnetに開発を丸投げ → エラー地獄（1.5時間）
ChatGPTで作成した仕様書をもとに、Claudeでコード生成を開始。
ところが、次のような問題が頻発：
| 問題点 | 内容 |
|---|---|
| Tailwind CSS未読み込み | PostCSSやtailwind.config.jsがなく、UIが崩壊 |
| package.jsonバージョン不整合 |
"next"や依存ライブラリの整合が取れず起動不可 |
対応策：
npx create-next-app@latest を自分で実行し、その上でClaudeに「この中に追記して」と依頼することで安定起動できました。
③ useEffect 無限ループ問題（30分）
Claudeが生成したAPI呼び出しコードでは useEffect の依存配列が未設定。
→ 無限にSupabaseへアクセスが走ってサーバーが大変なことに…。
対応：
useEffect(() => {
fetchData();
}, []); // 依存配列を空にすることで一度だけ実行
④ SupabaseのSQLトラブル（30分）
Supabaseにおけるテーブル作成もClaudeに任せましたが、
意図しない不要テーブル（例：company_roles など）を自動生成し、外部キー制約のエラーが発生しました。
対応：
- 作成したいテーブルを 1つずつ明示的に指示 してSQLクエリを生成
- ChatGPTに生成してもらったER図と照らし合わせながら、構造を修正・統一
⑤ UI/UXの改善は「画像提示が必須」（1時間）
Claudeに「もっとTimeTree風にして」とテキストだけで依頼しても、
UI/UXの改善が一切反映されないという事態が発生。
対応：
- TimeTreeのUIのスクリーンショットを提供
- 「どのようなカレンダー構成か」「何が見やすいか」などをChatGPTに明確に説明
- 画像ベースでコンポーネントの構造や色設計を伝えると、やっと意図通りのUIが実装可能に
⑥ Vercelデプロイ時のTypeScriptエラー対応（30分）
Vercelへのデプロイでは any 型や未定義の値による型エラーが頻発。
一部のpropsが型定義されておらず、LintやTSエラーでデプロイ失敗。
対応：
- propsや関数の戻り値にしっかりと型アノテーションを追加
- ESLintとPrettierを併用して全体のコードフォーマットと安全性を確保
✨ 感想とTipsまとめ
- AIに「丸投げ」は無理。構成や初期セットアップまでは良くても、微修正は人間が必要。
- AIにはプロンプト＋図解＋明示的指示が必須。抽象的な「もっといい感じに」は無意味。
- 実務レベルでのAI活用には「先導役」が不可欠。仕様書を固めたうえで「任せる範囲」を限定すること。
🔚 最後に
AIをフル活用すれば、たった4時間で給与管理アプリが完成できました。
ただし、「丸投げ」ではなく「ハンドルを握る」意識が重要でした。
このあとは、レスポンシブ対応やloading処理を追加していきます