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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

t 姫野佑介株式会社マネーフォワード Pay事業本部フロントエンドエンジニア福岡在住 X：ひめ（@_hyme_）

Slide 3

Slide 3 text

t 突然ですが、

Slide 4

Slide 4 text

t ASTってご存知でしょうか 🤔

Slide 5

Slide 5 text

t では、ASTを利用したコードを書いたことは？ 🤔

Slide 6

Slide 6 text

t 書いたことがなかった 🫠

Slide 7

Slide 7 text

t いつ使ったか 🕰️

Slide 8

Slide 8 text

t コンポーネントライブラリのリプレイス 💪

Slide 9

Slide 9 text

t @moneyforward/cloud-react-ui 2つのプロダクトで利用パブリックなコンポーネントライブラリ群

Slide 10

Slide 10 text

t @moneyforward/cloud-react-ui さまざまな理由でリプレイス中 LTで話すには時間がない

Slide 11

Slide 11 text

t どうリプレイスするか段階的に置き換えている・ページごと、申請フローごと、など　・影響範囲や他開発との兼ね合い →新旧コンポーネントが混在

Slide 12

Slide 12 text

t e.g. Buttonコンポーネント 174個のファイル... どうリプレイスするか

Slide 13

Slide 13 text

t e.g. Buttonコンポーネント VSCodeの参照数が（なぜか）表示されないものがある export { Button } では参照数が表示されない？教えて詳しい人どうリプレイスするか

Slide 14

Slide 14 text

t このコンポーネント全部置き換えたんだっけ... 😅 リプレイス中の課題

Slide 15

Slide 15 text

t リプレイス中の課題 →リプレイス前のコンポーネントを　使っているファイルが残っていないか　リストアップしたい

Slide 16

Slide 16 text

t ts-morph (+α) との出会い

Slide 17

Slide 17 text

tt ts-morph ・TypeScript Compiler APIのラッパー・TypeScriptやJavaScriptのコードをより簡単に操作できる ts-morph/packages/ts-morph at latest

Slide 18

Slide 18 text

tt ts-morph.com ・ts-morph のドキュメンテーション・どう使うかを知るのに便利（Manipulation / Details あたり） https://ts-morph.com/

Slide 19

Slide 19 text

tt TypeScript AST Viewer TypeScript ASTを視覚的に確認できる https://ts-ast-viewer.com/

Slide 20

Slide 20 text

t これらを元に実装 🚀

Slide 21

Slide 21 text

t tsconfig.jsonを読み込む

Slide 22

Slide 22 text

t 対象のファイルをglobで取得

Slide 23

Slide 23 text

t ライブラリを利用しているかその中のButtonを exportしているか対象をリストアップ

Slide 24

Slide 24 text

t ログ出力 🎉

Slide 25

Slide 25 text

t 数十行で書けた 🙌

Slide 26

Slide 26 text

t ちょうど置き換えてた Tableで確認... 👀

Slide 27

Slide 27 text

t ちょっと残ってた 😇

Slide 28

Slide 28 text

t 今後・import する元のパスを一括変換　・今回は対応していない　　・引数の変更追従やLinter/型チェックの確認が必要　　・ｼｭｯとは厳しいと判断・ts-morph以外の選択肢　・ast-grep, TS Compiler API, ...etc.

Slide 29

Slide 29 text

t まとめ・小さなところでもASTは利用できる　今回はリプレイスの抜け漏れチェックに使った・小さな改善からつかってみると案外簡単なこともある　今後使うハードルが下がる・ts-morphと周辺ドキュメントは試行錯誤に便利