最近Codex CLIも盛り上がってきたので、同じプロンプトを投げてどっちがいいか検証していく

Notion的な編集可能なサイドバーを作らせる

docusaurusuのコレを編集可能にするプラグインをつくりたい。

プロンプト

@src/theme/DocSidebar/Desktop/EditableSidebar.tsx
ここに実装を追加したいです。具体的には、github側のファイルシステムを参照し、現在のディレクトリ構造を編集できるようにしたいです。編集自体も、ディレクトリとファイルに分かれ、ファイルの追加、削除、移動ができるようにしてください。ultrathinkしてください。  

Claude

特に指示していないが、ログイン要求をしてきた。
まだこのフェーズに入りたいわけではなかったのだが、いずれやることだったのでよしとする。

肝心な実装についてはできていなかった。
ファイルがあるはずなのに無いと言ったり、サイドバーのどこを選択するかで表示するディレクトリを換えているように見えた。
スタイリングはされていた。

メインとなるEditableSidebar.tsxは+300行位していたので良い設計とは言えないが、それでも適切な場所に適切な処理を書いているように見えた。

Codex

Claudeとは違い、意図したものが出してきた。
ただスタイリングはしていない模様。

また、全ての処理を1ファイルに書いてきた。
意図通りの実装はできたものの、設計観点ではダメだった。

総評

意図したコードを書く分、codexの方が良いように思う。
特にAI主体のコーディングでは意図した処理を機能を追加するのに手間がかかるので、いったん機能ができればあとはファイル分割させてリファクタさせればすむ。

最初からスタイリングをしていないのも、そこまでマイナスではない。後からどうとでもうなる。

最初から意図した機能ができているという観点で、今回の勝負はcodexの勝利とする。

編集システムの統合

現在サイドバーと単一ファイルの編集が別管理なので、統合して管理するようにしたい。

プロンプト

プロンプト1 関連ファイルの探索

@src/theme/DocSidebar/Desktop/EditableSidebar/ 　@src/components/InlineEditor/ 関連のファイルを読み込んでください。

プロンプト2 実際の作業依頼

ありがとうございます。現在、これら2つのシステムは編集のステートが別々で管理されており、これは適切な状態とは言えません。
正しくは、一つのファイルシステムの状態を保持し、一つのファイルシステムとして管理すべきです。その統合のため、一つの状態コンテキストを作成してください。そして、サイドバーで選択したファイルを編集できるようにしてください。
また、多数のファイル内の変更、ファイルの移動、削除、追加を管理してください。また、このファイルの移動、追加、削除を行った歳は、サイドバー荷もその更新が適用されるようにしてください。

つまり、現在はDraftのデータと実施の編集UIコンポーネントは近い関係にありました。これを切り離し、編集UIは特定のインメモリファイルシステムが渡され、それを表示、編集するだけの機能にしてください。そして、セーブボタンを押したときに、そのインメモリファイルシステムをPRとして作成するようにしてください。

スタイリングは行わないでください。スタイリングは後からできます。現在はtsx、tsファイルの編集に集中し、まずはロジックを作り上げてください。

Claude

実装をぶち壊して何もできなくしました。
実装量はそこそこ

まぁ一発でうまくいくものができるとは思ってないので修正させる

修正させた後
ぱっと見動くように見えるが、ファイルを選択しても表示が変更されなかったり、割りとバグがあるように見える。
いろいろバグを直すか、また作り直すか。とりあえずこのままでは無理そうではある。
まぁこんなものだろうか。

Codex

一発出使えるものが出てきた。
多少うまくいかなかったり、エラー出たりするバグはあれど、基本動作は完璧に動いている。
素晴らしい。正直びびり散らかした。
Claudeもできなかったし、規模も大きめの変更だから厳しいかなぁ〜とかおもってたけど、ほぼ完璧にこなした。

総評

Cluadeが動作確認しながら実装してもうまくいかなかったものを、codexは一発で動作確認なしで仕上げてきた。
ちょっと格が違うかもしれない。

forkリポジトリの更新

ログインしたユーザーがforkリポジトリだった場合は自動で更新するシステムを組ませる。

ログインするとき、リポジトリがforkだった場合は、リポジトリの更新を実行するようにしてください。

Codex

完璧に動作
問題なし。

Claude

動作しなかった。
コードの品質もcodexの方が良さ鵜に見える。

総評

何回か試したが、圧倒的にcodexの方が実装精度が良かった。
今回試したのはweb開発でしかも一つのリポジトリだけだったので、他の環境でどうなるかは分からないが、少なくともClaudeと張り合えるツールだといえる。
もっとツール自体の改善がされれば、完全に乗り換えてもいいかもしれない。