JavaScript AST

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