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
Abstract Syntax Tree in Javascript
Search
Taketoshi Aono(青野健利 a.k.a brn)
January 24, 2018
Programming
0
170
Abstract Syntax Tree in Javascript
JavascriptのASTについて
Taketoshi Aono(青野健利 a.k.a brn)
January 24, 2018
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3k
Parsing Javascript
brn
14
9.2k
JSON & Object Tips
brn
1
480
CA 1Day Youth Bootcamp for Frontend LT
brn
0
930
Modern TypeScript
brn
2
800
javascript - behind the scene
brn
3
730
tc39 proposals
brn
0
870
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
690
Other Decks in Programming
See All in Programming
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.5k
Language Server と喋ろう – TSKaigi 2025
pizzacat83
2
660
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
170
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
380
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
270
テスト分析入門/Test Analysis Tutorial
goyoki
11
2.7k
Design Pressure
hynek
0
1.4k
Investigating Multithreaded PostgreSQL
macdice
0
150
ワンバイナリWebサービスのススメ
mackee
10
7.4k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Speed Design
sergeychernyshev
30
970
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Embracing the Ebb and Flow
colly
85
4.7k
Automating Front-end Workflow
addyosmani
1370
200k
Code Review Best Practice
trishagee
68
18k
4 Signs Your Business is Dying
shpigford
183
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Transcript
Abstract Syntax Tree in Javascript
Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger
OSS Contributor of V8 Blog http://abcdef.gets.b6n.ch/ Twitter https://twitter.com/brn227 GitHub https://github.com/brn
What is AST? ASTהכJavascriptךفؚٗٓيػ٦أ׃穠卓欰䧭ׁ 圓俑邌植׃加圓鸡ךֿה
if (x) { x = 100 }
IF CONDITION THEN BLOCK EXPRESSION STATEMENT ASSIGN VAR PROXY (X)
LITERAL (100) if (x) { x = 100
Why need it? فؚٗٓيך㶵ךתת⢪ֲךכꨇ׃ְկ javascript㹋遤ׅחכ圫ղזؿؑ٦ؤָ֮կ غ؎ز؝٦س欰䧭ծCFG欰䧭ծIR欰䧭ծ剑黝⻉ծetc…
How do I create it? فؚٗٓىؚٝ鎉铂חכ㛇劤涸חכ俑岀ָ㶷㖈ׅկ JavascriptכEcmaInternationalָ➬圫תהגⰕ׃גְկ
None
Grammars ך⚥ח俑岀ָ㹀纏ׁגְل٦آָ֮ךדֿ撑ֿׅ הדػ٦؟٦剅ֻֿהָדֹկ
None
But… ֿך俑岀㹀纏כ㛇劤涸חךתת⢪ֲךכꨇ׃ְկ
Javascript become too complex Javascriptך俑岀כַז醱꧟חזגֹגֶծ秪磏חךתת ػ٦أֿׅהַָזꨇ׃ְկ
var a = /aaa|bbb/! b / 2 = 0;! !
// Is it easy?! b = / 2 = 0 /! ת׆כ剣せז姻鋉邌植ַ
var a = (x, y) => x + y;! var
a = (x, y);! ! var a = x => x;! var a = x;! ،ٗ٦ꟼ侧
None
var {a: b, b: c} = {b: 1, c: 2};!
({a: b, b: c});! ! [a, b, c] = [0, 1, 2];! [a, b, c];! ⴓⶴ➿Ⰵ
Parser has many state 穠㽷Parserכ㣐ꆀך朐䡾⥂䭯׃זָ갹䓸גػ٦أׅ׃ַז ְկ
AST Usage 蕱⸤׃ג⡲♳־ASTכוֲ⢪גְךַ
In V8 ASTַScope欰䧭׃ׅ ׁח剑穄涸חBytecode欰䧭׃ג㹋遤ׅ YieldװAsync٥Awaitך圓俑JavascriptךStateMachineח㢌䳔ׅ
In Babel AST㢌䳔׃ג剑倜ךJavascriptַ植㖈ךJavascriptפ㢌䳔ׅ
In istanbul AST㢌䳔׃גぐ؝٦سח鸐麓׃⽩➰ֽ؝٦س㙵鴥
Try and play AST Esprima⢪ֲֿהד知⽃חAST欰䧭ֿׅהָדֹ ת https://github.com/estools חػ٦أ׃ASTQuery׃ׅخ٦ָٕ尶㿊֮ךד鑐׃ גה葺ְ
Summary AST鍗ה鸐䌢ךفؚٗٓيדכꨇ׃ַֿהָ葿ղדֹ״ ֲחז 嚂׃ְךד僽ꬊ♧㔐ְֻכ鑐׃גהְְה䙼ֲ