Babel

この用語をシェア

Babelとは

Babel（バベル）は、JavaScriptトランスパイラーと呼ばれるツールで、最新のJavaScript構文（ES6/ES2015以降）を、古いブラウザでも動作する互換性のあるJavaScriptコードに自動変換します。「バベルの塔」の名前の通り、異なる言語（JavaScriptのバージョン）間の橋渡しを行う重要な役割を担っています。

2014年にSebastian McKenzieによって開発され、当初は「6to5」という名前でした。その後「Babel」に改名され、現在ではモダンJavaScript開発に不可欠なツールとして幅広く採用されています。開発は現在、非営利のオープンソースコレクティブとして継続されており、コアパッケージは@babel/coreを中心に、パーサー・変換器・コード生成器がそれぞれ独立したnpmパッケージとして公開・保守されています。

Babelが登場した2015年前後は、ES2015（ES6）で追加されたクラス構文・アロー関数・letconst・分割代入などの新機能を、当時主流だったInternet Explorer 11や旧世代のAndroidブラウザで動かす手段がほとんどありませんでした。Babelはこの「新しい構文で書きたい」というニーズと「古い環境でも動かしたい」という制約の両方を満たすために生まれたツールであり、フロントエンド開発が急速にモダン化する過程を陰で支えた立役者です。厳密には「コンパイラ」と呼ばれることも多いですが、変換前後の抽象度がほぼ同じ（JavaScriptからJavaScriptへの変換）である点から、一般には「トランスパイラー（Transpiler）」という呼称が定着しています。

なお、Babel単体はソースコードの変換に特化したツールであり、複数ファイルを1つにまとめる「バンドル」機能は持ちません。バンドルはWebpackやViteなど別のツールが担当し、Babelはその内部で構文変換エンジンとして呼び出されるのが一般的な構成です。この役割分担を理解しておくと、後述するWebpackやSWC、esbuildとの違いも整理しやすくなります。

Babelの仕組み（内部アーキテクチャ）

Babelの変換処理は、一般的なコンパイラと同様に「パース（構文解析）」「変換（トランスフォーム）」「生成（コード出力）」という3段階のパイプラインで構成されています。それぞれが独立したnpmパッケージとして実装されている点がBabelの大きな特徴です。

このAST中心の設計により、Babelは単なる文字列置換ではなく構文レベルでの正確な変換を実現しています。また、AST Explorerのようなツールを使うと、任意のコードがBabelによってどのようなASTに解析されるかを可視化でき、プラグイン開発やデバッグの際によく利用されます。

1. 構文変換（Syntax Transform）

ES6+の新しい構文（アロー関数、テンプレートリテラル、分割代入など）を、ES5互換のコードに自動変換します。これにより、最新の書きやすい構文を使いながら、幅広いブラウザサポートを実現できます。

2. ポリフィルサポート

新しいAPI（Promise、Array.includes()、Object.assignなど）を古い環境で動作させるためのポリフィルを自動追加できます。@babel/polyfillや@babel/preset-envと組み合わせて使用します。

3. プラグインアーキテクチャ

高度にモジュール化されたプラグインシステムにより、必要な変換のみを選択して適用できます。各変換は独立したプラグインとして提供され、細かい制御が可能です。

4. プリセット機能

よく使われるプラグインの組み合わせをプリセットとして提供し、設定を簡略化します。@babel/preset-env、@babel/preset-reactなどが人気です。

利用場面

具体例・ユースケース

Babelが実際に何をしているのかは、変換前後のコードを見比べると直感的に理解できます。以下は、アロー関数・分割代入・テンプレートリテラルを含むES2015+コードを、@babel/preset-envでIE11相当の環境向けに変換した例です。

変換前（ES2015+で記述したコード）

const greetUsers = (users) => {
  const { name, role = "guest" } = users[0];
  return `こんにちは、${name}さん（${role}）`;
};

export default greetUsers;

変換後（Babelが生成するES5相当のコード・簡略化）

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = void 0;

var greetUsers = function greetUsers(users) {
  var _users$ = users[0],
      name = _users$.name,
      _users$$role = _users$.role,
      role = _users$$role === undefined ? "guest" : _users$$role;
  return "こんにちは、" + name + "さん（" + role + "）";
};

var _default = greetUsers;
exports.default = _default;

アロー関数は通常の関数式に、分割代入はプロパティアクセスとデフォルト値判定の組み合わせに、テンプレートリテラルは文字列連結に、それぞれ書き換えられていることが分かります。ES ModulesのimportexportもCommonJS形式（exports/require）に変換されており、これによりNode.jsの古いバージョンや一部のビルドツールでもそのまま読み込めるようになります。

実務でBabelが登場する典型的な場面としては、次のようなものが挙げられます。

• Create React App（CRA）で作られたReactプロジェクト：内部でBabelがJSXとES6+構文の変換を担当（CRA自体は2023年以降メンテナンスが停滞しており、新規プロジェクトではViteベースの構成が主流になっています）
• Jestによるユニットテスト：babel-jestを通じて、テストコードやソース側のESMコードをJestが実行できるCommonJS形式に変換
• Storybookでのコンポーネントカタログ構築：JSXやTypeScriptを含むコンポーネントファイルをブラウザで表示可能な形式に変換
• 社内向け業務システムのフロントエンド刷新：旧システムの利用者が古いブラウザ・古いOSの端末を使い続けているケースで、最新構文を使いながら互換性を維持する目的で導入
• npmパッケージのマルチターゲットビルド：同じソースコードから、モダンブラウザ向け・レガシー環境向け・Node.js向けなど複数のビルド成果物を出力

メリット・デメリット（注意点）

実務では、まず.browserslistrcやpackage.jsonのbrowserslistフィールドで「サポート対象ブラウザ」を明示的に定義し、@babel/preset-envにその情報を参照させることで、必要最小限の変換に絞り込むのが定石です。対象ブラウザを絞らずにデフォルト設定のまま使うと、実際には不要な変換やポリフィルまで含まれてしまい、出力コードが無駄に肥大化する原因になります。

混同されやすい用語・類似技術との違い

Babelはビルドツール群の中でも役割が独特なため、隣接する技術と混同されがちです。それぞれの立ち位置を整理します。

まとめると、Babelは「構文変換」に特化したツールであり、型チェック（tsc）、バンドル（Webpack）、圧縮（Terser）、ポリフィル実装（core-js）はいずれも別のツールが担当します。これらを組み合わせて初めて、実運用に耐えるビルドパイプラインが完成するという点を理解しておくと、エラーの切り分けや技術選定がしやすくなります。

基本的な使い方

インストール

npm/yarnでコアパッケージをインストールします：

基本設定（babel.config.js）

プロジェクトルートに設定ファイルを作成します：

コンパイル実行

CLIまたはビルドツールと組み合わせて実行：

関連技術との関係

• Webpack：babel-loaderでWebpackビルドプロセスに統合
• Vite：開発時のトランスパイルは標準でesbuildが担当するが、React Fast Refresh対応など一部の公式プラグイン（@vitejs/plugin-react）は内部でBabelを利用
• TypeScript：@babel/preset-typescriptでTypeScriptコードを変換（型チェックは別途必要）
• React：@babel/preset-reactでJSX構文をサポート。またReact 19以降で導入されたReact Compilerも、Babelプラグイン（babel-plugin-react-compiler）として提供されている
• Vue.js：Vue CLIに内蔵され、SFCの処理を担当
• ESLint：@babel/eslint-parserで最新構文の解析を支援
• Jest：babel-jestを通じてテストコードとソースコードの変換を担当し、ESM/CJSの差異を吸収

実務での導入・運用のポイント

実際にBabelを本番プロジェクトへ導入・運用する際は、以下のような点を意識しておくと、トラブルを避けやすくなります。

• browserslistを必ず設定する：.browserslistrcやpackage.jsonのbrowserslistフィールドでサポート対象ブラウザを明示し、preset-envに過不足のない変換をさせる
• @babel/plugin-transform-runtimeの活用：ヘルパー関数やポリフィルの重複挿入を避け、出力コードのサイズを抑える。特にライブラリ開発では必須に近い
• ソースマップを有効にする：sourceMaps: trueを設定し、変換後のコードでもブラウザの開発者ツールで元のソース位置をデバッグできるようにする
• 設定ファイルの形式を統一する：プロジェクト全体に適用する場合はbabel.config.js（ルート集約型）、パッケージ単位で個別設定したい場合は.babelrc（ファイル階層型）を使い分ける
• モノレポでの設定共有：複数パッケージで設定を使い回す場合は、共通設定パッケージを作りプリセットとして参照させると保守性が上がる
• ビルド速度が問題になったら移行を検討：ビルド時間がボトルネックになっている場合は、SWCやesbuildへの部分的な置き換え（例：本番ビルドのみBabel、開発時はesbuild）も選択肢になる

2025〜2026年の最新動向

ここ数年でJavaScriptのビルドツールチェーンは大きく再編されており、Babelの立ち位置にも変化が見られます。

• 高速ツールチェーンへの移行が継続：Next.jsはv12でデフォルトのコンパイラをBabelからSWCへ切り替えており、Vite・Remixなど比較的新しいフレームワークも開発時のトランスパイルにesbuildを採用するなど、ビルド速度を重視した非JavaScript実装のツールへの移行が定着しつつあります。
• ブラウザのネイティブサポート拡大：主要ブラウザ（Chrome、Firefox、Safari、Edge）の自動更新が進んだことで、ES2015〜ES2022程度の構文の多くはトランスパイルなしでも動作するようになっており、「とりあえずBabelで変換しておく」という守り一辺倒の使い方は徐々に減少傾向にあります。一方で、業務システムなど古い端末・古いWebViewを使い続けざるを得ない現場では、依然としてBabelによる変換とcore-jsによるポリフィルが必要とされています。
• プラグインエコシステムとしての価値は継続：ビルド速度そのものではSWCやesbuildに譲る場面が増えた一方、Babelはプラグインを自作しやすいAST操作の柔軟性から、コードモッド（大規模なコード自動書き換え）や実験的な言語提案（TC39のStage 1〜3提案）を試すためのプラットフォームとして根強く使われ続けています。
• React Compilerとの連携：React陣営が提供する自動メモ化コンパイラ「React Compiler」は、Babelプラグインの形で配布されており、既存のBabelベースのビルドパイプラインに組み込んで利用する構成が想定されています。
• Node.js側のモダン化：Node.jsのLTSバージョンが新しいECMAScript機能に順次対応してきたことで、サーバーサイドのコードではBabelを使わずネイティブのESMをそのまま実行するプロジェクトも増えています。

総じて、「フロントエンドのビルドに使うトランスパイラはBabel一択」という状況からは変化し、プロジェクトの要件（対象ブラウザ、ビルド速度、既存資産）に応じてBabel／SWC／esbuildを選択するという時代に移行しています。とはいえBabelは現在も活発にメンテナンスされており、特に「レガシー環境対応」「独自のAST変換」「コードモッド」の分野では代替が効きにくい選択肢であり続けています。

関連用語

• Webpack - モジュールバンドラー。babel-loaderを通じてBabelと連携
• Vite - 開発時はesbuildを利用する次世代ビルドツール
• JavaScript - Babelが変換対象とする言語そのもの
• TypeScript - 型注釈の除去にBabelを利用できる静的型付け言語
• React - JSX変換でBabelが広く使われるUIライブラリ
• ESLint - @babel/eslint-parserで最新構文を解析可能な静的解析ツール

外部リンク

• Babel公式サイト
• @babel/preset-env 公式ドキュメント
• Babel GitHubリポジトリ
• AST Explorer（AST可視化ツール）
• Browserslist GitHubリポジトリ

この用語についてもっと詳しく

Babelに関するご質問や、システム導入のご相談など、お気軽にお問い合わせください。