Claude Codeで要件定義からアプリを作成してみる(実装編 – フェーズ2)

前回に続き、今回は実装のフェーズ2です。

Phase 0: 環境セットアップ

Phase 1: バックエンド開発

Phase 2: フロントエンド開発

Phase 3: 統合とテスト

Phase 4: デプロイメント

Phase 5: 追加機能・改善(オプション)

目次

実装:フェーズ2

フェーズ2開始前のクレジット残高

フェーズ2実行

@TODO.md これを元にフェーズ2の実装をお願いします。終わったらチェックボックスにチェックをしてください。use context7

セッションを立ち上げ直したことで現状把握から始まったので、実装に入るまでに時間(とクレジット)を要しました。

しばらくすると、フェーズ2が完了しました。

フェーズ2完了

TODO.mdにチェックもしてくれました。

フェーズ2完了時のクレジット残高

およそ316円消費しました。

UIチェック

「開発サーバーの出力を確認しますか?」と聞かれたので進めてみました。

出力されたURLをブラウザで叩いてみると・・・

フェーズ2完了時のUI画面

おぉ!!

ChatGPTが話題になり始めた頃のようなUIではありますが、AIに丸々実装してもらったと思うと凄いですね。

しかし、左下にエラーが見えますし、「New Chat」をクリックしても反応しません。

Claude Codeが次のようにプランを考えています。

フェーズ3開始前

Claude Codeにテストと修正をしてもらうわけですが、なかなかのクレジット消費が予想されます。。

少しずつ、有料プランが良かったかなと思い始めています。

現状を記録してセッションを切断する

キリの良いところでPCをシャットダウンしています。

Claude Codeのセッションを切断する前に、現状の記録を依頼しました。

これからPCをシャットダウンするので、作業を中断します。
再開時にスムーズに始められるよう、以下の内容を pause_checkpoint.md(またはREADMEの末尾など)に
簡潔にメモしておいて。

1. 現在までに完了したこと
2. 現在直面している課題や未解決のバグ
3. 次回起動時に真っ先にやるべきこと
ClaudeCodeセッション切断前の現状を記録

はたして次回、スムーズに再開できるのでしょうか!?

まとめ

Claude CodeによるAI駆動開発のフェーズ2を完了しました。

続いてフェーズ3のテストに入っていきます。

目次