VibeCodingでコード編集なし「多機能Todoアプリ」を作ってみた話

はじめに

「AIコーディングエージェントに任せきって、自分は一切コードを編集しない」——最近こういう開発スタイルを VibeCoding と呼ぶらしい。

Claude Code なら本当にそれができるのか？「究極のTodoアプリ」を題材に、一行もコードを書かずにどこまで実装できるのか試してみた記録です。結論から書くと、ユーザー認証、タスクCRUD、カレンダー、ドラッグ&ドロップ並び替え、タグ、繰り返しタスク、通知まで、想像以上に動きました。

1. まずは開発計画から：たった数行のプロンプト

以下のプロンプトを投げただけで、Claude Code は本格的な開発計画を作成してくれました。

これで生成された plan.md の目次は、こんなに立派なものでした:

• 目的とスコープ（MVP開発：課題解決できる必要最小限の機能に絞る）

• 実装する機能・第1次では実装しないもの

• 技術スタック（フロント: React + Vite + TypeScript + Tailwind + React Router + TanStack Query + React Hook Form + Zod / バック: FastAPI + SQLAlchemy 2 + Alembic + SQLite + Pydantic + JWT + bcrypt）

• データモデル（User / StatusCategory / Status / Task）

• API 設計、画面一覧

• 開発フェーズ P1〜P5

• 非機能要件、リスク・検討事項

• 第2次開発計画 カレンダー、UX向上、認証拡張、分析ダッシュボード

「まずはMVPを、その次に本格機能を」と、第1次開発計画と第2次開発計画に自然に分けてくれたのが個人的にはとても嬉しかった。

2. こんな簡単なプロンプトで「開発ステップ」が完璧に

続いて、以下のプロンプトを投げました。

3. 実装フェーズ：Claude Code が順番に進めていく

計画ができたら、あとはひたすら 「Step X をお願いします」 を繰り返すだけ。各Stepの終わりには自動テストが通り、フロントは実際にブラウザで動作確認するところまでやってくれる、この流れが本当に気持ちよかった。

使用モデル:

• steps.md（第1次）: Fable 5（ちょうど使用可能期間だったので試しに採用）

• steps-phase2.md（第2次）: Opus 4.8

Pro プランなので トークン制限に達したら追加購入 or 解除待ち、というのを何度か繰り返しました。制限がかかっても、コンテキストは会話履歴に残っているので、時間が経ってから 「Step 6 をお願いします」 と再開すれば普通に続きから進められる。

4. 第1次開発の完成：ミニマムなTodoアプリ

12ステップを消化すると、こんな見た目のアプリになりました。

• ログイン / 新規登録（JWT + httpOnly Cookie でセッション管理）

• タスク一覧（分類フィルタ、件数バッジ、期限超過の赤字表示）

• ステータス管理（4分類ごとに、自分用のラベルを追加・改名・削除）

• レスポンシブ対応（375px から 1440px まで表示崩れなし）

5. 第2次開発：機能がどんどん増えていく

Opus 4.8 に切り替えて、steps-phase2.md を Step 1 から順番に。

Q1〜Q2: カレンダービュー

FullCalendar を使って 月ビュー / 週ビュー、タスクを 分類ごとの色付きチップ で配置。日をクリックすればその日を初期期限にした新規モーダルが開き、タスクを別の日にドラッグすると期限日が変わる（arg.revert() で失敗時はロールバック、モバイルはロングプレス対応）。

「期限なしタスク」用のトレイもカレンダーの横に常設。

Q3: UX向上（並び替え / タグ / 検索 / 繰り返し / リマインダー）

• タスクの並び替え: dnd-kit で滑らかにドラッグ、sort_order を PATCH

• タグ機能: モーダル内で新規タグ作成、#タグ名 バッジ、タグでの絞り込み

• 検索: ヘッダーに / キーでフォーカスできる検索フォーム、300ms のデバウンス

• 繰り返しタスク: 「毎日/毎週/毎月」のセレクタ、完了時に次回タスクが自動生成（月末は該当月の最終日に自動補正、閏年も対応）

• 期限リマインダー: ログイン直後にトーストで通知、設定画面で ON/OFF 切替

6. 不具合発生と、Claude Codeでの解決

順風満帆ではなく、途中でいくつか不具合に遭遇。それも全部 Claude Code が調査＆修正してくれました。

🐛 不具合 1: ステータスが削除できない

症状: ステータス管理画面から未使用のステータスを削除しようとしても、なぜか反応がない or 使われていない筈なのに「使用中で削除できません」と出る。

原因と解決: サーバー側の「使用中判定」の SQL は正しかったのですが、フロント側でキャッシュされた古いタスクデータを見ていたため、削除条件を実データと突き合わせられていなかった。TanStack Query の invalidateQueries で タスクとステータス両方のキャッシュを再取得 するように修正。

🐛 不具合 2: ログアウト後に F5 押下で元の画面に戻ってしまう

症状: 「ログアウト」ボタンを押した直後は正しくログイン画面に遷移するが、その後 F5（リロード）すると、なぜかタスク画面に戻ってしまう。他人が使う端末では致命的。

原因と解決: ログアウト API 呼び出し時に queryClient.clear() はしていたものの、リロード直後の一瞬 useAuthUser がキャッシュされた「前のユーザー」データを返してしまい、ルートガードが「認証済み」と判定していた。ログアウト成功時に setQueryData(['auth', 'me'], null) で明示的に null を書き込む ことで、リロード後もきちんと /login にリダイレクトするように修正。

7. 完成！

こうして、MVP + カレンダー + UX向上機能 + プロフィール編集 まで、一通り動作するTodoアプリが完成しました。コードは1行も自分で編集していないにもかかわらず、ローカルで走らせると、しっかり自分のためのアプリとして使える。

8. 課題と次のステップ

一通り動くようになって使ってみたところ、あることに気づきました。

期限は「日付」だけで扱っていて、「明日 15:00 まで」のような時刻指定ができない。日常タスクなら日単位でも十分ですが、「打ち合わせ」「電車の予約」などを含めるなら時刻は必須。ここは次期開発で対応します。

そして、次にやるのは steps-phase2.md の Q4 = 認証拡張、なかでも Google OAuth ログイン（Step 16） を進める予定。Google Cloud Console で OAuth クライアントを作るところだけは自分で作業が必要ですが、それ以外は Claude Code に任せる形で進めます。

9. まとめ：VibeCodingすごい

改めて振り返ると、この開発で自分がやった作業は次の通り:

• ✅ 最初のプロンプトを書く（plan.md 作成依頼）

• ✅ 次のプロンプトを書く（steps.md 作成依頼）

• ✅ 「Step X をお願いします」を繰り返す

• ✅ 不具合が出たときに症状を伝える

• ❌ コードは1行も書いていない

• ❌ 設計図を自分で描いていない

• ❌ テストコードも自分で書いていない

これで バックエンドAPI（テスト95件）+ SPA + カレンダー + DnD + タグ + 繰り返し + 通知 が動くアプリを1人で作れた。
「AI にコーディングを任せる」というと不安に感じる人もいるかもしれませんが、Claude Code は "計画を立てる→ステップに分ける→順番に実装する→テストを書く→ブラウザで動作確認する" というエンジニアリングの流儀そのものを踏襲してくれる。だから安心して任せられます。
コード編集なしでここまでできる時代、想像していたよりずっと近くまで来ていました。

おまけ: プロジェクトの構成