Babelとは — 導入から設定、主要プリセットとポリフィル（core-js）の使い方を初心者向けに徹底解説

2025年11月20日 最終更新日時 : 2025年11月20日 エバープレイ編集部

Babel とは

Babel（ベベル）は、主にJavaScriptの「トランスパイラ（transpiler）」として使われるツールチェーンです。最新のJavaScript（ECMAScript）構文や提案段階の構文を、古い環境でも動作するコードに変換（トランスパイル）することを目的としています。加えて、構文変換だけでなく、AST（抽象構文木）を操作するためのプラグイン/プリセットの仕組みや、ヘルパー関数の再利用、必要なポリフィルの注入などの機能を持ち、モダンなフロントエンド開発ではほぼ標準的に採用されてきました。

なぜBabelが必要なのか

  • ECMAScriptは頻繁に進化し、新しい構文（例：async/await、classフィールド、Optional chainingなど）が導入されるが、すべてのブラウザや実行環境が同時に対応するわけではない。
  • 既存のユーザー環境（古いブラウザや特定のNode.jsバージョン）でコードを安全に動作させるために、互換性を確保する必要がある。
  • TypeScriptのように型を扱う仕組みとは異なり、Babelは構文の変換を主目的とするため、より細かい構文変換やプラグインによるカスタマイズが可能である。

主な機能

  • 構文トランスパイル（ESNext → 互換コード）
  • ASTベースの変換（プラグインで任意の変換が可能）
  • プリセット（複数プラグインの集合体）による簡単な設定（@babel/preset-env、@babel/preset-reactなど）
  • ポリフィルの注入（core-jsと組み合わせた useBuiltIns オプションなど）
  • ヘルパー関数の重複排除（@babel/plugin-transform-runtime と @babel/runtime）
  • ランタイムでの動的トランスパイル（@babel/register）※本番用途には非推奨

仕組み — AST を中心にした変換フロー

Babelは大きく次のステップで動作します。

  • パース: ソースコードをパーサ（現在は @babel/parser）でASTに変換。
  • トラバース&トランスフォーム: AST を巡回し、各ノードに対してプラグインが変更を加える（@babel/traverse とプラグイン）。
  • コード生成: 変換後のASTからコードを生成（@babel/generator）。

この設計により、個別の構文変換をプラグインとして分離したり、カスタムAST操作を行う形で高度な変換が実現できます。

よく使うプリセットとプラグイン

  • @babel/preset-env: ターゲット環境（browserslist）に応じて必要な変換だけを有効にするプリセット。古い「es2015」等のプリセットはこれに集約されました。
  • @babel/preset-react: JSXやReact固有の構文を変換。
  • @babel/preset-typescript: TypeScriptの構文をJSに変換（型情報は消される。型チェックは行わない）。
  • @babel/plugin-transform-runtime: ヘルパー関数を共通化し、グローバルなポリフィル注入を避ける。corejsオプションでpolyfillを提供する設定も可能（別途ランタイムパッケージが必要）。

ポリフィルの扱い — core-js と useBuiltIns

構文変換だけでは補えない「組み込みオブジェクトの機能（Promise, Array.prototype.includes 等）」にはポリフィルが必要です。Babel単体にはポリフィルは含まれないため、通常は core-js と組み合わせます。

  • useBuiltIns: "entry" — エントリポイントで core-js を全体的に読み込む（バンドル内で明示 import する）
  • useBuiltIns: "usage" — 各ファイルを解析し、実際に使われている機能分だけ import を自動注入する

注意: regenerator（async/await → generator変換のランタイム）は別途 regenerator-runtime が必要になるケースがあります。また、@babel/plugin-transform-runtime を使うとグローバルを汚さずにヘルパーや一部ポリフィルを共有できますが、用途に応じて選ぶ必要があります。

設定ファイルと実例

基本的な .babelrc（JSON）例:

{
  "presets": [
    ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }],
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", { "corejs": false }]
  ]
}

NodeスクリプトやCLIでは、babel-cli（@babel/cli）やバンドラのローダー（webpackでは babel-loader）を使ってビルドします。開発時は cacheDirectory オプションやキャッシュプラグインを有効にすると高速化できます。

ビルドツールとの統合と最近の潮流

  • Webpack: babel-loader を通して利用。Babelは細かな変換を担う一方で、バンドルやコード分割はWebpackが担当。
  • Rollup/Parcel: プラグインや内蔵トランスパイル機能を使って統合。
  • 近年は SWC や esbuild のような高速な代替コンパイラが注目されている（トランスパイル速度で優れる）が、Babelのプラグインエコシステムや柔軟性を完全に代替するにはまだ差がある場面もある。

注意点・限界

  • Babelは型チェックを行わない（@babel/preset-typescript は型を削るだけ）。型安全を求めるならTypeScriptのコンパイラや型チェックプロセスが必要。
  • ポリフィルの追加はバンドルサイズに影響する。必要なものだけを注入する設定（usage）や、ランタイム共有（transform-runtime）を活用する。
  • 本番での動的トランスパイル（@babel/register）は推奨されない。ビルド時にコンパイルしておくほうが安全で高速。

プラグイン開発とエコシステム

BabelのプラグインはASTを受け取り、訪問・書き換えを行う関数として実装されます。公式ドキュメントにはプラグイン作成ガイドがあり、ユースケースに応じて独自の変換を追加できます。多数のコミュニティ製プラグインが存在し、新しい言語機能の提案（TC39 proposals）に対応するための個別プラグインも流通しています。

まとめ

Babelは「モダンなJavaScriptを現実の実行環境で動かす」ための中核ツールです。構文変換、ポリフィル注入、AST操作による柔軟な拡張性などを備え、長年にわたりフロントエンド開発の標準となってきました。一方で性能面や新しいビルドツールの登場により、プロジェクトの要件（ビルド速度、バンドルサイズ、互換性）に応じてBabelと他ツールの組み合わせや代替を検討することが重要です。

参考文献

カテゴリー
IT
前の記事
ヴァディム・レーピン入門：技術と詩情が光るヴァイオリン名演・名盤の聴きどころNew!!
2025年11月20日
次の記事
WebAssembly（Wasm）とは？仕組み・性能・WASI・導入の実務ガイドNew!!
2025年11月20日