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を自分で上げていくエキサイティングな取り組みができる