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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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.7k
UnJSで簡単に始めるCLIツール開発 / cli-tool-development-with-unjs
Avatar for aose aoseyuu
2
1k

Other Decks in Technology

See All in Technology
Agile and AI Redmine Japan 2026
Avatar for Kenji Hiranabe hiranabe
4
480
GitHub Copilot 最新アップデート – 「一歩先」の実践活用術
Avatar for zhang.william moulongzhang
5
1.7k
新しいUbuntu/GNOMEが使いたいからXからWaylandへ移行頑張ってるの巻 2026-06-20
Avatar for Nobuto Murata nobutomurata
0
160
AIネイティブな開発のサプライチェーンリスク対策 〜激動の開発現場でリスクに立ち向かう〜【ZennFes】
Avatar for サイバーセキュリティクラウド cscengineer
PRO
2
160
Flow 不死：AI 時代 DevOps 的不變本質
Avatar for Cheng-Wei Chen cheng_wei_chen
2
500
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
200
MUSUBI 田中裕一『AIと共に行う「しごとのリデザイン」- スモールバックオフィス編』AI Ops Lab #4
Avatar for MUSUBI musubi
0
310
AIをフル活用してオンコール機能のプロトタイプを2日で作った話 / Building an AI-Powered On-Call Prototype in Just Two Days
Avatar for Narimichi Takamura nari_ex
0
120
サイバーエージェントにおけるAI推進戦略と変革への取り組み
Avatar for shotaTsuge shotatsuge
0
530
現場のトークンマネジメント
Avatar for dak2 dak2
1
190
あなたの知らないPDFのアクセシビリティ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
240
事業会社における 機械学習・推薦システム技術の活用事例と必要な能力 / ml-recsys-in-layerx-wantedly-2026
Avatar for Yuya Matsumura yuya4
0
160

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
190
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
310
A Soul's Torment
Avatar for Nat Ma seathinner
6
3k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
370
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.2k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.4k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
980
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
40k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.9k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
490

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操作を簡単に始めよう！