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
440
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
5.3k
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
260
Managing "side effect" in Frontend Development
shinyaigeek
3
3.8k
爆速の日経電子版開発の今
shinyaigeek
3
2.8k
加速するEdge Computing
shinyaigeek
6
6.9k
ブラウザ作りのすゝめ
shinyaigeek
1
530
フロントエンド
shinyaigeek
0
200
Web Frontend Performance Tuning
shinyaigeek
1
440
Other Decks in Technology
See All in Technology
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
240
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
500
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
370
LLMプロダクトの信頼性を上げるには?LLM Observabilityによる、対話型音声AIアプリケーションの安定運用
ivry_presentationmaterials
0
540
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
200
事業開発におけるDify活用事例
kentarofujii
1
280
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
4
2.1k
React19.2のuseEffectEventを追う
maguroalternative
2
500
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
350
Wasmのエコシステムを使った ツール作成方法
askua
0
220
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
Site-Speed That Sticks
csswizardry
13
910
Into the Great Unknown - MozCon
thekraken
40
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Designing Experiences People Love
moore
142
24k
Thoughts on Productivity
jonyablonski
70
4.9k
Making Projects Easy
brettharned
120
6.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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を自分で上げていくエキサイティングな取り組みができる