React 開発において、JSX はユーザー インターフェイスを構築するための重要な構文となっています。ただし、ブラウザは JSX を直接理解できないため、Babel などのツールを使用して JSX をブラウザで実行可能な JavaScript コードに変換する必要があります。
1. Babel と AST の概要
Babel は広く使用されている JavaScript コンパイル ツールで、新しいバージョンの JavaScript コードを古いバージョンのコードに変換して、さまざまなブラウザーや環境で正常に動作するようにするために使用されます。AST は Abstract Syntax Tree の頭字語で、コード構造を表すために使用されるツリー状のデータ構造です。
2. JSX を AST に変換するプロセス
JSX を AST に変換するプロセスは、解析と変換という 2 つの主要なステップに分けることができます。
JSXコード:
const element = <div className="container">Hello, world!</div>;
1. 解析:
解析フェーズでは、Babel はパーサーを使用して JSX コードをトークン (トークン) に分解し、対応する AST を構築します。この AST はソース コードの構造と構文を表すことができ、さらなる処理の基礎となります。
2. 変換:
変換フェーズでは、Babel はプラグインを使用して、JSX 関連の構文をプレーンな JavaScript コードに変換します。このプロセスには、JSX 要素のReact.createElement呼び出しへの変換や JSX 属性の処理などが含まれます。Babel は変換を通じて、JSX を特定の構文からブラウザーが理解できる汎用の JavaScript コードに変換します。
JSX を AST にコンパイルするコードは次のとおりです。
{
type: 'JSXElement',
openingElement: {
type: 'JSXOpeningElement',
name: {
type: 'JSXIdentifier',
name: 'div',
},
attributes: [
{
type: 'JSXAttribute',
name: {
type: 'JSXIdentifier',
name: 'className',
},
value: {
type: 'StringLiteral',
value: 'container',
},
},
],
selfClosing: false,
},
children: [
{
type: 'JSXText',
value: 'Hello, world!',
raw: 'Hello, world!',
},
],
closingElement: {
type: 'JSXClosingElement',
name: {
type: 'JSXIdentifier',
name: 'div',
},
},
}
3. AST を JavaScript コードに変換するプロセス
AST を JavaScript コードに変換するプロセスには、コード生成の段階が含まれます。
生成フェーズでは、Babel はジェネレーターを使用して AST を走査し、AST ノードに基づいて対応する JavaScript コードを生成します。ジェネレーターは、AST ノードを変数、関数呼び出し、演算子などを含む適切な JavaScript コードにマップします。生成フェーズを通じて、Babel は変換された AST を最終的な JavaScript コードに変換します。
AST を JavaScript コードに変換するコードは次のとおりです。
const element = /*#__PURE__*/React.createElement("div", {
className: "container"
}, "Hello, world!");