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

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

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

4cac35b93861e65f31a1c7278bfb5f20?s=128

Shinobu Hayashi

November 12, 2020
Tweet

Transcript

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

  2. Who am I Shinobu Hayashi(林 仁) a.k.a. @Shinyaigeek Web Frontend Engineer

    Web Performanceのことを考えたり, ASTをイジイジする のが好きです. 夏バイト生として, ASGでお世話になってます.
  3. 今日のゴール ASTイジイジすることを布教したい!!

  4. Agenda • ASTとは ◦ 概説 ◦ ASTの恩恵 • ASTをどうイジイジするのか(JavaScriptの場合) ◦

    ライブコーディングタイム • 僕が最近ASTで作っていたもの • まとめ
  5. ASTとは

  6. ASTとは Abstract Syntax Tree, 抽象構文木 Tree とあるように, プログラムの文法構造を Tree 構造で表現したものになります.

    Tree 構造なので, それぞれのプログラムの節々 を Node と言います. if文 条件 === 変数 hoge リテラル値 “bar” then 関数を実行 fuga 二項演算子 if( hoge === “bar” ) { fuga() }
  7. ASTが使われているツール

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

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

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

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

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

  13. 僕が作ってたもの

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

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

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

  17. まとめ • 先人の努力のおかげで, ASTを触ること自体は難しくない • ASTが触れると, 扱える領域が広がる • 今回はJSの話をしたけど, どんな言語でも役にたつ

    • 自分のDXを自分で上げていくエキサイティングな取り組みができる