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.7k
Parsing Javascript
brn
12
8k
JSON & Object Tips
brn
1
330
CA 1Day Youth Bootcamp for Frontend LT
brn
0
720
Modern TypeScript
brn
2
700
javascript - behind the scene
brn
3
640
tc39 proposals
brn
0
720
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
540
Other Decks in Programming
See All in Programming
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
生成AIをkintoneに連携してみた
hideg
0
230
ドメイン駆動設計の実践
masuda220
PRO
17
5.2k
Trial
cairolibrary720
1
130
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
Rust.Nagoya #1
codemountains
0
170
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Featured
See All Featured
Gamification - CAS2011
davidbonilla
78
4.9k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Web Components: a chance to create the future
zenorocha
307
41k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Designing for Performance
lara
604
67k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Rails Girls Zürich Keynote
gr2m
93
13k
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鍗ה鸐䌢ךفؚٗٓيדכꨇ׃ַֿהָ葿ղדֹ״ ֲחז 嚂׃ְךד僽ꬊ♧㔐ְֻכ鑐׃גהְְה䙼ֲ