現代の人類が TypeScript をコーディング・リファクタリングするときは、IDE の提供する Language Service 等の支援機能によって、安全に関数名などを変更したり、気軽にファイルを移動できるようになっています。しかし、現時点の Claude Code や Codex など AI エージェントが同じ操作をするときは、grep して変更対象を探していて、更新漏れを起こすこともしばしば発生します。AI の作業手順は、20世紀の人類レベルに退化していると言えます。
そこで、人間が IDE で操作するのと近いレベルの操作を、AI にも実行できるように、TypeScript 向けの ts-refine を実装してみました。CLI を扱える AI なら、ts-refine を使うことで、export している関数や変数、class、interface 等の名前の変更や、ファイルの移動も安全に操作できるようになります。
インストールしても使えますが、手軽に試す場合は、npx 経由なら手動インストール不要で使えます。
AI エージェントへの新規スキルのインストールなどは不要で、この Qiita 記事の URL を案内すれば、あとは必要に応じて使ってくれるでしょう。
(関連ファイルの一覧表示)
汎用的な名前のメソッド・プロパティだと、grep では探しにくいことがあります。
ts-refine list なら(IDE と同レベルに)対象をピンポイントに探すことができます。
(例1)関数 funcA を使っているファイルの一覧表示
npx ts-refine list --ref funcA
(例2)関数名に限らず、namespace 配下や interface 配下のプロパティやメソッドも同様に探せます。
npx ts-refine list --ref nsA.funcB
npx ts-refine list --ref typeA.propB
npx ts-refine list --ref nsA.typeB.propC
(ファイル名の変更)
AI がコードを書いてくれたはいいが、大量のファイルを1ディレクトリに並べてしまって、用途別に整理して欲しいこと、ありますよね?
素直に AI にリファクタリングさせると、相当なトークンを消費してしまうところ、ts-refine move を使うことでトークンを節約しながら、安全にリファクタリングできます。
(例3).ts のファイル名を変更する。
npx ts-refine move src/old/util.ts src/lib/util.ts
(例4)複数の .ts のファイルをまとめて移動する。
npx ts-refine move src/a.ts src/b.ts src/lib/
参照先の import 文も追随して自動的に変わります。
(関数名・変数名などの変更)
AI が関数名やプロパティ名を考えてくれたんだけど、どうにも近視眼的で、眼の前の課題だけを考慮した名前を付けてしまうこと、ありますよね?
プロダクトの性能には影響しないんだけど、人類がコードを読んでいる間は直しておきたい、そういうリファクタリングも1行で済みます。
(例5)export している関数名を変更する。
npx ts-refine rename --from funcA --to funcB
(例6)関数名に限らず、export const の変数名や export type、namespace 配下や interface 配下のプロパティやメソッドも同様に名前を変更できます。
npx ts-refine rename --from nsA.funcB --to nsA.funcC
npx ts-refine rename --from typeA.propB --to typeA.propC
npx ts-refine rename --from nsA.typeB.propC --to nsA.typeB.propD
参照先の import 文も追随して自動的に変わります。
なお、書き換わるのは定義自体とその参照のみです。コメント中やテキスト中の文字列は書き換わりませんから、grep は引き続き必要です。しかし、関連ファイルの書き換え漏れや、相対パスの書き換え間違えなどは防げます。
(スタイルの自動調整)
この ts-refine の内部実装としては、TypeScript Language Service API を利用しています。独自の AST を組まないために、圧縮で 70KB、非圧縮で 270KB 程度の軽量なプログラムになっています。
move・rename 等で書き換えたファイルは、それぞれ自動的に organizeImports が走るので、import 文の並び順や、各要素の並び順は、自動的に整います。名前の変更やファイルの移動と、スタイル調整が別コミットに分散して読みづらくならない(人間がレビューしやすい)ようになっています。
なお、この編集時も、できるだけ既存のコーディングスタイルを遵守・維持するので、ほとんどの場合でスタイルが崩れません。コーディングスタイルは自動判定するため、.prettierrc や eslint.config.js のような設定ファイルの準備は、不要です。
(そのほかの機能)
今回、紹介した list・move・rename サブコマンドの他に、imports・format サブコマンドなども用意しています。詳しくは help または README.md を参照してください。
(例7)そのほかの使い方
npx ts-refine help
(まとめ)
人類にとっては、IDE の進化によって便利にできるようになった作業を、AI も安全に利用できるようにする ts-refine のご紹介でした。