Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Technology
0
100
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
加速するEdge Computing
shinyaigeek
6
5.5k
ブラウザ作りのすゝめ
shinyaigeek
1
200
フロントエンド
shinyaigeek
0
92
Web Frontend Performance Tuning
shinyaigeek
1
130
Other Decks in Technology
See All in Technology
Step-by-Step MLOps and Microsoft Products
shisyu_gaku
2
590
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
syoshie
1
1.4k
Oblivious Online Monitoring for Safety LTL Specification via Fully Homomorphic Encryption
anqou
0
230
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
19k
Micro frontends and micro services
kashif98
0
150
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
sakon310
4
470
ログ集約基盤をCloudWatchからOpenSearchに変えてみた
yuhta28
0
140
年700万円損するサーバレスの 認可システムをご紹介します!!
higuuu
3
340
Goで実装するブランドネットワークとの接続ポイント
pongzu
2
280
psql, my favorite tool!
nuko_yokohama
1
180
DeepDive into Modern Development with AWS
mokocm
1
350
Power Automate for desktopで 配信環境を改善してみた話
akiika
0
320
Featured
See All Featured
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Optimizing for Happiness
mojombo
364
64k
Bootstrapping a Software Product
garrettdimon
296
110k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Design by the Numbers
sachag
271
17k
Designing the Hi-DPI Web
ddemaree
272
32k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
Atom: Resistance is Futile
akmur
255
20k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Transcript
ASTをイジイジして僕のかんがえた 最強のDXを得よう 〜自分のDXは自分で守っていけ〜
Who am I Shinobu Hayashi(林 仁) a.k.a. @Shinyaigeek Web Frontend Engineer
Web Performanceのことを考えたり, ASTをイジイジする のが好きです. 夏バイト生として, ASGでお世話になってます.
今日のゴール ASTイジイジすることを布教したい!!
Agenda • ASTとは ◦ 概説 ◦ ASTの恩恵 • ASTをどうイジイジするのか(JavaScriptの場合) ◦
ライブコーディングタイム • 僕が最近ASTで作っていたもの • まとめ
ASTとは
ASTとは Abstract Syntax Tree, 抽象構文木 Tree とあるように, プログラムの文法構造を Tree 構造で表現したものになります.
Tree 構造なので, それぞれのプログラムの節々 を Node と言います. if文 条件 === 変数 hoge リテラル値 “bar” then 関数を実行 fuga 二項演算子 if( hoge === “bar” ) { fuga() }
ASTが使われているツール
ASTでコードをいじいじするときのあれこれ parse transform unparse JS -> AST traverse AST ->
JS
ASTでコードをいじいじするときのあれこれ parse transform unparse parseとunparseはライブラリに任せる • parse ◦ @babel/parser ◦
accorn • unparse ◦ @babel/generator
ASTでコードをいじいじするときのあれこれ parse transform unparse @babel/traverse の場合 traverse(ast, { //visitor })
↑ visitor?
ASTでコードをいじいじするときのあれこれ parse transform unparse Visitor Pattern Tree の内、あるNodeに “訪問” して、処理を行
う
ASTを試してみよう!! ライブコーディング
僕が作ってたもの
僕が作ってたもの lit-html使いたいけど型が。。 普通にJSX書きたい。。
僕が作ってたもの JSX html-bas ed template -literal 互換性あるんじゃね!!
僕が作っていたもの babel-plugin-lit-jsx(仮) https://github.com/Shinyaigeek/lit-jsx (実はまだWIP)
まとめ • 先人の努力のおかげで, ASTを触ること自体は難しくない • ASTが触れると, 扱える領域が広がる • 今回はJSの話をしたけど, どんな言語でも役にたつ
• 自分のDXを自分で上げていくエキサイティングな取り組みができる