ASTをいじいじして僕のかんがえた最強のDXを得る

Transcript

1. ASTをイジイジして僕のかんがえた
   最強のDXを得よう
   〜自分のDXは自分で守っていけ〜
   

   View Slide

2. Who am I
   Shinobu Hayashi(林　仁)
   a.k.a. @Shinyaigeek
   Web Frontend Engineer
   Web Performanceのことを考えたり, ASTをイジイジする
   のが好きです.
   夏バイト生として, ASGでお世話になってます.
   

   View Slide

3. 今日のゴール
   ASTイジイジすることを布教したい！！
   

   View Slide

4. Agenda
   ● ASTとは
   ○ 概説
   ○ ASTの恩恵
   ● ASTをどうイジイジするのか(JavaScriptの場合)
   ○ ライブコーディングタイム
   ● 僕が最近ASTで作っていたもの
   ● まとめ
   

   View Slide

5. ASTとは
   

   View Slide

6. ASTとは
   Abstract Syntax Tree, 抽象構文木
   Tree とあるように, プログラムの文法構造を
   Tree 構造で表現したものになります.
   Tree 構造なので, それぞれのプログラムの節々
   を Node と言います.
   if文
   条件
   === 変数
   hoge
   リテラル値
   “bar”
   then
   関数を実行
   fuga
   二項演算子
   if( hoge === “bar” ) {
   fuga()
   }
   

   View Slide

7. ASTが使われているツール
   

   View Slide

8. ASTでコードをいじいじするときのあれこれ
   parse
   transform
   unparse
   JS -> AST
   traverse
   AST -> JS
   

   View Slide

9. ASTでコードをいじいじするときのあれこれ
   parse
   transform
   unparse
   parseとunparseはライブラリに任せる
   ● parse
   ○ @babel/parser
   ○ accorn
   ● unparse
   ○ @babel/generator
   

   View Slide

10. ASTでコードをいじいじするときのあれこれ
    parse
    transform
    unparse
    @babel/traverse の場合
    traverse(ast, { //visitor })
    ↑ visitor?
    

    View Slide

11. ASTでコードをいじいじするときのあれこれ
    parse
    transform
    unparse
    Visitor Pattern
    Tree の内、あるNodeに “訪問” して、処理を行
    う
    

    View Slide

12. ASTを試してみよう！！
    ライブコーディング
    

    View Slide

13. 僕が作ってたもの
    

    View Slide

14. 僕が作ってたもの
    lit-html使いたいけど型が。。
    普通にJSX書きたい。。
    

    View Slide

15. 僕が作ってたもの
    JSX
    html-bas
    ed
    template
    -literal
    互換性あるんじゃね！！
    

    View Slide

16. 僕が作っていたもの
    babel-plugin-lit-jsx(仮)
    https://github.com/Shinyaigeek/lit-jsx
    (実はまだWIP)
    

    View Slide

17. まとめ
    ● 先人の努力のおかげで, ASTを触ること自体は難しくない
    ● ASTが触れると, 扱える領域が広がる
    ● 今回はJSの話をしたけど, どんな言語でも役にたつ
    ● 自分のDXを自分で上げていくエキサイティングな取り組みができる
    

    View Slide