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

JavaScript AST

JavaScript AST

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. AST
    って何?
    4

    View full-size slide

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

    5

    View full-size slide

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

    6

    View full-size slide

  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

    View full-size slide

  8. AST
    で何ができるの?
    コー
    ドを処理するツー
    ルが作れる
    Lint
    ツー
    ルやドキュメント生成、
    コー
    ド生成も。
    新しい機能やライブラリに対応するようにコー
    ド変換するなど。
    パー
    サー
    によってはJSX, Flow
    なども対応可能
    CoffeeScript, TypeScript
    などのAltJS
    なんかのト
    ランスパイラ
    8

    View full-size slide

  9. JavaScript
    のパー

    AST
    はパー
    サでソー
    スコー
    ドをパー
    スして作る。
    JavaScript
    の主要なパー
    サには以下のものがある。
    babylon:Babel
    で使っているECMAScript
    パー

    esprima:estree
    が標準化しているJavaScript

    AST
    フォー
    マットに準拠したパー

    espree:ESLint
    が使っているacorn
    ベー
    スのパー

    acorn:parse_js
    の作者がesprima
    に対抗して作成し
    たパー

    9

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  12. AST
    をJavaScript
    コー
    ドに変換
    ジェネレー
    タを使うとAST
    をコー
    ドに変換できる
    JS Code -> (Parser) -> AST -> (Generator) -> JS Code
    escodegen
    esprima
    などのAST
    からコー
    ドを生成する
    babel-generator
    babel
    のAST
    からコー
    ドを生成する
    12

    View full-size slide

  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

    View full-size slide

  14. AST
    を利用したツー
    ルの紹介
    Babel
    ESLint
    browserify
    gasify by @fossamagna
    14

    View full-size slide

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

    View full-size slide