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

AIが書き散らかしたコードの確認を楽にしよ！
武井 勇也 / Yuya Takei

Transcript

1. TypeScript AST を活用した 設計差分抽出の紹介 AIが書き散らかしたコードの確認を楽にしよ！ 武井 勇也 / Yuya Takei 株式会社 CHILLNN @TSKaigi Hokuriku 2025.11.23
2. タケイ (X : @takewell_) です TypeScript で SaaSの開発しています フロントエンド、バックエンド、インフラ (AWS CDK) など
3. Agentic Coding で コード量 爆増させてますか？ 「できました...!」 「有能！でもレビューが大変だ！」
4. レビューが楽ではない 原因ってなんでだろ 「私レビューもしますよ....！」 「とはいえ自分で理解したい！」 理解が難しい = 情報量 構造の複雑さ
5. なぜ構造が複雑に？ レイヤーが多い いろいろな依存が絡む こういう場合コードからは掴みづらい レイヤーと依存の変更差分を 抽象化した図を作れば楽になるのでは
6. こんな感じの図をつくりたい
7. こんな感じの図をつくりたい
8. 変更差分の文字列 から 図を描画したい ソースコードの文字列から 意味を抽出するために便利な AST (抽象構文木) というのがあります
9. 文字列 AST AST を扱うには ts-morph というライブラリが便利です
10. ローカルや CI で実行できる CLI を実装して図を描画します
11. 依存関係図 (import から抽出) イメージです。依存関係がわかります
12. シーケンス図 (call から抽出) イメージです。実行順序がわかります
13. 図の効用 diff を読む前に図を見ることで、その後のリーディングの時短になる 変更ファイル数が多いと図が見づらくなる(変更の粒度はほどほどに) チームで議論するときにも使える 理解の補助になる Linter, Test と併用して活用するとレビュー速度があがりそう
14. ARIGATO !! より詳しいことを知りたい方は 懇親会などでお声掛けください！ 所属企業CHILLNNでは宿泊施設向けの SaaS と ホテル予約サイト SOMEWARE(smwr.jp)を提供しています何卒