Estraverse

EstraverseというJavaScript ASTのtraverseを行うライブラリがあります。

JavaScript ASTについては以下を参照して下さい。

このtraverse関数にはそれぞれのnodeの通り方としてenterとleaveというものが用意されています。

estraverse.traverse(ast, {
    enter: function (node, parent) {
        if (node.type == 'FunctionExpression' || node.type == 'FunctionDeclaration')
            return estraverse.VisitorOption.Skip;
    },
    leave: function (node, parent) {
        if (node.type == 'VariableDeclarator')
          console.log(node.id.name);
    }
});

という感じで書くとastをenterでは上から下へ、leaveでは下から上というイメージで探索することが出来ます。

木構造なので、enterではroot nodeからleaf nodeへ、leaveではleaf nodeからroot node(parent node)へという感じの流れになっていると思います。

自分は探索とかアルゴリズムが苦手なので、こういう動きが直感的にわからなかったため、どういう動きをするのか可視化するツールを書きました。

azu/visualize_estraverse

azu/visualize_estraverseにソースコードが置いてあります。

上記のように、適当にコードを入れてそれぞれのボタンを押せば、enter, leave又はenterとleave両方がどのような流れtraverseされるかが見られます。

ASTそのもの(JSON)も同じように可視化できると良さそうな気がしたのですが、イマイチいいUIとかが思いつかなかったのでコード上で色付けしています。

CodeMirrorの選択色を変えてやるという荒業でやってるので、かなり大雑把な実装です。