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