JavaScriptのトランスパイルを知ろう

JavaScriptのトランスパイルを知ろう:

JavaScriptのトランスパイル

この記事は大学の課題のためにBabelトランスパイルに

ついてまとめたのでアーカイブとして残す目的で書いています。

トランスパイルはある言語で記述されたコードを

別の言語で記述された同等なコードに変換することです。

ここでは主にJavaScript におけるトランスパイルについて説明します。

JavaScriptは主にWebブラウザエンジン上で動作することを目的とした

スクリプト言語です。

JavaScriptの標準規格であるECMAScript2015(ES6)以降の

規格に対応していないWebブラウザエンジンは未だ多く、

開発者はWebブラウザのバージョンに合わせた言語仕様を考慮する

必要があります。

しかしWebブラウザのバージョンごとに言語仕様を

把握するための技術的コストは高く問題となります。

そこで問題を解決するためにJavaScriptのトランスパイルが用いられます。

トランスパイルを実行することでES6以降の規格で記述されたコードを

ECMAScript5(ES5)の規格で記述されたコードに変換できます。

JavaScriptのトランスパイラについて

トランスパイルツールの1つとしてBabelが挙げられます。

Babel は ES6 以降の規格で 記述されたコードに対して、

字句解析, 構文解析, 構文変換などを行いES5の規格で記述された

コードへのトランスパイルを行います。

しかし、Babel を用いたトランスパイルのみではブラウザのサポートに

よっては対応しきれない場合がありその場合、実行時にPolyfillを適用することでブラウザへの対応を行なっています。

今回は、Babelのトランスパイルのみについて説明します。

Babelのトランスパイル

Babelのトランスパイルは主にパース/変換/生成の3つのステージに分かれます。

パース

パースには、2つの字句解析フェーズと構文解析フェーズがあります。

字句解析では、コードを基に生成した抽象構文木(AST)を基に

各ノードをトークンとしてフラットに並べます。

構文解析ではフラットに並べたトークン

(字句解析で得られた情報が紐づけられている) を基にコードの構造を

加工しやすい形で表現した抽象構文木を再構成します。

実際にBabelが抽象構文木の生成に利用するESTreeを用いて

以下の構文から抽象構文木を生成してみます。

a*b+c 

JSON形式で以下のように抽象構文木が表現されます。

ast.js

{ 
    "type": "Program", 
    "start": 0, 
    "end": 7, 
    "body": [ 
      { 
        "type": "ExpressionStatement", 
        "start": 1, 
        "end": 6, 
        "expression": { 
          "type": "BinaryExpression", 
          "start": 1, 
          "end": 6, 
          "left": { 
            "type": "BinaryExpression", 
            "start": 1, 
            "end": 4, 
            "left": { 
              "type": "Identifier", 
              "start": 1, 
              "end": 2, 
              "name": "a" 
            }, 
            "operator": "*", 
            "right": { 
              "type": "Identifier", 
              "start": 3, 
              "end": 4, 
              "name": "b" 
            } 
          }, 
          "operator": "+", 
          "right": { 
            "type": "Identifier", 
            "start": 5, 
            "end": 6, 
            "name": "c" 
          } 
        } 
      } 
    ] 
  } 

変換

生成した抽象構文木を走査し(意味解析)、

ノードの追加/変更/削除などの処理を行います。

生成

再構築した抽象構文木の情報を基に文字列（コード）を生成します。

Babelを用いたトランスパイルの例

実際に以下のソースコードを対象にBabelを用いたトランスパイルを行います。

index.js

class test{  
  constructor(height, width) { 
    this.height = height; 
    this.width = width;  
  } 
} 

Babelを用いたトランスパイル後

index.js

function _classCallCheck(instance, Constructor){ 
  if (!(instance instanceof Constructor)) { 
    throw new TypeError("Cannot call a class as a function"); } 
  } 
var test = function test(height, width) { 
  _classCallCheck(this, test); 
  this.height = height;  
  this.width = width; 
}; 

結果からtestクラスは、関数を用いて擬似的にクラスを表現した形式へと

変換されてい ることがわかります。

ES5の規格では対応していない、JavaScriptにおいて

オブジェクト指向を表現するために用いられるclass記法がES5の規格である、
プロトタイプベース記法へと変換されていることがわかります。

参考サイト: https://github.com/jamiebuilds/babel-handbook

以上です。

なにかご指摘等ありましたらお願いします。