前々回、AntigravityのエージェントにReact+Djangoの環境構築してプロジェクトフォルダ切ってもらったところから、今日はReact側Hello Worldと、そのテストコードを作成していきたいと思います。
１．まずはそのまま起動
まずは開発モードで起動して、テンプレートアプリのまま動かしてみます。
。。。おっと、App.jsx。。。
とりあえず動かしてみたけれど、jsxなのが気に入らないので、TypeScriptに変更してもらうことにしました。
AIに任せてザルレビューしかしてなかったことで起きた弊害１件目ですね。
frontendディレクトリを丸々削除して、つくりなおすところからやる、とのこと。
acceptしてやってもらいます。
とりあえず、ここは成功。
２．Hello Worldを出力するだけに変更
完成したそれっぽいアプリを作ることが目的ではないので（自分が思うとおりに動かせるツールとして使えそうかが見極めたい）、App.tsxの中身はいったん白紙にしてもらいます。
だいぶ大胆に削ってきたけれど、逆にいうと、不要なimportを残すことなく消している点を評価してAccept。
３．テストコードを作る
続いて、表示された文字列を検証する簡単なテストコードを作ってもらおうと思います。
懲りずに、最小限の指示で行ってみます。
二回ほどエラー・retryが発生したものの、pakage.jsonを調べ、テスト用ライブラリが入っていないことを確認し、セットアップするところから手順を提示してくれました。
ザルレビューでAccept。
無事にできあがりました。
４．srcに修正を入れる。
App画面のHello WorldをGoodbye Worldに変更してもらう。
App.tsxとApp.test.tsx両方修正したうえで、テストコードまで実行。
最終レポートとして、修正箇所とテスト結果を表示。
これくらいだと自分でやったほうが早いし、毎回毎回テストコードを走らせずにちょっと貯めたいタイミングもあったりする、、、ものの、テストコードもあわせて更新するなどうっかり忘れてイラっとくる作業を任せておけるのは、慣れてくるとありがたいかな。