Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ASTをいじいじして僕のかんがえた最強のDXを得る
Search
Shinobu Hayashi
November 12, 2020
Technology
0
280
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
85
Managing "side effect" in Frontend Development
shinyaigeek
3
2.9k
爆速の日経電子版開発の今
shinyaigeek
2
1.8k
加速するEdge Computing
shinyaigeek
6
6.4k
ブラウザ作りのすゝめ
shinyaigeek
1
370
フロントエンド
shinyaigeek
0
150
Web Frontend Performance Tuning
shinyaigeek
1
310
Other Decks in Technology
See All in Technology
DMM.com アルファ室採用案内資料
hsugita
1
220
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
610
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
3
630
Improve Your Development Workflow with Gemini Code Assist
meteatamel
0
120
On Your Data を超えていく!
hirotomotaguchi
2
750
開発パフォーマンスを最大化するための開発体制
ham0215
7
1.1k
Cracking the KubeCon CfP
inductor
2
270
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.5k
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
5
1.5k
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
1
360
Building Dashboards as a Hobby
egmc
0
360
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
338
39k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
A better future with KSS
kneath
231
16k
The Invisible Customer
myddelton
114
12k
4 Signs Your Business is Dying
shpigford
176
21k
Bash Introduction
62gerente
605
210k
Being A Developer After 40
akosma
66
580k
Faster Mobile Websites
deanohume
300
30k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Designing the Hi-DPI Web
ddemaree
276
33k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Teambox: Starting and Learning
jrom
128
8.4k
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を自分で上げていくエキサイティングな取り組みができる