Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Abstract Syntax Tree in Javascript

Abstract Syntax Tree in Javascript

JavascriptのASTについて

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

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