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

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

Transcript

1. ts-morphで簡単に始めるAST操作
2. Speaker 株式会社ヤプリ フロントエンドエンジニア 青木 優弥 / Aose Yuu • 2023/11〜 ヤプリjoin 来月からヤプリ2年目突入 • Vue Fes ボランティアスタッフ
5. ASTとは？
6. AST ↕ 抽象構文木
7. 抽象構文木（AST：Abstract Syntax Tree） • プログラムのソースコードを階層的に表現するデータ構造 • ツリー構造で、各ノードがプログラムの構成要素を表す • ノード同士の親子関係＝ソースコードの構造的な関係
9. 󰷺󰷺󰷺󰷺󰷺 󰷺
10. ASTでできること • コードの解析（Linter, Formetter） • コードの変換・生成 • リファクタリング
11. ASTでできること • コードの解析（Linter, Formetter） • コードの変換・生成 • リファクタリング 　　　　　　　　　 ⬇ 気合いの正規表現🔥　漢の文字列置換💪　からの卒業󰠈
12. 󰷺󰷺󰷺󰢄󰷺 󰷺󰷺
13. ts-morphとは？
14. ts-morph ↕ TypeScript Compiler APIの ラッパーライブラリ
15. 超簡単な例
19. 🤮
21. 🥰
23. ts-morphを使った実例 vuex → pinia：簡単＆部分的な例
30. ts-morphを使って AST操作を簡単に始めよう！