前回の記事では、AIにフロントエンドのUI実装をさせてみました。
結果として、UI自体は問題なく立ち上がり、コンポーネント単位のテストもすべて通る状態まで持っていくことができました。
ただし、一番重要な部分である
「株価データが表示されない」
という問題が残りました。
実際の状態としては、
- 画面は表示される
- 入力もできる
- チャートの枠もある
しかし、株価が表示されませんでした。
前回の考察
この状態を整理すると、
- フロントエンドの部品は作れている
- テストも通っている
- しかし実際のデータが流れていない
という状況でした。
そのため、フロントとバックエンドをつなぐ部分に問題がありそうでした。
AIでデバックさせる
自分でデバッグするのではなく、
AIに原因特定から修正までやらせてみる
という形で進めます。
このブログのコンセプト通り、「AIにやらせたらどうなるのか」をそのまま試していきます。
AIへの指示
曖昧すぎる指示だと、AIがなにを直せばいいのかわからないので
「エラーを直して」
といった投げ方はしません。
以下の情報は、今までのやり取りでコンテキストに含まれています。
- エラーメッセージ
- 該当コード
- フロントとバックエンドの構成
- APIの仕様
- 本来どう動くべきか
そのため、指示としては、
- どの操作でエラーが発生するのか
- そのときの画面やデータの状態
- 実際に何が起きているのか
を伝えるように指示を出すことが重要です。
1回目の修正
具体的に指示を出すのは大事です。
しかし、まずは指示をシンプルにして、AIが自ら原因を発見できるかを試しました。
株価が表示されなかったです。原因を調査してください
AIはまず、システム全体を確認し、
- APIサーバーの状態
- エンドポイントの動作
を検証しました。
出力結果
原因: FastAPIサーバーが起動していませんでした。APIへのリクエストが全て失敗し、エラー状態になっていました。
解決策: Makefileに起動コマンドを追加しました。今後は以下のコマンドで両サーバーを同時起動できます。
うーん、これは私がFast APIサーバーを起動するのを忘れたのが原因と言われてしまったみたいです。
結果
再度、試してみましたが、やはりまだUIは表示されませんでした。
Fast APIサーバーの起動が原因と言われた時は、ドキッとしましたが、やはり原因は違うところにありそうです。
2回目の修正
次は、もう少し具体的に指示をしてみます。
まだ表示されませんでした。FastAPIサーバーは起動していそうです。 コードをいれて、検索すると株価は取得できていそうですが、画面が切り替わるような動作をして、コードを入力する欄や検索ボタンもなにも表示されない画面になります。
出力結果
原因は以下と判断しました。
原因が判明しました。
lightweight-chartsv5 でAPIが破壊的変更されています。
chart.addCandlestickSeries()とchart.addHistogramSeries()が v5 では削除され、v5の型定義にも存在しません。これらを呼び出すとTypeErrorが発生し、React のエラーバウンダリがないため画面全体が消えます。v5の正しいAPIは:
chart.addSeries(candlestickSeries, options)chart.addSeries(histogramSeries, options)
修正は以下を実施してくれたとのことです。
修正内容:
lightweight-chartsv5 ではaddCandlestickSeries()/addHistogramSeries()が削除され、addSeries(definition, options)に統一されました。この API 不一致がTypeErrorを引き起こし、React がエラーバウンダリなしにクラッシュして画面全体が消えていました。
make api+make webで起動後、再度7203で検索するとチャートが表示されるはずです。
結果
今度は、UIにアクセスしたら、画面が白色でなにも表示されなくなってしまいました。
修正を実施した結果、なにかしらの影響を及ぼしていますが、まだ別の原因が存在していそうです。
この辺で、本当に修正できるのかと不安になってきました。
3回目の修正
次の指示は
次は、サーバーにアクセスすると画面が白色でなにも表示されなくなってしましました。
としました。
出力結果
次の原因は、以下みたいです。
原因判明です。
candlestickSeries（小文字）は export されておらず、実際のエクスポート名はCandlestickSeries・HistogramSeries（大文字）です。undefinedをaddSeriesに渡してクラッシュしています。テストはモックのため通過しましたが、ブラウザでは
TypeErrorが発生し画面が白くなります。
上記の原因をもとに、修正を実施してくれました。
4回目の修正
次に、より具体的に指示を出してあげることにしました。
だめです。白い画面が表示されることはなくありましたが、まだ株価が表示されません。 検索ボタンを押したら、砂時計の考えているマークがでて、その後クラッシュしたかのようになにも表示されない画面になります。まずは、網羅的に原因を考えてください。
原因を調査してくれ、複数の原因を候補を出してくれました。
具体的にどのようなエラーが発生しているのかや、網羅的に原因を考えてといった指示が有効に働いていそうです。
原因①：シリーズ名の誤り
- candlestickSeries（小文字）を使用
- 正しくは CandlestickSeries（大文字）
undefinedが渡されてクラッシュ
原因②：描画タイミングの問題
- 初期レンダリング時にwidthが0になる可能性
- v5ではこれが問題になる
原因③：エラーハンドリング不足
- ReactにError Boundaryがない
- エラー時に画面全体が消える
修正内容
- 正しいSeries名に修正
- autoSize: true を使用してサイズ問題を回避
- Error Boundaryを追加
結果
最終的に、株価が表示されるようになりました。
やはり、具体的な指示が重要ですね。
最初から具体的に指示をしていたら、こんなに修正回数は必要なかったかもしれません。
AIでのエラー調査の有効性
前回、「フロントとバックエンドの接続部分」が問題だろうと記載させてもらいました。
内容としては正しかったですが、
一方で、コードの中身まで見ていないから当たり前ですが
具体的にどこがズレているかまではわからない
という状態でした。
今回、AIに修正させることで、
原因が「抽象」から「具体」に落とし込むことができましたし、解決までやってくれました。
やってみてわかったこと
何度か修正ループを回す必要がある
AIは一発で完璧な答えを出すわけではありません。
今回も4回の修正を経て、最終的に正しい状態にたどり着きました。
一発で直すのではなく、繰り返し改善する前提で使う必要があります。
AIは“優秀な実装者”
指示がしっかりしていれば、AIは試行錯誤しながら最終的に解決まで持っていきます。
今回も、
人間がコードを書かずに
AIが実装と修正を回して解決
することができました。
指示の質が精度を決める
AIは優秀な実装者ですが、
指示の質がそのまま結果に直結します
- 曖昧な指示 → 推測でズレる
- 具体的な指示 → 正確に修正できる
重要なのは、
「どうAIに指示を出すかを学ぶこと」
だと感じました。
指示の仕方に応じて修正回数は劇的に減らすことはできます。
エラーを具体的に教えてあげる、網羅的に調査してもらうということが重要です。
まとめ
- 前回の仮説は正しかった
- ただし抽象的だった
- AIによって具体的な原因まで特定できた
そして今回の一番のポイントは、
AIだけでエラー修正を完結できたこと
ただしそれは、修正ループを回した結果です。
UIが動いたので、次は
- 銘柄入力からの分析
このあたりを進めていきます。
