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
160
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
2.6k
Parsing Javascript
brn
12
7.4k
JSON & Object Tips
brn
1
300
CA 1Day Youth Bootcamp for Frontend LT
brn
0
690
Modern TypeScript
brn
2
680
javascript - behind the scene
brn
3
610
tc39 proposals
brn
0
660
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
520
Other Decks in Programming
See All in Programming
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
790
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
280
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
1
220
FoodGram
iseruuuuu
0
230
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
1.1k
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
460
RaaP
ksss
0
160
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
180
Long journey of Ruby standard library RubyKaigi 2024
andpad
2
290
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
520
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
140
Featured
See All Featured
Teambox: Starting and Learning
jrom
128
8.4k
The Pragmatic Product Professional
lauravandoore
26
5.9k
Typedesign – Prime Four
hannesfritz
36
2.1k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
For a Future-Friendly Web
brad_frost
172
9k
Automating Front-end Workflow
addyosmani
1357
200k
Designing with Data
zakiwarfel
96
4.8k
Facilitating Awesome Meetings
lara
43
5.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
67
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
How GitHub (no longer) Works
holman
305
140k
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鍗ה鸐䌢ךفؚٗٓيדכꨇ׃ַֿהָ葿ղדֹ״ ֲחז 嚂׃ְךד僽ꬊ♧㔐ְֻכ鑐׃גהְְה䙼ֲ