前回、Claude Codeにフェーズ1のバックエンド実装を任せてみました。
今回はその続きとして、フェーズ2のフロントエンド基盤をそのまま実装させてみた結果を書きます。
今回やったこと
前回と同じやり方で進めています。
すでにplanモードで仕様書は出ており、フェーズ1のバックエンドの実装も終わっている状態です。
今回の入力もかなりシンプルにしました。
フェーズ2を実装してください
これだけです。
仕様書とこれまでの実装内容がコンテキストに入っているので、この一行でどこまで進むのかを試しています。
AIが最初にやったこと
今回も、いきなりコードを書き始めることはありませんでした。
まず最初にやっていたのは以下です。
- Todoの整理
- 既存コードの読み込み
- ディレクトリ構造の確認
フェーズ1のときと同じ動きです。
こちらは一行しか指示していませんが、内部では調査から入っている挙動になっていました。
なぜこの動きになるのか
CLAUDE.mdで以下のようなルールを固定しているからです。
ExploreからPlanそしてImplementの順で進める
コード変更時は必ずテストを書く
lintとtestが通ることを完了条件にする
この状態で実行すると、
- 既存コードを読む
- Todoを整理する
- 実装する
- テストを書く
- lintとtestを通す
という流れが毎回再現されます。
つまり、
AIが自律的に調査しているというよりも、
ルールに従って開発プロセスが再現されている状態です。
環境設計で開発の流れをコントロールできていることがわかります。
AIが実装した内容
今回実装されたのは、フロントエンドの基盤部分です。
内容としては以下のような構成でした。
- Viteのセットアップ
- ReactとTypeScriptの構成
- チャート表示のためのライブラリ導入
- バックエンドAPIとの通信処理
- 状態管理のためのhook実装
- 型定義の作成
- テストコードの作成と実行
フェーズ1ではバックエンドのロジックやAPIが作られていましたが、今回はそれを使うためのフロント側が用意された形です。
実装後の状態
この時点では、フロントエンドは完成ではありません。
UIはまだ作られておらず、画面としては初期状態のままです。
ただし、
環境は整っている
APIと接続できる構成になっている
状態管理の基盤もある
という状態です。動くための基盤はできているという段階です。
フェーズ1との違い
フェーズ1はバックエンドでした。
データ処理
API実装
テスト
今回のフェーズ2はフロントエンドです。
UI基盤
状態管理
API連携
扱っている領域は違いますが、やり方はまったく同じです。
一行の指示で進めて、エラーが出たら修正して、動くところまで持っていく
実際にやってみて感じたこと
今回改めて感じたのは、仕様書の重要性です。
最初にplanモードで仕様を出しているので、実装フェーズではほとんど指示がいりません。
実際、今回も一行だけで進んでいます。
もう一つは、CLAUDE.mdの影響です。
調査してから実装する
テストを書く
lintを通す
この流れが毎回再現されるので、開発プロセスそのものをAIに任せられる感覚があります。
AIコーディングの進め方
今回の流れを整理すると、やっていることはシンプルです。
仕様を作る
実装させる
動かす
エラーを直す
一発で完璧に作るのではなく、少しずつ前に進めるというやり方になります。
次にやること
次はフロントエンドのUI実装です。
チャートを表示して
実際に銘柄を入力して使える状態にする
ここまでいけば、ようやくツールとして使える形になります。
まとめ
今回は、Claude Codeにフェーズ2のフロントエンド基盤実装を任せてみました。
やったことは、フェーズ2を実装してくださいと伝えただけです。
その結果、フロントエンドの基盤が一通り構築されました。
そして、わかることは
AIが自律的に動いているように見えても、
実際には環境設計で開発の流れをコントロールすることが重要ということです。
このまま同じやり方で、次のフェーズであるフロントエンドのUI実装を進めていきます。
