$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript AST を活用した 設計差分抽出の紹介 / Introduction t...
Search
yuya takei
November 23, 2025
0
120
TypeScript AST を活用した 設計差分抽出の紹介 / Introduction to Design Difference Extraction Using TypeScript ASTあ
AIが書き散らかしたコードの確認を楽にしよ!
武井 勇也 / Yuya Takei
yuya takei
November 23, 2025
Tweet
Share
More Decks by yuya takei
See All by yuya takei
Next.js を選定した ZOZOTOWN のフロントエンドリプレイス、その全体像 / zozotown frontend replacement project
takewell
0
2.8k
ZOZOTOWNリプレイスにおけるWebフロントエンドのこれから / The future of web frontend in ZOZOTOWN replacement
takewell
0
870
コンポーネント化とHeadlessCMSを用いた ECプロモーションの効率化
takewell
0
1.9k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
210
24k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Automating Front-end Workflow
addyosmani
1371
200k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Thoughts on Productivity
jonyablonski
73
4.9k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
It's Worth the Effort
3n
187
29k
How to train your dragon (web standard)
notwaldorf
97
6.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How STYLIGHT went responsive
nonsquared
100
5.9k
Transcript
TypeScript AST を活用した 設計差分抽出の紹介 AIが書き散らかしたコードの確認を楽にしよ! 武井 勇也 / Yuya Takei
株式会社 CHILLNN @TSKaigi Hokuriku 2025.11.23
タケイ (X : @takewell_) です TypeScript で SaaSの開発しています フロントエンド、バックエンド、インフラ (AWS
CDK) など
Agentic Coding で コード量 爆増させてますか? 「できました...!」 「有能!でもレビューが大変だ!」
レビューが楽ではない 原因ってなんでだろ 「私レビューもしますよ....!」 「とはいえ自分で理解したい!」 理解が難しい = 情報量 構造の複雑さ
なぜ構造が複雑に? レイヤーが多い いろいろな依存が絡む こういう場合コードからは掴みづらい レイヤーと依存の変更差分を 抽象化した図を作れば楽になるのでは
こんな感じの図をつくりたい
こんな感じの図をつくりたい
変更差分の文字列 から 図を描画したい ソースコードの文字列から 意味を抽出するために便利な AST (抽象構文木) というのがあります
文字列 AST AST を扱うには ts-morph というライブラリが便利です
ローカルや CI で実行できる CLI を実装して図を描画します
依存関係図 (import から抽出) イメージです。依存関係がわかります
シーケンス図 (call から抽出) イメージです。実行順序がわかります
図の効用 diff を読む前に図を見ることで、その後のリーディングの時短になる 変更ファイル数が多いと図が見づらくなる(変更の粒度はほどほどに) チームで議論するときにも使える 理解の補助になる Linter, Test と併用して活用するとレビュー速度があがりそう
ARIGATO !! より詳しいことを知りたい方は 懇親会などでお声掛けください! 所属企業CHILLNNでは宿泊施設向けの SaaS と ホテル予約サイト SOMEWARE(smwr.jp)を提供しています何卒