ts-morphを使ってコードリプレイスとASTへのハードルを下げる！

TSKaigi2024で登壇したスライドです。
16:40 ~ 17:10 トラック2 LT

Transcript

1. t ts-morphを使って コードリプレイスと ASTへのハードルを下げる！ TSKaigi 2024 @_hyme_
2. t 姫野 佑介 株式会社マネーフォワード Pay事業本部 フロントエンドエンジニア 福岡在住 X：ひめ （@_hyme_）
3. t 突然ですが、
4. t ASTってご存知でしょうか 🤔
5. t では、ASTを利用した コードを書いたことは？ 🤔
6. t 書いたことがなかった 🫠
7. t いつ使ったか 🕰️
8. t コンポーネントライブラリの リプレイス 💪
9. t @moneyforward/cloud-react-ui 2つのプロダクトで利用 パブリックなコンポーネントライブラリ群
10. t @moneyforward/cloud-react-ui さまざまな理由でリプレイス中 LTで話すには時間がない
11. t どうリプレイスするか 段階的に置き換えている ・ページごと、申請フローごと、など 　・影響範囲や他開発との兼ね合い →新旧コンポーネントが混在
12. t e.g. Buttonコンポーネント 174個のファイル... どうリプレイスするか
13. t e.g. Buttonコンポーネント VSCodeの参照数が （なぜか）表示されないものがある export { Button } では参照数が表示されない？ 教えて詳しい人 どうリプレイスするか
14. t このコンポーネント 全部置き換えたんだっけ... 😅 リプレイス中の課題
15. t リプレイス中の課題 →リプレイス前のコンポーネントを 　使っているファイルが残っていないか 　リストアップしたい
16. t ts-morph (+α) との出会い
17. tt ts-morph ・TypeScript Compiler APIのラッパー ・TypeScriptやJavaScriptのコードをより簡単に操作できる ts-morph/packages/ts-morph at latest
18. tt ts-morph.com ・ts-morph のドキュメンテーション ・どう使うかを知るのに便利（Manipulation / Details あたり） https://ts-morph.com/
19. tt TypeScript AST Viewer TypeScript ASTを 視覚的に確認できる https://ts-ast-viewer.com/
20. t これらを元に実装 🚀
21. t tsconfig.jsonを読み込む
22. t 対象のファイルをglobで取得
23. t ライブラリを利用しているか その中のButtonを exportしているか 対象をリストアップ
24. t ログ出力 🎉
25. t 数十行で書けた 🙌
26. t ちょうど置き換えてた Tableで確認... 👀
27. t ちょっと残ってた 😇
28. t 今後 ・import する元のパスを一括変換 　・今回は対応していない 　　・引数の変更追従やLinter/型チェックの確認が必要 　　・ｼｭｯとは厳しいと判断 ・ts-morph以外の選択肢 　・ast-grep, TS Compiler API, ...etc.
29. t まとめ ・小さなところでもASTは利用できる 　今回はリプレイスの抜け漏れチェックに使った ・小さな改善からつかってみると案外簡単なこともある 　今後使うハードルが下がる ・ts-morphと周辺ドキュメントは試行錯誤に便利
30. t ts-morphでASTことはじめ どうでしょうか ☺️
31. t ありがとうございました！