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