TypeScript AST を活用した設計差分抽出の紹介 / Introduction to Design Difference Extraction Using TypeScript ASTあ

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)を提供しています何卒

yuya takei