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

JavaScript AST

JavaScript AST

38de416c9984b22bff1d2b049c7d51a8?s=128

MURAKAMI Masahiko

December 08, 2017
Tweet

More Decks by MURAKAMI Masahiko

Other Decks in Technology

Transcript

  1. JavaScript AST A-LT 2017-12-08 村上 雅彦 @fossamagna

  2. 村上 雅彦 a.k.a @fossamagna IT サー ビス事業部 所属 2

  3. 今日の話 JavaScript のAST の話 AST って何? AST で何ができるの? JavaScript とAST

    3
  4. AST って何? 4

  5. Abstract Syntax Tree プログラムをパー スして意味のある情 報を木構造で表現したデー タ 5

  6. AST をもう少し詳しく Abstract プログラムの行番号、 空白、 括弧などの情報は 取り除かれている( 存在する場合もある) Syntax プログラムの構文

    Tree 木構造。 字句など木構造の枝葉として表現され る 6
  7. var ast = "Abstract Syntax Tree"; のAST {"type": "Program", "body":

    [{ "type": "VariableDeclaration", "declarations": [{ "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "ast" }, "init": { "type": "Literal", "value": "Abstract Syntax Tree", "raw": "\"Abstract Syntax Tree\"" } }], "kind": "var"}] , "sourceType": "script"} 7
  8. AST で何ができるの? コー ドを処理するツー ルが作れる Lint ツー ルやドキュメント生成、 コー ド生成も。

    新しい機能やライブラリに対応するようにコー ド変換するなど。 パー サー によってはJSX, Flow なども対応可能 CoffeeScript, TypeScript などのAltJS なんかのト ランスパイラ 8
  9. JavaScript のパー サ AST はパー サでソー スコー ドをパー スして作る。 JavaScript

    の主要なパー サには以下のものがある。 babylon:Babel で使っているECMAScript パー サ esprima:estree が標準化しているJavaScript の AST フォー マットに準拠したパー サ espree:ESLint が使っているacorn ベー スのパー サ acorn:parse_js の作者がesprima に対抗して作成し たパー サ 9
  10. JS をパー スしてAST を作ってみる(esprima) esprima でJavaScript コー ドをパー スするJavaScript var

    esprima = require('esprima'); var program = 'var ast = "Abstract Syntax Tree"'; var ast = esprima.parseScript(program); console.log(ast); パー スした結果のAST オブジェクト { type: 'Program', body: [ { type: 'VariableDeclaration', declarations: [Object], kind: 'var' } ], sourceType: 'script' } 10
  11. JavaScript のAST JavaScript のAST はJavaScript オブジェクト JavaScript オブジェクトなので自由に変更できる。 var program

    = 'var ast = "Abstract Syntax Tree"'; var ast = esprima.parseScript(program); // var を const に変える! ast.body[0].kind = 'const'; { type: 'Program', body: [ { type: 'VariableDeclaration', declarations: [Object], kind: 'const' } ], sourceType: 'script' } 11
  12. AST をJavaScript コー ドに変換 ジェネレー タを使うとAST をコー ドに変換できる JS Code

    -> (Parser) -> AST -> (Generator) -> JS Code escodegen esprima などのAST からコー ドを生成する babel-generator babel のAST からコー ドを生成する 12
  13. AST をJavaScript コー ドに変換 var をconst に変換するコー ド: var esprima

    = require('esprima'); var escodegen = require('escodegen'); var program = 'var ast = "Abstract Syntax Tree"'; var ast = esprima.parseScript(program); // var を const に変える! ast.body[0].kind = 'const'; var code = escodegen.generate(ast); console.log(code); 変換したJavaScript: const ast = "Abstract Syntax Tree"'; 13
  14. AST を利用したツー ルの紹介 Babel ESLint browserify gasify by @fossamagna 14

  15. 参考資料 JavaScript AST を始める最初の一歩 Acorn: yet another JavaScript parser 15