⏱️ Copilot × ChatGPT × Claude 3.5 Sonnetで「カレンダー給与管理アプリ」を4時間で開発した話

🧪 技術スタック・開発環境

TimeTree風の直感的なUIを採用しながら、
アルバイトやシフト勤務者が「働いた時間×時給」から給与の概算を計算できるというシンプルかつ実用的なWebアプリの開発を試みました。
URL: https://shift-app-mu.vercel.app

まず、UIの方向性を「TimeTreeのようにしたい」と伝えた上で、
ChatGPTに以下を一括生成してもらいました：

このフェーズで「人間が考える工数を爆速で圧縮」できました。

ChatGPTで作成した仕様書をもとに、Claudeでコード生成を開始。
ところが、次のような問題が頻発：

問題点	内容
Tailwind CSS未読み込み	PostCSSやtailwind.config.jsがなく、UIが崩壊
package.jsonバージョン不整合	`"next"`や依存ライブラリの整合が取れず起動不可

対応策：
npx create-next-app@latest を自分で実行し、その上でClaudeに「この中に追記して」と依頼することで安定起動できました。

Claudeが生成したAPI呼び出しコードでは useEffect の依存配列が未設定。
→ 無限にSupabaseへアクセスが走ってサーバーが大変なことに…。

対応：

useEffect(() => {
fetchData();
}, []); // 依存配列を空にすることで一度だけ実行

Supabaseにおけるテーブル作成もClaudeに任せましたが、
意図しない不要テーブル（例：company_roles など）を自動生成し、外部キー制約のエラーが発生しました。

対応：

Claudeに「もっとTimeTree風にして」とテキストだけで依頼しても、
UI/UXの改善が一切反映されないという事態が発生。

対応：

Vercelへのデプロイでは any 型や未定義の値による型エラーが頻発。
一部のpropsが型定義されておらず、LintやTSエラーでデプロイ失敗。

対応：

AIをフル活用すれば、たった4時間で給与管理アプリが完成できました。
ただし、「丸投げ」ではなく「ハンドルを握る」意識が重要でした。
このあとは、レスポンシブ対応やloading処理を追加していきます