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
350
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
3.9k
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
160
Managing "side effect" in Frontend Development
shinyaigeek
3
3.4k
爆速の日経電子版開発の今
shinyaigeek
2
2.2k
加速するEdge Computing
shinyaigeek
6
6.7k
ブラウザ作りのすゝめ
shinyaigeek
1
430
フロントエンド
shinyaigeek
0
160
Web Frontend Performance Tuning
shinyaigeek
1
370
Other Decks in Technology
See All in Technology
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
130
Forget efficiency – Become more productive without the stress
ufried
0
150
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
210
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.5k
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
220
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
120
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
740
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
640
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
How to Ace a Technical Interview
jacobian
275
23k
What's in a price? How to price your products and services
michaelherold
243
12k
Producing Creativity
orderedlist
PRO
341
39k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
What's new in Ruby 2.0
geeforr
342
31k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
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を自分で上げていくエキサイティングな取り組みができる