Codexでサブエージェントが使えるようになったのでフロントエンドを中心に整備した
先日Codexがサブエージェントに対応した。
以前まではClaude Codeを使っていたのだけど、最近は仕事の兼ね合いでCodexに乗り換えていてこちらを掘っている。
Claude Codeを使っていた頃はサブエージェントをいくつか整備していて、乗り換えてた後はサブエージェントが欲しいなと思っていた。
Codexもプランモードに対応し、実装計画を壁打ちしてから実装させることで成果物のクオリティがある程度高い状態を作ることができるようになってきたのを感じる。一方、並列作業もある程度できるけれど時間がかかったり、成果物も一部のクオリティが低かったりラリーが多くなるのが気になっている。
この辺りをサブエージェントを用いることで、自動で多角的にチェックできたり、調査・分析のターンにクオリティをある程度保ちながら並列で進められるようになり時間の圧縮ができるのではないかと考えている。
今回作ってみたサブエージェントは、以下のリポジトリに置いている。
デザイン・実装前整理系
大抵Figmaがあってそれを元に実装するので、Figmaからの情報抽出を行った後実装するまでの効率やコードの状態をよくすることを目的にしている。
- Design Analyst
- Component Scout
- Visual QA Analyst
Design Analystにデザインを取得してもらい、Component Scoutで既存コンポーネントを探索するようにしている。
Design Analystには、取得したデータの理解とメインのエージェントにある程度フォーマットを決めてメインのエージェントに情報を渡せるようになると思うので、クオリティのブレが減ったり効率的に作業が進められるのではと思っている。
また、コンポーネントのリストを出すことにしているので、Component Scoutによる探索につなぎやすくなり、既存コンポーネントを使い回しながらの開発ができる想定。既存コンポーネントを使わず実装したりするのでこの辺りを回避できると良いなと思う。
更に、Visual QA Analystというエージェントも用意した。
Codex+Figma MCPを使っての実装は体感8, 9割の再現度という印象。Chrome Devtool MCPやPlaywrightを使ってブラウザを使ったチェックをさせるとそこからの修正も早い。この辺りのチェック・修正もサブエージェントに任せられるとある程度手放しで作業させることができるのではないかと思っている。
テスト系
テストの実装は進めているのだけど、依頼すると割と愚直に実装することが多い。
結果としてテストが無駄に膨らんだり、効率の悪いものになったりする印象。AIで実装が早くなるもののチェックに時間がかかる状態になってしまっては全体が遅くなって勿体ないなと思う。
なので、以下のエージェントで計画を立てたりリファクタする体制を取れると良いのではないかと思っている。
- Frontend Test Planner
- Frontend Test Maintainer
- Frontend Test Refactorer
MaintainerとRefactorのすみわけが微妙なのだけど、MaintainerがPlannerの内容を元に実装を進めていくイメージ。そのうえでやりにくさを感じたらアラートをあげ、Refactorerが改善方法を検討するような流れの想定。
Plannerにちゃんとやらせるというのも手だとは思うんだけど、ここを熟考させると時間がかかると思うので速度重視でこういう体制を取ってみている。
天望
実際これでどうなのかは少し試してみる予定。1エージェントですべてやる方が早かったりトークン効率もいいという説も捨てきれないけれど、まずはやってみようという話。
試してみて実際どうなのかはまた書いてみようと思う。