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