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
770
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
TSKaigi2024で登壇したスライドです。
16:40 ~ 17:10 トラック2 LT
nyawach
May 11, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Goで作る、開発・CI環境
sin392
0
230
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
ふつうの技術スタックでアート作品を作ってみる
akira888
1
840
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
効率的な開発手段として VRTを活用する
ishkawa
0
140
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
130
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Done Done
chrislema
184
16k
Being A Developer After 40
akosma
90
590k
Embracing the Ebb and Flow
colly
86
4.7k
Producing Creativity
orderedlist
PRO
346
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Music & Morning Musume
bryan
46
6.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Git: the NoSQL Database
bkeepers
PRO
430
65k
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 ありがとうございました!