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
160
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
爆速の日経電子版開発の今
shinyaigeek
2
620
加速するEdge Computing
shinyaigeek
6
5.9k
ブラウザ作りのすゝめ
shinyaigeek
1
260
フロントエンド
shinyaigeek
0
120
Web Frontend Performance Tuning
shinyaigeek
1
170
Other Decks in Technology
See All in Technology
OpenShiftでスポットVMを使おう.pdf
jpishikawa
1
340
あつめたデータをどう扱うか
skrb
2
160
PCL (Point Cloud Library)の基本となぜ点群処理か_2023年_第2版.pdf
cvmlexpertguide
0
170
PHPのimmutable arrayとは
hnw
1
160
20230123_FinJAWS
takuyay0ne
0
120
FlexScan HD2452Wの 後継を探して
tring
0
6.3k
USB PD で迎える AC アダプター大統一時代
puhitaku
2
1.9k
もし本番ネットワークをまるごと仮想環境に”コピー”できたらうれしいですか? / janog51
corestate55
0
380
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
260
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
230
03_ユーザビリティテスト
kouzoukaikaku
0
490
NGINXENG JP#2 - 1-NGINX-エンジニアリング勉強会-きょうの見どころ
hiropo20
0
110
Featured
See All Featured
A Tale of Four Properties
chriscoyier
149
21k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
How to Ace a Technical Interview
jacobian
270
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
Thoughts on Productivity
jonyablonski
49
2.7k
Three Pipe Problems
jasonvnalue
89
8.9k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
The Invisible Side of Design
smashingmag
292
48k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
Optimizing for Happiness
mojombo
365
64k
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を自分で上げていくエキサイティングな取り組みができる