AST

抽象構文木（ちゅうしょうこうぶんぎ）

AST を分かりやすく

ASTっていうのは、ソースコードを解析して生成される「抽象的な」構文木のことを指します。つまり、コードを木の形に変換することで、コンピュータが理解しやすい形にするわけです。

一体ナンノコッチャ？って思いますよね？少しフランクに例え話を使って説明してみますね。

まず、原始的な文書（つまりコード）を想像してみてください。これが森です。森は見た目では理解しにくいですよね。道があるのか、何が生えているのか、全く分からないですよね。

ここで、森林学者（パーサ）が登場します。森林学者は森を詳しく調査して、各種の情報を収集します。木の種類、生態系、地形、水源の位置などです。そして、その情報を元に「抽象的な森の地図」（AST）を作成します。

この地図（AST）があれば、誰でも森（コード）の構造を理解できます。どこにどの木があるのか、どこに川が流れているのか、どこに山があるのか、一目瞭然です。同様に、ASTを使えば、コードのどの部分が関数で、どの部分が変数で、どの部分が式なのかが一目で分かります。

これは、例えばBabelのようなトランスパイラや、ESLintのようなリントツールで役立ちます。これらのツールはASTを使ってコードを解析し、変換したり、問題を検出したりします。

TypeScriptでも、あなたの書いたTSコードをJavaScriptに変換する時、まずTSコードをASTに変換し、そのASTを元にJavaScriptコードを生成します。つまり、ASTはコードの変換や解析の中心的な役割を果たすわけなんですよ。

ちょっと難しい話かもしれませんが、ASTはコードを解析し、それを使って新しいことをするための基礎となるツールなんですね。これって結構すごいことだと思いませんか？

以上がASTの説明になります。一体ナンノコッチャ？から少しは理解できたでしょうか？それが森林学者（パーサ）の仕事なんですよね。

AST は、Next.js や TypeScript などの JavaScript のフレームワークや言語でよく使われる技術です。AST を使って、コードのリファクタリングや静的解析、エラー検出などを行うことができます。

あなたが、自分でプログラムを書いているとします。次のコードを書いたとします。

function sum(a, b) {
  return a + b
}

const result = sum(1, 2)
console.log(result)

このコードは、2 つの数値を足して、その結果を出力する単純なプログラムです。

このプログラムを AST に変換すると、以下のようなデータ構造が生成されます。

{
  "type": "Program",
  "body": [
    {
      "type": "FunctionDeclaration",
      "id": {
        "type": "Identifier",
        "name": "sum"
      },
      "params": [
        {
          "type": "Identifier",
          "name": "a"
        },
        {
          "type": "Identifier",
          "name": "b"
        }
      ],
      "body": {
        "type": "BlockStatement",
        "body": [
          {
            "type": "ReturnStatement",
            "argument": {
              "type": "BinaryExpression",
              "operator": "+",
              "left": {
                "type": "Identifier",
                "name": "a"
              },
              "right": {
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        ]
      }
    },
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "result"
          },
          "init": {
            "type": "CallExpression",
            "callee": {
              "type": "Identifier",
              "name": "sum"
            },
            "arguments": [
              {
                "type": "Literal",
                "value": 1
              },
              {
                "type": "Literal",
                "value": 2
              }
            ]
          }
        }
      ],
      "kind": "const"
    },
    {
      "type": "ExpressionStatement",
      "expression": {
        "type": "CallExpression",
        "callee": {
          "type": "MemberExpression",
          "object": {
            "type": "Identifier",
            "name": "console"
          },
          "property": {
            "type": "log"
          },
          "arguments": [
            {
              "type": "Identifier",
              "name": "result"
            }
          ]
        }
      }
    }
  ]
}

このように、AST は、プログラムの構文を解析し、構造化されたデータを生成します。このデータを使って、プログラムの構造を理解したり、プログラムの解析を行ったりすることができます。

役割

AST は、プログラムの静的解析において重要な役割を果たしています。例えば、ESLint や TypeScript の静的解析は、AST を使って行われています。また、AST を利用して、コードのリファクタリングや最適化を行うことができます。

以上のように、AST について、Next.js や TypeScript を使った簡単な例を交えて解説しました。AST は、プログラムの解析や静的解析に欠かせない技術であり、JavaScript のフレームワークや言語において広く使われています。

Next.js を学ぶ一覧へ