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
990

Other Decks in Technology

See All in Technology
エンジニアは生成AIと どのように向き合うべきか？ ことばの意味という観点から
Avatar for Hitomi Yanaka verypluming
3
290
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development
Avatar for 吉田真吾 yoshidashingo
1
260
Strands Agents超入門
Avatar for KintoTech_Dev kintotechdev
1
140
Oracle Cloud Infrastructure：2026年5月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
1
270
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.8k
AIが変えた"品質の守り方"
Avatar for kkakizaki kkakizaki
13
5.4k
Spring AI × MCP 入門〜AIエージェントへのツール公開、境界設計から始める最小構成 〜
Avatar for 宮本裕也 yuyamiyamoto
0
180
開発を止めない CI/CD ~CI Visibilityによる継続的最適化~
Avatar for Ryosuke Tsuruda pensuke628
0
210
管理アカウント単一運用からAWS Organizationsに移行するの大変で滅
Avatar for 平目 hiramax
0
320
Claude Codeを組織で使いこなす— サーバサイドAIエージェント運用の実践知
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
130
サプライチェーンセキュリティの空白地帯 - 信頼できる”依存性”の未来を考える
Avatar for Hiroki Suezawa (@rung) rung
PRO
2
470
さきさん文庫の書籍ができるまで
Avatar for H.Saki sakiengineer
0
320

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
55k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
790
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
130
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.1k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
440
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.7k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
240
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
560
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.3k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k

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