ASTをイジイジして僕のかんがえた最強のDXを得よう〜自分のDXは自分で守っていけ〜
View Slide
Who am IShinobu Hayashi(林 仁)a.k.a. @ShinyaigeekWeb Frontend EngineerWeb Performanceのことを考えたり, ASTをイジイジするのが好きです.夏バイト生として, ASGでお世話になってます.
今日のゴールASTイジイジすることを布教したい!!
Agenda● ASTとは○ 概説○ ASTの恩恵● ASTをどうイジイジするのか(JavaScriptの場合)○ ライブコーディングタイム● 僕が最近ASTで作っていたもの● まとめ
ASTとは
ASTとはAbstract Syntax Tree, 抽象構文木Tree とあるように, プログラムの文法構造をTree 構造で表現したものになります.Tree 構造なので, それぞれのプログラムの節々を Node と言います.if文条件=== 変数hogeリテラル値“bar”then関数を実行fuga二項演算子if( hoge === “bar” ) {fuga()}
ASTが使われているツール
ASTでコードをいじいじするときのあれこれparsetransformunparseJS -> ASTtraverseAST -> JS
ASTでコードをいじいじするときのあれこれparsetransformunparseparseとunparseはライブラリに任せる● parse○ @babel/parser○ accorn● unparse○ @babel/generator
ASTでコードをいじいじするときのあれこれparsetransformunparse@babel/traverse の場合traverse(ast, { //visitor })↑ visitor?
ASTでコードをいじいじするときのあれこれparsetransformunparseVisitor PatternTree の内、あるNodeに “訪問” して、処理を行う
ASTを試してみよう!!ライブコーディング
僕が作ってたもの
僕が作ってたものlit-html使いたいけど型が。。普通にJSX書きたい。。
僕が作ってたものJSXhtml-basedtemplate-literal互換性あるんじゃね!!
僕が作っていたものbabel-plugin-lit-jsx(仮)https://github.com/Shinyaigeek/lit-jsx(実はまだWIP)
まとめ● 先人の努力のおかげで, ASTを触ること自体は難しくない● ASTが触れると, 扱える領域が広がる● 今回はJSの話をしたけど, どんな言語でも役にたつ● 自分のDXを自分で上げていくエキサイティングな取り組みができる