Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Shinobu Hayashi

November 12, 2020
Tweet

More Decks by Shinobu Hayashi

Other Decks in Technology

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