2023/07/21 に公開1890 views
@potato4d が @kazushikonosu と @odiak に、 ts-morph を利用した社内ツールの開発とその所感について話を聞いてみました。
ts-morph とは？
https://github.com/dsherret/ts-morph
- TypeScript Compiler API のラッパー
- 基本的には Compiler API より簡単に扱える
- ラップした使いやすい構文
- 探索など特定要素に特化した追加拡張
- より細かな設定をしたいとき用の Compiler API へのアクセス
開発効率化ツールの自作について
ts-remove-unused(by konosu)
- 参照されていないexportを検出してexportキーワードを取り除いた上で、使用されていない定義を削除するツール
- tscは使用されていない変数や関数があるとエラーとして検知してくれるものの、exportされていると参照している箇所がなくてもエラーとして検知することができない
- あるファイルのexportのすべてがどこでも参照されていない場合にはファイルごと削除する
- 課題感
- UIライブラリのリプレイス作業にあたって、コンポーネントなどのexportがどこで参照されているか把握するのに時間がかかり、リファクタリング（おもに削除）の障壁になっていた
- ts-prune（UIT INSIDEでも取り上げた）はメンテナンスフェーズにあり、かつ列挙してくれるだけで削除まではしてくれない
- 100%リファクタリングの自動化できなくても90%ぐらい自動化してCLIが対応しきれないケースはPRで修正すればリファクタリングが将来に渡って捗りそうといモチベーション
- Reactのコンポーネントやhookが主で副作用がないという背景もあってファイルの削除というアグレッシブな機能を取り入れやすかったかも？
route-analyzer(by kaido)
- SPA プロジェクトにおいて、プロジェクトがもつ画面とそのパスの一覧を可視化するツール
- プルリクエストやブランチ単位で、どの画面に影響がありそうかを解析したいというモチベーションで開発
- 欲言えば、出力結果などを加工して、エンジニア以外のメンバーにも役立てたい
- 実装した機能
- ソースコードからreact-router(v5)のルーティング定義を解析する
- エントリーポイントとなるファイルから、ASTから参照関係をたどって解析する
- (TSCにもある) Symbolというオブジェクトを使うと、参照している箇所から定義の箇所を調べることができる
- template literalなどで定義されたルートも、TSの型情報を使用して解析した
- 例えば、const e: ‘foo‘ | ‘bar’; const path =
items/${e}というようなコードから、items/fooとitems/barという2つのパスが得られる
- エントリーポイントとなるファイルから、ASTから参照関係をたどって解析する
- ルートごとに依存しているコンポーネント類の情報を解析する
- 同じようにASTから参照をたどっていく
- ソースコードからreact-router(v5)のルーティング定義を解析する
副次的に得られたもの
- ts-morph に contribute する機会