Abstract Syntax Tree in Javascript

JavascriptのASTについて

Transcript

1. Abstract Syntax Tree in Javascript
2. 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
3. What is AST?
   ASTהכJavascriptךفؚٗٓي׾ػ٦أ׃׋穠卓欰䧭ׁ׸׷ 圓俑׾邌植׃׋加圓鸡ךֿה
   
4. if (x) { x = 100 }
5. IF CONDITION THEN BLOCK EXPRESSION STATEMENT ASSIGN VAR PROXY (X) LITERAL (100) if (x)
   
   {
   
   x = 100
   
   
6. Why need it?
   فؚٗٓيך㶵꬗׾׉ךתת⢪ֲךכꨇ׃ְկ javascript׾㹋遤ׅ׷׋׭חכ圫ղזؿؑ٦ؤָ֮׷կ غ؎ز؝٦س欰䧭ծCFG欰䧭ծIR欰䧭ծ剑黝⻉ծetc…
7. How do I create it?
   فؚٗٓىؚٝ鎉铂חכ㛇劤涸חכ俑岀ָ㶷㖈ׅ׷կ JavascriptכEcmaInternationalָ➬圫׾תה׭גⰕꟚ׃גְ׷կ
9. Grammars
   ׉ך⚥ח俑岀ָ㹀纏ׁ׸גְ׷ل٦آָ֮׷ךד׉ֿ׾⿫撑ׅ׷ֿ הדػ٦؟٦׾剅ֻֿהָדֹ׷կ
   
11. But…
    ֿך俑岀㹀纏כ㛇劤涸ח׉ךתת⢪ֲךכꨇ׃ְկ
12. Javascript become too complex
    Javascriptך俑岀כַז׶醱꧟חז׏גֹגֶ׶ծ秪磏ח׉ךתת ػ٦أׅ׷ֿהַָז׶ꨇ׃ְկ
    
13. var a = /aaa|bbb/! b / 2 = 0;! ! // Is it easy?! b = / 2 = 0 /! ת׆כ剣せז姻鋉邌植ַ׵
    
14. var a = (x, y) => x + y;! var a = (x, y);! ! var a = x => x;! var a = x;! ،ٗ٦ꟼ侧
    
16. var {a: b, b: c} = {b: 1, c: 2};! ({a: b, b: c});! ! [a, b, c] = [0, 1, 2];! [a, b, c];! ⴓⶴ➿Ⰵ
    
17. Parser has many state
    穠㽷Parserכ㣐ꆀך朐䡾׾⥂䭯׃זָ׵갹䓸׏גػ٦أׅ׷׃ַז ְկ
    
18. AST Usage
    蕱⸤׃ג⡲׶♳־׋ASTכוֲ⢪׻׸גְ׷ךַ
    
19. In V8
    ASTַ׵Scope׾欰䧭׃׋׶ׅ׷ ׁ׵ח剑穄涸חBytecode׾欰䧭׃ג㹋遤ׅ׷ YieldװAsync٥Awaitך圓俑׾JavascriptךStateMachineח㢌䳔ׅ ׷
20. In Babel
    AST׾㢌䳔׃ג剑倜ךJavascriptַ׵植㖈ךJavascriptפ㢌䳔ׅ׷
21. In istanbul
    AST׾㢌䳔׃גぐ؝٦س꟦ח鸐麓׃׋⽩׾➰ֽ׷؝٦س׾㙵׭鴥׬
22. Try and play AST
    Esprima׾⢪ֲֿהד知⽃חAST׾欰䧭ׅ׷ֿהָדֹ׷ ת׋ https://github.com/estools חػ٦أ׃׋׶AST׾Query׃׋׶ׅ׷خ٦ָٕ尶㿊֮׷ךד鑐׃ ג׫׷ה葺ְ
23. Summary
    AST׾鍗׷ה鸐䌢ךفؚٗٓيדכꨇ׃ַ׏׋ֿהָ葿ղדֹ׷״ ֲחז׷ 嚂׃ְךד僽ꬊ♧㔐ֻ׵ְכ鑐׃ג׫׷הְְה䙼ֲ