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
0
1.2k

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

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

Avatar for aose

aose

October 30, 2024
Tweet

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.2k
UnJSで簡単に始めるCLIツール開発 / cli-tool-development-with-unjs
Avatar for aose aoseyuu
2
950

Other Decks in Technology

See All in Technology
パネルディスカッション資料 (at Tableau Now! - 2026-02-26)
Avatar for Yoshitaka Arakawa yoshitakaarakawa
0
1.1k
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.1k
生成AI活用によるPRレビュー改善の歩み
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
5
2k
Databricksアシスタントが自分で考えて動く時代に! エージェントモード体験もくもく会
Avatar for Takaaki Yayoi taka_aki
0
320
AIエンジニア Devin と歩む、自律型運用プロセスの構築
Avatar for a2-ito a2ito
0
680
Webアクセシビリティ技術と実装の実際
Avatar for tomokusaba tomokusaba
0
210
GitLab Duo Agent Platform + Local LLMサービングで幸せになりたい
Avatar for jyoshise jyoshise
0
100
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4k
越境する組織づくり ─ 多様性を前提にしたチームビルディングとリードの実践知
Avatar for hrpnx kido_engineer
1
100
【SLO】"多様な期待値" と向き合ってみた
Avatar for kaita z63d
2
300
ブラックボックス観測に基づくAI支援のプロトコルのリバースエンジニアリングと再現 ~AIを用いたリバースエンジニアリング~ @ SECCON 14 電脳会議 / Reverse Engineering and Reproduction of an AI-Assisted Protocol Based on Black-Box Observation @ SECCON 14 DENNO-KAIGI
Avatar for chibiegg chibiegg
0
140
Kiro のクレジットを使い切る！
Avatar for otanikohei otanikohei2023
0
110

Featured

See All Featured
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
580
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
130
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
60
51k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
75
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
63
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
5.1k
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
140

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