ASTを扱うツールの作り方 about efcl.github.io

[azu]

必要とされる知識

• JavaScriptの文法
• ECMAScriptという認識
• Node.js(コマンドラインツールを書いたことがあるといい)

学べること

• ASTとは何か
• コードからASTの作り方(パース)
• ASTの変換とは何か
• ASTをコードにする方法(ジェネレータ)
  • SourceMapについても
• ASTツールの作法

理論よりも実際にツールを作りながら学べる感じがいいと思う。
現実味があって小さめの良い題材が必要

ASTツール(モジュール)の作法

これが一番の課題でそんなものはちゃんと決まってない気がするけど、
ただ一点だけASTツールはASTを扱えるインターフェースを提供するという事についてだけ書いておきたい気がする。

• https://twitter.com/t_wada/status/505637359736459264

今、ツールの入力として以下の3つがある気がする。

• ファイルパス
• ファイルのコンテンツ
• AST

これらをそれぞれモジュールレベルまで分けるのは面倒な事もありそうだけど、インターフェースレベルでは分けておくといいという話があると人類の役に立つと思う。

SourceMapが絡むと、一見関係ないパスとコンテンツが絡み合ってしまうケースがある気がするので、そこを上手く解くパターンの提供が必要そう。

• aster とかはある一定の作法を前提としてる
• esnextは作法がある感じなので題材に近そう
• ただ、AST Typesを使うのでそれよりはもう少しプレーンなやり方にしたい

[azu]

• 真似したくなるような例題

[azu]

草案

目的

• ASTを使ったツールがどのような仕組みで動いているのか知ること
• JavaScriptにおけるASTは身近な存在であることを知ること
• ASTを知ることで、そのライブラリ/ツールの設計が問題無いのかを描くことでき、判断の基準の一つと使えるようになること

パースをしてみよう

ASTをみてみよう

ASTチェッカーを書いてみよう

• ASTをread onlyで扱う

ASTを変更してみよう

• ASTを変更してみる

ASTからコードを生成してみよう

• escodegen

応用編

• ライブラリ?
• 仕様
• パーサ

[azu]

• console.log を有無をチェックするツール
• console.log を削除するツール

[azu]

単純にconsole.logを扱うだけだとイマイチな気がする。

if(is_debug){
    console.log("");
}

とかみたいな構造でマッチした場合とか