Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
Search
nyawach
May 11, 2024
Programming
5
690
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
TSKaigi2024で登壇したスライドです。
16:40 ~ 17:10 トラック2 LT
nyawach
May 11, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
190
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
290
読まないコードリーディング術
hisaju
1
140
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
130
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
130
PromptyによるAI開発入門
ymd65536
1
130
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
2
290
⚪⚪の⚪⚪をSwiftUIで再現す る
u503
0
140
Datadog Workflow Automation で圧倒的価値提供
showwin
1
330
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
390
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
140
AIプログラミング雑キャッチアップ
yuheinakasaka
21
5.4k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
429
65k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
BBQ
matthewcrist
87
9.5k
Code Review Best Practice
trishagee
67
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Faster Mobile Websites
deanohume
306
31k
GitHub's CSS Performance
jonrohan
1030
460k
Statistics for Hackers
jakevdp
797
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Transcript
t ts-morphを使って コードリプレイスと ASTへのハードルを下げる! TSKaigi 2024 @_hyme_
t 姫野 佑介 株式会社マネーフォワード Pay事業本部 フロントエンドエンジニア 福岡在住 X:ひめ (@_hyme_)
t 突然ですが、
t ASTってご存知でしょうか 🤔
t では、ASTを利用した コードを書いたことは? 🤔
t 書いたことがなかった 🫠
t いつ使ったか 🕰️
t コンポーネントライブラリの リプレイス 💪
t @moneyforward/cloud-react-ui 2つのプロダクトで利用 パブリックなコンポーネントライブラリ群
t @moneyforward/cloud-react-ui さまざまな理由でリプレイス中 LTで話すには時間がない
t どうリプレイスするか 段階的に置き換えている ・ページごと、申請フローごと、など ・影響範囲や他開発との兼ね合い →新旧コンポーネントが混在
t e.g. Buttonコンポーネント 174個のファイル... どうリプレイスするか
t e.g. Buttonコンポーネント VSCodeの参照数が (なぜか)表示されないものがある export { Button } では参照数が表示されない?
教えて詳しい人 どうリプレイスするか
t このコンポーネント 全部置き換えたんだっけ... 😅 リプレイス中の課題
t リプレイス中の課題 →リプレイス前のコンポーネントを 使っているファイルが残っていないか リストアップしたい
t ts-morph (+α) との出会い
tt ts-morph ・TypeScript Compiler APIのラッパー ・TypeScriptやJavaScriptのコードをより簡単に操作できる ts-morph/packages/ts-morph at latest
tt ts-morph.com ・ts-morph のドキュメンテーション ・どう使うかを知るのに便利(Manipulation / Details あたり) https://ts-morph.com/
tt TypeScript AST Viewer TypeScript ASTを 視覚的に確認できる https://ts-ast-viewer.com/
t これらを元に実装 🚀
t tsconfig.jsonを読み込む
t 対象のファイルをglobで取得
t ライブラリを利用しているか その中のButtonを exportしているか 対象をリストアップ
t ログ出力 🎉
t 数十行で書けた 🙌
t ちょうど置き換えてた Tableで確認... 👀
t ちょっと残ってた 😇
t 今後 ・import する元のパスを一括変換 ・今回は対応していない ・引数の変更追従やLinter/型チェックの確認が必要 ・シュッとは厳しいと判断 ・ts-morph以外の選択肢 ・ast-grep, TS
Compiler API, ...etc.
t まとめ ・小さなところでもASTは利用できる 今回はリプレイスの抜け漏れチェックに使った ・小さな改善からつかってみると案外簡単なこともある 今後使うハードルが下がる ・ts-morphと周辺ドキュメントは試行錯誤に便利
t ts-morphでASTことはじめ どうでしょうか ☺️
t ありがとうございました!