株式投資ツールのフロントエンド基盤をAIに任せて実装してみた

※本記事はプロモーションを含みます。

前回、Claude Codeにフェーズ1のバックエンド実装を任せてみました。

投資ツール側で候補をどう残すかは、AIで株式投資ツールに売買候補銘柄の管理画面を追加してみたで整理しています。候補を出したあとに何を見返すかを考える前提になります。

自作ツールだけで判断を閉じないために、moomoo AIとは？株式投資に特化したAIを買う前の確認役にできるか考えてみたでは、買う前の確認役として特化型AIをどう見るかを整理しています。

今回はその続きとして、フェーズ2のフロントエンド基盤をそのまま実装させてみた結果を書きます。

---

今回やったこと

前回と同じやり方で進めています。

すでにplanモードで仕様書は出ており、フェーズ1のバックエンドの実装も終わっている状態です。

今回の入力もかなりシンプルにしました。

フェーズ2を実装してください

これだけです。

仕様書とこれまでの実装内容がコンテキストに入っているので、この一行でどこまで進むのかを試しています。

AIが最初にやったこと

今回も、いきなりコードを書き始めることはありませんでした。

まず最初にやっていたのは以下です。

• Todoの整理
• 既存コードの読み込み
• ディレクトリ構造の確認

フェーズ1のときと同じ動きです。

こちらは一行しか指示していませんが、内部では調査から入っている挙動になっていました。

なぜこの動きになるのか

CLAUDE.mdで以下のようなルールを固定しているからです。

ExploreからPlanそしてImplementの順で進める
コード変更時は必ずテストを書く
lintとtestが通ることを完了条件にする

この状態で実行すると、

• 既存コードを読む
• Todoを整理する
• 実装する
• テストを書く
• lintとtestを通す

という流れが毎回再現されます。

つまり、

AIが自律的に調査しているというよりも、
ルールに従って開発プロセスが再現されている状態です。

環境設計で開発の流れをコントロールできていることがわかります。

AIが実装した内容

今回実装されたのは、フロントエンドの基盤部分です。

内容としては以下のような構成でした。

基盤づくりの段階で、後から運用しやすい構造を意識しました。判断の流れはAIで株式投資ツールに売買候補銘柄の管理画面を追加してみたで補強しています。

フェーズ1ではバックエンドのロジックやAPIが作られていましたが、今回はそれを使うためのフロント側が用意された形です。

実装後の状態

この時点では、フロントエンドは完成ではありません。

UIはまだ作られておらず、画面としては初期状態のままです。

ただし、

環境は整っている
APIと接続できる構成になっている
状態管理の基盤もある

という状態です。動くための基盤はできているという段階です。

フェーズ1との違い

フェーズ1はバックエンドでした。

データ処理
API実装
テスト

今回のフェーズ2はフロントエンドです。

UI基盤
状態管理
API連携

扱っている領域は違いますが、やり方はまったく同じです。

一行の指示で進めて、エラーが出たら修正して、動くところまで持っていく

ここは「当たるか」より「どう判断を再現するか」が大事でした。買いタイミングOKの銘柄をmoomoo AIで分析｜確認用プロンプトを作ってみたを挟むと、運用時の迷いが減ります。

実際にやってみて感じたこと

今回改めて感じたのは、仕様書の重要性です。

最初にplanモードで仕様を出しているので、実装フェーズではほとんど指示がいりません。

実際、今回も一行だけで進んでいます。

もう一つは、CLAUDE.mdの影響です。

調査してから実装する
テストを書く
lintを通す

この流れが毎回再現されるので、開発プロセスそのものをAIに任せられる感覚があります。

AIコーディングの進め方

今回の流れを整理すると、やっていることはシンプルです。

仕様を作る
実装させる
動かす
エラーを直す

一発で完璧に作るのではなく、少しずつ前に進めるというやり方になります。

次にやること

次はフロントエンドのUI実装です。

この場面は情報量より順番が大事でした。moomoo AIとは？株式投資に特化したAIを買う前の確認役にできるか考えてみたを先に見て判断の並びをそろえると、次の一手が決めやすくなります。

チャートを表示して
実際に銘柄を入力して使える状態にする

ここまでいけば、ようやくツールとして使える形になります。

---

まとめ

今回は、Claude Codeにフェーズ2のフロントエンド基盤実装を任せてみました。

やったことは、フェーズ2を実装してくださいと伝えただけです。

その結果、フロントエンドの基盤が一通り構築されました。

そして、わかることは

AIが自律的に動いているように見えても、
実際には環境設計で開発の流れをコントロールすることが重要ということです。

このまま同じやり方で、次のフェーズであるフロントエンドのUI実装を進めていきます。