AI、コード、人間の協業による大規模JSファイルのリファクタリング体験

（朝起きて見直したら元の文章にフォーマットの誤りがあり、しかも長すぎたので要約版として再投稿します）

ChatGPT初心者が「複雑な問題」をChatGPTと一緒に解こうとするとき、よく3つの失敗をしているのを見てきた

1. ChatGPTが**「正解を」**一発でくれると期待する
2. ChatGPTが正解を**「一発で」**くれると期待する
3. その期待がなかなか満たされず失望し、ChatGPTを単純な問題にしか使わなくなるか、受け身でしか使わなくなるか、あるいは使うのをやめてしまう

その結果、AIによる生産性向上の機会を数多く逃してしまう

これは数か月前までの自分の姿でもあった

• アプリの初期読み込みが遅かったのでバンドルサイズを分析したところ、非常に巨大なJSファイルが見つかった。18,500行あるこのファイルの大半を削除できることが分かった
• 最初は目で見ながら手作業で削除していたが、退屈すぎるうえにミスも多かった
• ChatGPTで作業を開始。進めるうちに、自分も初心者のように「正解を一発で」くれることを期待して作業していたと気づいた
• それを認識してから「三者協業戦略」を使い、非常に大きな進展を素早く経験した

作業の経過

代わりにリファクタリングして

• 関数を1つ渡し、望むやり方を説明してリファクタリングしてほしいと頼んだ → 失敗。コンパイルすら通らなかった
• コード構造を理解して変更するのではなく、1行ずつ下へ進みながら削除する方式だった

リファクタリングするコードを書いて

• 直接やるのではなく、JSでリファクタリングするコードを求めた → 失敗。これもまた1行ずつ下へ進みながら削除する方式だった
• 考えてみると、こうした大規模リファクタリングはChatGPTが十分に学習していない可能性がある

ASTでリファクタリングするコードを書いて

• 自分は1行ずつではなくブロック単位で消したかった。つまりコードの文法的理解が必要だったので、ASTを使うのがよいと考えた
• ChatGPTにESLint開発経験のあるエンジニアという役割を与え、ASTを使って書いてほしいと頼んだところ、見事なbabelベースのボイラープレートが出てきた。大きな進展
• babelの経験がなかったため、ChatGPTと一緒に学びながらロジックを追加していったが、結局は難所にぶつかった。複雑なロジックを扱うのが難しかった

ASTで自分はこうやってみた。この部分がうまくいかないんだけど、君ならどうやる？

• また自分が正解を一発で得ようとしていたことに気づき、戦略を修正。traverseを1回しか回してはいけないわけではないと考えたら、するすると解けた
• まず簡単に走らせて結果を見ながらロジックを積み上げていく方式で、素早く進められた
• 部分的にうまくいかないところは、その特定の目的をどう実装するかをChatGPTに尋ねながら進めた
• 最後に、ルール化しにくい部分は目と手で仕上げた。この時点ではコード量が大幅に減っていたので可能だった

結果

• 18,500行のコードが1,335行になり、メインチャンクのバンドルサイズは約7.8%減少
• 初期読み込みに必要なJSファイルのサイズとロジックが減り、初期読み込み速度がわずかに向上
• 長く複雑なレガシーコードをASTでリファクタリングした経験と自信を得た
• ほとんどの複雑な問題は、AI + コード + 人間という三者協業を通じて効果的に解決できるという自信を得た

AIと一緒に複雑な問題を効果的に解くためのメンタルモデル

1. AIが得意なこと、コードが得意なこと、人間が得意なことが何かを理解する。
2. 自分が解こうとしている問題を分析し、AI／コード／人間が得意な領域を切り分ける。
3. AIが最初のコードをうまく作れるよう支援し、そのコードを小さく実行してみながらAIと一緒に改善し、途中や最後に人間のほうがやりやすいことは自分で直接やる。

[agart319]

興味深く読みました。

[moderator]

重複した投稿を削除しました。