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
400
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
4.8k
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
220
Managing "side effect" in Frontend Development
shinyaigeek
3
3.6k
爆速の日経電子版開発の今
shinyaigeek
3
2.6k
加速するEdge Computing
shinyaigeek
6
6.8k
ブラウザ作りのすゝめ
shinyaigeek
1
480
フロントエンド
shinyaigeek
0
180
Web Frontend Performance Tuning
shinyaigeek
1
410
Other Decks in Technology
See All in Technology
AWSLambdaMCPServerを使ってツールとMCPサーバを分離する
tkikuchi
1
3k
3月のAWSアップデートを5分間でざっくりと!
kubomasataka
0
120
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming
tomzoh
1
230
Road to Go Gem #rubykaigi
sue445
0
450
技術者はかっこいいものだ!!~キルラキルから学んだエンジニアの生き方~
masakiokuda
2
260
CloudWatch 大好きなSAが語る CloudWatch キホンのキ
o11yfes2023
0
180
CBになったのでEKSのこともっと知ってもらいたい!
daitak
1
160
ブラウザのレガシー・独自機能を愛でる-Firefoxの脆弱性4選- / Browser Crash Club #1
masatokinugawa
1
460
【2025年度新卒技術研修】100分で学ぶ サイバーエージェントのデータベース 活用事例とMySQLパフォーマンス調査
cyberagentdevelopers
PRO
5
7.3k
LLM as プロダクト開発のパワードスーツ
layerx
PRO
1
240
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
110
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
180
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
750
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Music & Morning Musume
bryan
47
6.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Into the Great Unknown - MozCon
thekraken
37
1.7k
How GitHub (no longer) Works
holman
314
140k
Automating Front-end Workflow
addyosmani
1369
200k
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を自分で上げていくエキサイティングな取り組みができる