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

Abstract Syntax Tree in Javascript

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

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