Babelとは何か？JavaScriptコンパイラを解説

Babelは、モダンな構文や機能を、古いブラウザや環境でも実行できるコードへ変換するJavaScriptコンパイラです。

Babelは、新しい構文を既存のブラウザが理解できるバージョンへトランスパイルすることで、開発者が明日のJavaScriptを今日書けるようにしました。プラグインとpresetを通じて限りなく拡張可能であり、長年にわたりほぼすべてのフロントエンドbuildでデフォルトの変換レイヤーでした。

Babelとは

Babelは、モダンなJavaScript（およびJSX、TypeScript構文）を後方互換性のあるJavaScriptへコンパイルするツールチェーンです。ソースをASTへパースし、プラグインを介して変換を適用し、コードを再生成します。ターゲット環境に基づいて、欠けているランタイム機能向けのpolyfillを注入することもできます。

presetとプラグイン

個々の変換はプラグインであり、presetは厳選されたプラグインのまとまりです。"@babel/preset-env" は設定可能なブラウザ群をターゲットとし、必要な変換だけを正確に適用します。一方、"@babel/preset-react" と "@babel/preset-typescript" はJSXとTypeScriptの構文を扱います。このプラグインモデルこそが、Babelをほぼあらゆるニーズに適応させられる理由です。

configの例

configは適用するpresetを列挙します。

A minimal Babel config

// babel.config.json
{
  "presets": [
    ["@babel/preset-env", { "targets": "> 0.5%, not dead" }],
    "@babel/preset-react"
  ]
}

CI/CDでの役割

CIでは、Babelはバンドラーやtest runner内の変換ステップとして動作し、互換性のある出力を生成してテストファイルをコンパイルします。BabelはJavaScriptで単一スレッドであるため、大規模なbuildにおいて遅い部分になり得ます。多くのチームは今や速度のためにトランスパイルをesbuildやSWCに委ね、プラグインエコシステムが必要な箇所でBabelを維持しています。

代替ツール

SWCとesbuildは、それぞれRustとGoで書かれ、同様の変換をはるかに高速に実行します。TypeScriptコンパイラも構文をダウンレベル化できます。Babelは、比類のないプラグインエコシステムと、ターゲットやpolyfillに対するきめ細かな制御によって、依然として価値を保っています。

重要なポイント

Babelは、モダンなJavaScriptを広く互換性のあるコードへコンパイルします。
presetはプラグインをまとめ、preset-envは変換をターゲットブラウザに合わせて調整します。
SWCやesbuildより低速なため、多くのpipelineは純粋な速度のためにそれらを使います。