AST Explorer と可視化ガイド：抽象構文木を理解する
コードエディタが構文エラーをどのように検知しているのか、あるいは ESLint がどのようにコードを自動修正しているのか不思議に思ったことはありませんか？ その答えは 抽象構文木 (AST) にあります。AST はソースコードの構造をツリー状に表現したもので、Babel、Prettier、TypeScript といった現代の Web 開発ツールの基盤となっています。
1. 抽象構文木 (AST) とは何か？
コンパイラやツールがソースコードを読み取るとき、単なる長い文字列として処理するわけではありません。代わりに、いくつかのフェーズを経て処理されます。
- 字句解析 (Tokenizing)：コードを「トークン」（キーワード、識別子、演算子など）に分解します。
- 構文解析 (Parsing)：これらのトークンを、言語の文法を反映したツリー構造に配置します。
生成された AST は、コメント、空白、セミコロンなどの不要な詳細を削ぎ落とし（これが「抽象」と呼ばれる理由です）、コードの異なる部分間の構造的な関係に焦点を当てます。
2. なぜ AST はコンパイラ、リンター、フォーマッターに役立つのか？
AST は、コードを分析または変換するツールにとっての共通言語です。
- コンパイラ (例: Babel, TypeScript)：最終的な JavaScript を生成する前に、あるバージョン (例: ES6) の AST を別のバージョン (例: ES5) に変換します。
- リンター (例: ESLint)：AST をトラバース（走査）して、ルールに違反するパターン（例: "no-unused-vars"）を見つけ、さらにツリーを修正してエラーを「自動修正」することもできます。
- フォーマッター (例: Prettier)：コードをパースして AST に変換し、元のフォーマットを無視して、一貫したルールセットに従って一からコードを再生成します。
3. JS、TS、CSS の AST 可視化
言語によって、使用される AST の仕様は異なります。
- JavaScript/TypeScript (ESTree)：ほとんどの JS ツールは ESTree 仕様に従っています。このツリーでは、変数宣言は
VariableDeclarationノードとして表現され、その中にVariableDeclaratorノードが含まれます。 - CSS (PostCSS/CSSTree)：CSS も AST にパースされます。PostCSS などのツールはこれを使用して、ベンダープレフィックス、変数、ネストなどを処理します。
4. AST Explorer の使い方
AST を理解する最良の方法は、実際に動いている様子を見ることです。AST Explorer (astexplorer.net) は、開発者にとって不可欠なオンラインツールです。
- コードを貼り付ける：左側のペインにコードスニペットを入力します。
- パーサーを選択する：言語（JavaScript, CSS, JSON など）とパーサー（例:
@babel/parser,typescript）を選択します。 - ツリーを検査する：コードのさまざまな部分をクリックすると、右側のツリー構造で対応するノードが表示されます。
5. AST を活用している主なツール
- Babel：JavaScript をトランスパイルするための業界標準ツール。
- ESLint：最も人気のあるリンターで、
espreeパーサーを使用して AST を作成します。 - Prettier：独自のルールを持つコードフォーマッターで、複数のパーサー（Babel, TypeScript, Flow）を使用して AST を構築します。
- SWC：Rust ベースの高速なコンパイラで、変換に AST を使用します。
よくある質問 (FAQ)
Q: パーサー (Parser) とは何ですか？
A: パーサーは、ソースコードをインプットとして受け取り、AST をアウトプットとして生成するソフトウェアの一部です。例として Acorn, Babel Parser, Esprima などがあります。
Q: ソースマップ (Source Map) と AST の違いは何ですか？
A: AST は、分析や変換に使用される構造的な表現です。ソースマップは、変換・圧縮されたコードがオリジナルのソースコードとどのように対応しているかをブラウザに伝えるマッピングファイルで、デバッグを容易にします。
Q: AST を使って独自のリンターを作ることはできますか？
A: はい！ ESLint などのツールではカスタムルールを作成できます。AST 内の特定のノードタイプを「訪問」するビジター関数を定義し、特定の条件が満たされたときにエラーを報告するように設定します。
Tool3M の関連ツール
- コード圧縮ツール：AST を変換・簡略化することでコードがどのように圧縮されるかを確認できます。
- JSON フォーマッター：JSON データ構造をクリーンでインタラクティブなツリーとして可視化します。