Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ts-morphで簡単に始めるAST操作 / ast-manipulation-with-ts...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for aose aose
October 30, 2024
Technology
1.3k
0

ts-morphで簡単に始めるAST操作 / ast-manipulation-with-ts-morph

簡単に始めるシリーズ第二弾として、TypeScriptにおけるASTをあまり知らない方や、まだ触ったことがない方に向けて、簡単にできるASTの操作・ライブラリについてご紹介します。

Avatar for aose

aose

October 30, 2024

More Decks by aose

See All by aose
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
Avatar for aose aoseyuu
4
7.6k
UnJSで簡単に始めるCLIツール開発 / cli-tool-development-with-unjs
Avatar for aose aoseyuu
2
1k

Other Decks in Technology

See All in Technology
個人最適 から 全体最適 へ　AI情報共有会・AIギルド・AI-DLC で進める カンリーの組織展開
Avatar for ふくだ（fukuda ryu） rfdnxbro
0
1k
noUncheckedIndexedAccess、3時間、1万円。 / noUncheckedIndexedAccess, 3 Hours, 10,000 JPY.
Avatar for 株式会社カオナビ kaonavi
1
140
AIを「創る」と「使う」の循環 — HRテックが実践するリアルなAI組織実装
Avatar for Taketo Sasaki taketo957
0
1.1k
トークン数だけでは測れない — Claude Code 組織展開の効果検証から学んだこと
Avatar for Masaki Kubota makikub
0
120
JJUG CCC 2026 Spring　AI時代の開発こそ標準化を武器に！ ― 方式・プロセス・プラットフォームの標準化
Avatar for WatanabeShun s27watanabe
2
690
実装は速くなった、レビューはどうする？ ― 自身のレビューをAIで再現させるサーヴァントエンジニアリングのすゝめ / Implementation got faster. So what about reviews? — An invitation to Servant Engineering: Recreating your own code reviews with AI
Avatar for nrs nrslib
6
3.1k
最低限これだけ押さえれ大丈夫_Claude Enterprise/Team企業展開ガバナンス入門
Avatar for t-kikuchi tkikuchi
1
720
「速く作る」から「正しく作る」へ ─ 生成AI時代の開発フロー改革の ロードマップと実行 ─
Avatar for starfish719 starfish719
0
5.8k
Claude code Orchestra
Avatar for Taisei Ozaki ozakiomumkj
3
920
Java正規表現エンジン（NFA）の仕組みと パフォーマンスを維持するための最適化手法
Avatar for 竹内 雅和 takeuchi_132917
0
180
Mastering Ruby Box
Avatar for Satoshi Tagomori tagomoris
3
140
探して_入れて_作って_使う_Agent_Skills___LT.pdf
Avatar for 松尾淳平 peintangos
2
160

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
480
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
150
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
930
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
160
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
360

Transcript

  1. ts-morphで簡単に始めるAST操作

  2. Speaker 株式会社ヤプリ フロントエンドエンジニア 青木 優弥 / Aose Yuu • 2023/11〜

    ヤプリjoin 来月からヤプリ2年目突入 • Vue Fes ボランティアスタッフ
  3. None
  4. None

  5. ASTとは？

  6. AST ↕ 抽象構文木

  7. 抽象構文木（AST：Abstract Syntax Tree） • プログラムのソースコードを階層的に表現するデータ構造 • ツリー構造で、各ノードがプログラムの構成要素を表す • ノード同士の親子関係＝ソースコードの構造的な関係

  8. None

  9. 󰷺󰷺󰷺󰷺󰷺 󰷺

  10. ASTでできること • コードの解析（Linter, Formetter） • コードの変換・生成 • リファクタリング

  11. ASTでできること • コードの解析（Linter, Formetter） • コードの変換・生成 • リファクタリング 　　　　　　　　　 ⬇

    気合いの正規表現🔥　漢の文字列置換💪　からの卒業󰠈

  12. 󰷺󰷺󰷺󰢄󰷺 󰷺󰷺

  13. ts-morphとは？

  14. ts-morph ↕ TypeScript Compiler APIの ラッパーライブラリ

  15. 超簡単な例

  16. None
  17. None
  18. None

  19. 🤮

  20. None

  21. 🥰

  22. None

  23. ts-morphを使った実例 vuex → pinia：簡単＆部分的な例

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None

  30. ts-morphを使って AST操作を簡単に始めよう！