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
800
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
TSKaigi2024で登壇したスライドです。
16:40 ~ 17:10 トラック2 LT
nyawach
May 11, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
200
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
240
Advance Your Career with Open Source
ivargrimstad
0
390
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
210
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
210
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
130
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.1k
Serena MCPのすすめ
wadakatu
4
920
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
650
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
960
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
120
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.7k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Being A Developer After 40
akosma
91
590k
Visualization
eitanlees
148
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Speed Design
sergeychernyshev
32
1.1k
Documentation Writing (for coders)
carmenintech
75
5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Rails Girls Zürich Keynote
gr2m
95
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Bash Introduction
62gerente
615
210k
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 ありがとうございました!