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

  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ָ➬圫׾תה׭גⰕꟚ׃גְ׷կ

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

  10. None
  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;! ،ٗ٦ꟼ侧
  15. None
  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׾鍗׷ה鸐䌢ךفؚٗٓيדכꨇ׃ַ׏׋ֿהָ葿ղדֹ׷״ ֲחז׷ 嚂׃ְךד僽ꬊ♧㔐ֻ׵ְכ鑐׃ג׫׷הְְה䙼ֲ