random.tagucch.dev

技術とかの雑なToday I Learnedメモ

Babelから学ぶトランスパイルの記事
JavaScript
Babel

Babelから学ぶトランスパイルの記事

モダンJSの一時代を築いたBabelから学ぶトランスパイル

読んだのでメモ。

一時代を築いた Babel

  • そもそも「バブル」と読むのを知らなかった……んだけど、たぶんもう「バベル」のほうが圧倒的に通じるまで広まってるよね
  • JavaScript のパーサについては自分は本当に無知
    • 有名どころであると言われている ESTree すら初耳
    • そもそも AST 変換とかも正直あんまり分かっていないのでこの記事で学べることはとても多かった
  • トランスパイルについての解説(実際にパーサを使ったライブラリがどう処理しているかの話)
  • 最近は IE のサポート終了や esbuild と swc の登場などでちょっとずつ使われなくなっていくのではないか
  • ただ実際に時代を築くほどのライブラリとなり多くの人に使われた実績のある Babel の根幹である言語処理を学ぶことの意義は大きい、自分もそう思う

トランスパイルについて

  • 1 字句解析
  • 2 構文解析
    • ここまでが「解析」フェーズ
  • 3 トランスフォーム処理
  • 4 生成

解析

  • 与えられた文字列を解析して AST (Abstruct Syntax Tree) を作成する
    • AST = 抽象構文木
    • 名前だけは知ってる程度の認識
  • JavaScript のコードから AST を生成する

字句解析 (Lexical Analysis)

  • 与えられた JavaScript (TypeScript) コードを解析し、トークンの ID と種別を識別できるトークンストリームを生成
  • 生成したトークンストリームを格納した配列を生成
  • 記事の例は以下
const square = (n) => {
  return n * n
}

[
  { type: 'Program', start: 0, end: 40  },
  { type: 'VariableDeclaration', start: 0, end: 40 },
  { type: 'VariableDeclaration', start: 6, end: 40 },
  { type: 'Identifier', start: 6, end: 12, name: 'square' },
  { type: 'ArrowFunctionExpression', start: 15, end: 40, expression: false, generator: false, async: false },
  ...
]

さっぱり分からん……

  • type を識別することで 走査(Traversal)を行うことができる ← ???
  • type の部分は VariableDeclaration が変数宣言で Identifier が識別子で……識別子ってなんだっけ？
  • とりあえず今の自分ではこれを解析することは不可能

構文解析 (Syntactic Analysis)

  • Lexical Analysis で生成された配列を利用して構造を最適化し AST を作る
  • 長いので記事内のコードは割愛するが、「これが AST か……」という初見の感想
  • Lexical Analysis でも登場していたけど start と end はなんの数値なんだろう、その要素の行内の開始位置と終了位置とか？
  • サンプルコードの n * n の部分は operator を挟んで左右なのですぐに発見できたりした
  • が、それ以外は全然わからん

トランスフォーム (Transform)

  • 生成された AST をもとに最適化
    • コンパイラやトランスパイラごとに処理方法が異なるのでそれに最適化する
  • このフェーズが最も複雑らしい

生成 (Generate)

  • トランスフォームで最適化された AST をもとにコードを生成する
  • つまりこれがコンパイルやトランスパイルした結果のコード

まとめ

  • 完全初心者なので概要をわかりやすく説明してくれていてとても勉強になった
  • コンパイルやトランスパイルについては興味があるので実際に AST の部分などもっと掘り下げていきたい
  • こういうの考える人ほんとすごい
← Back To Home