$30 off During Our Annual Pro Sale. View Details »

JavaScript AST

JavaScript AST

MURAKAMI Masahiko

December 08, 2017
Tweet

More Decks by MURAKAMI Masahiko

Other Decks in Technology

Transcript

  1. 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
  2. AST で何ができるの? コー ドを処理するツー ルが作れる Lint ツー ルやドキュメント生成、 コー ド生成も。

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

    の主要なパー サには以下のものがある。 babylon:Babel で使っているECMAScript パー サ esprima:estree が標準化しているJavaScript の AST フォー マットに準拠したパー サ espree:ESLint が使っているacorn ベー スのパー サ acorn:parse_js の作者がesprima に対抗して作成し たパー サ 9
  4. 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
  5. 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
  6. AST をJavaScript コー ドに変換 ジェネレー タを使うとAST をコー ドに変換できる JS Code

    -> (Parser) -> AST -> (Generator) -> JS Code escodegen esprima などのAST からコー ドを生成する babel-generator babel のAST からコー ドを生成する 12
  7. 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