Abstract Syntax Tree in Javascript

JavascriptのASTについて

Transcript

1. Abstract Syntax Tree
   in Javascript
   

   View Slide

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
   

   View Slide

3. What is AST?
   ASTהכJavascriptךفؚٗٓي׾ػ٦أ׃׋穠卓欰䧭ׁ׸׷
   圓俑׾邌植׃׋加圓鸡ךֿה
   

   View Slide

4. if (x) {
   x = 100
   }
   

   View Slide

5. IF
   CONDITION
   THEN
   BLOCK
   EXPRESSION
   STATEMENT
   ASSIGN
   VAR PROXY (X) LITERAL (100)
   if
   (x)
   
   {
   
   x = 100
   
   

   View Slide

6. Why need it?
   فؚٗٓيך㶵꬗׾׉ךתת⢪ֲךכꨇ׃ְկ
   javascript׾㹋遤ׅ׷׋׭חכ圫ղזؿؑ٦ؤָ֮׷կ
   غ؎ز؝٦س欰䧭ծCFG欰䧭ծIR欰䧭ծ剑黝⻉ծetc…
   

   View Slide

7. How do I create it?
   فؚٗٓىؚٝ鎉铂חכ㛇劤涸חכ俑岀ָ㶷㖈ׅ׷կ
   JavascriptכEcmaInternationalָ➬圫׾תה׭גⰕꟚ׃גְ׷կ
   

   View Slide

8. View Slide

9. Grammars
   ׉ך⚥ח俑岀ָ㹀纏ׁ׸גְ׷ل٦آָ֮׷ךד׉ֿ׾⿫撑ׅ׷ֿ
   הדػ٦؟٦׾剅ֻֿהָדֹ׷կ
   

   View Slide

10. View Slide

11. But…
    ֿך俑岀㹀纏כ㛇劤涸ח׉ךתת⢪ֲךכꨇ׃ְկ
    

    View Slide

12. Javascript become too complex
    Javascriptך俑岀כַז׶醱꧟חז׏גֹגֶ׶ծ秪磏ח׉ךתת
    ػ٦أׅ׷ֿהַָז׶ꨇ׃ְկ
    

    View Slide

13. var a = /aaa|bbb/!
    b / 2 = 0;!
    !
    // Is it easy?!
    b = / 2 = 0 /!
    ת׆כ剣せז姻鋉邌植ַ׵
    

    View Slide

14. var a = (x, y) => x + y;!
    var a = (x, y);!
    !
    var a = x => x;!
    var a = x;!
    ،ٗ٦ꟼ侧
    

    View Slide

15. View Slide

16. var {a: b, b: c} = {b: 1, c: 2};!
    ({a: b, b: c});!
    !
    [a, b, c] = [0, 1, 2];!
    [a, b, c];!
    ⴓⶴ➿Ⰵ
    

    View Slide

17. Parser has many state
    穠㽷Parserכ㣐ꆀך朐䡾׾⥂䭯׃זָ׵갹䓸׏גػ٦أׅ׷׃ַז
    ְկ
    

    View Slide

18. AST Usage
    蕱⸤׃ג⡲׶♳־׋ASTכוֲ⢪׻׸גְ׷ךַ
    

    View Slide

19. In V8
    ASTַ׵Scope׾欰䧭׃׋׶ׅ׷
    ׁ׵ח剑穄涸חBytecode׾欰䧭׃ג㹋遤ׅ׷
    YieldװAsync٥Awaitך圓俑׾JavascriptךStateMachineח㢌䳔ׅ
    ׷
    

    View Slide

20. In Babel
    AST׾㢌䳔׃ג剑倜ךJavascriptַ׵植㖈ךJavascriptפ㢌䳔ׅ׷
    

    View Slide

21. In istanbul
    AST׾㢌䳔׃גぐ؝٦س꟦ח鸐麓׃׋⽩׾➰ֽ׷؝٦س׾㙵׭鴥׬
    

    View Slide

22. Try and play AST
    Esprima׾⢪ֲֿהד知⽃חAST׾欰䧭ׅ׷ֿהָדֹ׷
    ת׋
    https://github.com/estools
    חػ٦أ׃׋׶AST׾Query׃׋׶ׅ׷خ٦ָٕ尶㿊֮׷ךד鑐׃
    ג׫׷ה葺ְ
    

    View Slide

23. Summary
    AST׾鍗׷ה鸐䌢ךفؚٗٓيדכꨇ׃ַ׏׋ֿהָ葿ղדֹ׷״
    ֲחז׷
    嚂׃ְךד僽ꬊ♧㔐ֻ׵ְכ鑐׃ג׫׷הְְה䙼ֲ
    

    View Slide