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
390
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
4.6k
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
210
Managing "side effect" in Frontend Development
shinyaigeek
3
3.5k
爆速の日経電子版開発の今
shinyaigeek
3
2.6k
加速するEdge Computing
shinyaigeek
6
6.8k
ブラウザ作りのすゝめ
shinyaigeek
1
470
フロントエンド
shinyaigeek
0
180
Web Frontend Performance Tuning
shinyaigeek
1
400
Other Decks in Technology
See All in Technology
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
120
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
Amazon Aurora のバージョンアップ手法について
smt7174
2
180
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
320
OPENLOGI Company Profile for engineer
hr01
1
20k
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
280
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
170
IAMのマニアックな話2025
nrinetcom
PRO
6
1.3k
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
350
日経のデータベース事業とElasticsearch
hinatades
PRO
0
260
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How to train your dragon (web standard)
notwaldorf
91
5.9k
How to Ace a Technical Interview
jacobian
276
23k
Building Applications with DynamoDB
mza
93
6.2k
GitHub's CSS Performance
jonrohan
1030
460k
Six Lessons from altMBA
skipperchong
27
3.6k
RailsConf 2023
tenderlove
29
1k
Side Projects
sachag
452
42k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
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を自分で上げていくエキサイティングな取り組みができる