IT 技書の森

AST

ソースコードの構文構造をツリー形式で表現したデータ構造

ランタイム開発ツール

AST とは

AST (Abstract Syntax Tree、抽象構文木) は、ソースコードの構文構造をツリー形式で表現したデータ構造である。コンパイラ、トランスパイラ、リンター、フォーマッターなど、コードを解析・変換するツールの基盤技術だ。

ソースコードから AST へ

// ソースコード
const x = 1 + 2;

// AST (簡略化)
// VariableDeclaration (const)
//   └── VariableDeclarator
//         ├── Identifier: "x"
//         └── BinaryExpression (+)
//               ├── NumericLiteral: 1
//               └── NumericLiteral: 2

AST を使うツール

ツール AST の用途
TypeScript 型チェック、JS への変換
ESLint コードの静的解析、ルール違反の検出
Prettier コードのフォーマット
Babel ES6+ → ES5 のトランスパイル
SWC 高速トランスパイル (Rust 製)
webpack / Vite import の依存関係解析
jscodeshift 大規模なコード変換 (codemod)

ESLint カスタムルール

// no-console ルールの簡略版
module.exports = {
  create(context) {
    return {
      // AST ノードの種類で訪問するノードを指定
      CallExpression(node) {
        if (node.callee.object?.name === 'console') {
          context.report({ node, message: 'console の使用は禁止です' });
        }
      },
    };
  },
};

ESLint はソースコードを AST に変換し、各ノードをルールに渡す。ルールはノードの種類と内容を検査し、違反を報告する。

AST Explorer

AST Explorer で、ソースコードがどのような AST に変換されるかをブラウザ上で確認できる。ESLint ルールや Babel プラグインの開発に必須のツールだ。

コンパイルのパイプライン

ソースコード → 字句解析 (トークン列) → 構文解析 (AST) → 変換 → コード生成
  1. 字句解析 (Lexer): ソースコードをトークン列に分割
  2. 構文解析 (Parser): トークン列を AST に変換
  3. 変換 (Transform): AST を操作 (最適化、型チェック)
  4. コード生成 (Codegen): AST からコードを出力

AST の関連書籍も参考になる。

関連用語