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

Other Decks in Technology

See All in Technology
"うちにはまだ早い"は本当？ ─ 小さく始めるPlatform Engineering入門
Avatar for Haruka Sakihara harukasakihara
6
610
セキュリティ対策、何からはじめる？ CloudNative環境の脅威モデリングと リスク評価実践入門 #cloudnativekaigi
Avatar for varu3 varu3
5
960
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
Avatar for CARTA Engineering carta_engineering
0
47k
Fラン学生が考える、AI時代のデザインに執着した突破口
Avatar for husensan husengs7
1
160
React Compiler導入の効果と運用の工夫
Avatar for KAKEHASHI kakehashi
PRO
3
160
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.4k
「背中を見て育て」からの卒業 〜専門技術としてのテスト設計を軸に、品質保証のバトンを繋ぐ〜 #genda_tech_talk
Avatar for nihonbuson nihonbuson
PRO
3
1.4k
クラウドネイティブ DB はいかにして制約を 克服したか？ 〜進化歴史から紐解く、スケーラブルアーキテクチャ設計指針〜
Avatar for hacomono Inc. hacomono
PRO
6
1k
おいらのAWSアップデートの追い方〜Slack×AgentCore〜
Avatar for やくも yakumo
1
110
AI全盛の今だからこそ、あえてもう一度振り返るAPIの基礎
Avatar for Makky12 smt7174
2
110
全社統制を維持しながら現場負担をどう減らすか〜プラットフォームチームとセキュリティチームで進めたSecurity Hub活用によるAWS統制の見直し〜/secjaws-security-hub-custom-insights
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
1
540
データモデリング通り #5オンライン勉強会： AIに『ビジネスの文脈』を教え込むデータモデリング
Avatar for データ横丁 datayokocho
0
280

Featured

See All Featured
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.8k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
350
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.9k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
210
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
440
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
620
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
290

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