1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIエージェントがTypeScriptコードを安全にリファクタリングできる ts-refine rename/move

1
Posted at

現代の人類が TypeScript をコーディング・リファクタリングするときは、IDE の提供する Language Service 等の支援機能によって、安全に関数名などを変更したり、気軽にファイルを移動できるようになっています。しかし、現時点の Claude Code や Codex など AI エージェントが同じ操作をするときは、grep して変更対象を探していて、更新漏れを起こすこともしばしば発生します。AI の作業手順は、20世紀の人類レベルに退化していると言えます。

そこで、人間が IDE で操作するのと近いレベルの操作を、AI にも実行できるように、TypeScript 向けの ts-refine を実装してみました。CLI を扱える AI なら、ts-refine を使うことで、export している関数や変数、classinterface 等の名前の変更や、ファイルの移動も安全に操作できるようになります。

インストールしても使えますが、手軽に試す場合は、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 typenamespace 配下や 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 程度の軽量なプログラムになっています。

moverename 等で書き換えたファイルは、それぞれ自動的に organizeImports が走るので、import 文の並び順や、各要素の並び順は、自動的に整います。名前の変更やファイルの移動と、スタイル調整が別コミットに分散して読みづらくならない(人間がレビューしやすい)ようになっています。

なお、この編集時も、できるだけ既存のコーディングスタイルを遵守・維持するので、ほとんどの場合でスタイルが崩れません。コーディングスタイルは自動判定するため、.prettierrceslint.config.js のような設定ファイルの準備は、不要です。

(そのほかの機能)

今回、紹介した listmoverename サブコマンドの他に、importsformat サブコマンドなども用意しています。詳しくは help または README.md を参照してください。

(例7)そのほかの使い方

npx ts-refine help

(まとめ)

人類にとっては、IDE の進化によって便利にできるようになった作業を、AI も安全に利用できるようにする ts-refine のご紹介でした。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?