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
790
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
TSKaigi2024で登壇したスライドです。
16:40 ~ 17:10 トラック2 LT
nyawach
May 11, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
220
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Improving my own Ruby thereafter
sisshiki1969
1
160
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
個人軟體時代
ethanhuang13
0
330
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Why Our Code Smells
bkeepers
PRO
339
57k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
4 Signs Your Business is Dying
shpigford
184
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
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 ありがとうございました!