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.5k
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
200
Managing "side effect" in Frontend Development
shinyaigeek
3
3.5k
爆速の日経電子版開発の今
shinyaigeek
3
2.5k
加速するEdge Computing
shinyaigeek
6
6.7k
ブラウザ作りのすゝめ
shinyaigeek
1
470
フロントエンド
shinyaigeek
0
170
Web Frontend Performance Tuning
shinyaigeek
1
390
Other Decks in Technology
See All in Technology
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
110
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
120
Building Products in the LLM Era
ymatsuwitter
9
3.4k
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
970
Postman Vault を使った秘密情報の安全な管理
nagix
0
120
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
980
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
550
マルチデータプロダクト開発・運用に耐えるためのデータ組織・アーキテクチャの遷移
mtpooh
1
420
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
10
3.8k
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2k
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
2.9k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
350
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
A better future with KSS
kneath
238
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
GitHub's CSS Performance
jonrohan
1030
460k
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を自分で上げていくエキサイティングな取り組みができる