フェーズ2でバックエンドの実装まで進み、次はフロントエンドのUIを実装してみました。
今回は、その結果をそのまま記録します。
AIでフロントエンドのUI実装
フロントエンドのUIをClaude codeで実装しました。
今回もフェーズ3を実装して
とだけ指示しました。
- 銘柄コードの入力
- チャート表示エリア
- 日足・週足・月足の切り替え
最低限、チャートを表示するための画面を作っています。
AIはどう考えて実装していたか
今回の実装では、いきなり画面全体を作るのではなく、構成要素を分解して進めていました。
具体的には、
- 銘柄コード入力
- 足種切り替え
- ローディング表示
- エラー表示
- チャート表示
といった形で、役割ごとにコンポーネントを分けて設計しています。
さらに、実装の順番も明確に分割されていて、
- 個別コンポーネントを作る
- 共通部品を作る
- 最後に全体を接続する
- テストを実行する
という流れで進めていました。
つまり、最初から完成形を出すのではなく、
小さく作って積み上げる方針で実装していたことが分かります。
Claudeが行っていた試行錯誤
実装は一発ではうまくいっておらず、いくつか修正を繰り返しています。
まず最初のテスト実行では、大量に失敗しています。
原因は、Vitestの実行場所が適切でなく、jsdom の設定が効いていなかったことでした。
これに対して
- 実行ディレクトリを修正する
- テスト環境を正しく反映させる
という形で対応しています。
次に詰まっていたのが、入力フォームのテストです。
- エラー表示が検出できない
- 非同期の状態更新が反映されない
といった問題に対して、
fireEventからuserEventに変更- 実際のユーザー操作に近い形に修正
- Enterキー操作に寄せて再現性を上げる
といった調整を行い、最終的にテストを通しています。
この流れを見ると、
エラーをそのまま受け取り、原因を切り分けながら修正している
という動きになっていました。
実装結果
まず結果からいうと、
UIは問題なく立ち上がりました。
- 画面は表示される
- 入力もできる
- チャートの枠も表示される
また、コンポーネント単位のテストも最終的にはすべて通っています。
見た目としては、それっぽいツールができています。
問題：株価が表示されない
一番重要な部分である
「株価データが表示されない」
という状態になりました。
つまり、
- UIは完成しているように見える
- でも中身のデータがない
という、いわゆる“ガワだけ完成している状態”です。
問題の原因
ここで改めて整理してみると、
- フロントエンドの部品は作れている
- テストも通っている
- しかし実際のデータが流れていない
という状態でした。
この流れから見ると、
- UIの構造設計
- コンポーネント分割
- テスト整備
までは問題なく進めていましたが、
フロントとバックエンドをつなぐ部分までは十分にカバーできていなかった
と考えられます。
今回のポイント
今回のフェーズで分かったのは、
UIが立ち上がることと、実際に動くことは別物ということです。
しかも今回は、
- 分割して実装
- テストも通過
という状態までいっています。
それでも最終的には株価が表示されなかった。
「見た目」「部品」「テスト」が揃っていましたが、データ連携ができていませんでした。
次にやること
今回のエラーの内容的に、以下の内容を確認していくのが良いと思っています。
- APIの接続確認
- データ取得の確認
- チャートへのデータ反映
- フロントとバックエンドの間でどこで止まっているかの切り分け
しかし、もちろん、自分で原因調査はしません。
Claudeに原因の調査から修正までやってもらいます。
まとめ
フェーズ3では、
- UIは完成した
- コンポーネント分割もできている
- テストもすべて通った
- ただし株価は表示されなかった
という結果になりました。
今回の実装を見ると、
- AIはタスクを分解して実装する
- エラーをもとに修正を繰り返す
- テストを通すところまでは持っていける
一方で、
システム全体をつないで動かす部分は別の難しさがある
ということが分かりました。
次回は、Claudeに原因の調査と修正をお願いしてどうなるかみてみたいと思います。
