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
為你自己學 Python - 冷知識篇
eddie
1
220
AHC051解法紹介
eijirou
0
630
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
210
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
520
私の後悔をAWS DMSで解決した話
hiramax
4
150
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
910
🔨 小さなビルドシステムを作る
momeemt
2
560
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
200
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
160
Honoアップデート 2025年夏
yusukebe
1
860
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Documentation Writing (for coders)
carmenintech
73
5k
Music & Morning Musume
bryan
46
6.7k
Balancing Empowerment & Direction
lara
2
590
A Tale of Four Properties
chriscoyier
160
23k
Code Reviewing Like a Champion
maltzj
525
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
RailsConf 2023
tenderlove
30
1.2k
A designer walks into a library…
pauljervisheath
207
24k
Making Projects Easy
brettharned
117
6.3k
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 ありがとうございました!