Babel ばべる

---

Babelとは

Babel（バベル） は、最新の JavaScript 構文（ES2015以降）やまだブラウザに実装されていない提案段階の機能を、古いブラウザや環境でも動作する形式に変換する JavaScriptトランスパイラ（変換ツール） です。旧約聖書の「バベルの塔」が由来で、異なる言語を通じ合わせるという意味合いが込められています。

たとえば、開発者が最新の ES2015+ 構文（アロー関数・const/let・クラス構文など）でコードを書いても、それを理解できない古いブラウザでは動きません。Babelはそのコードを受け取り、IE11などの旧世代のブラウザでも解釈できる古い JavaScript 構文に自動変換 してくれます。これにより、開発者は「このブラウザで動くかどうか」を気にせず、最新かつ読みやすい書き方でコーディングに集中できます。

また Babel は単なる変換器にとどまらず、プラグイン（拡張機能） を組み合わせることで React の JSX や TypeScript など多様な構文にも対応できます。現代のフロントエンド開発においてはほぼデファクトスタンダード（事実上の標準）として使われており、webpack や Vite などのビルドツールとも連携します。

---

Babelの仕組みと変換プロセス

Babelの処理は大きく3つのステップで進みます。

ステップ	名称	内容
1	パース（Parse）	ソースコードを読み込み、AST（抽象構文木）と呼ばれるデータ構造に分解する
2	変換（Transform）	プラグインがASTを操作し、構文を書き換える
3	生成（Generate）	書き換えられたASTから新しいJavaScriptコードを出力する

変換の具体例

// 変換前（ES2015+のアロー関数・テンプレートリテラル）
const greet = (name) => `Hello, ${name}!`;

// 変換後（Babelが出力するES5形式）
"use strict";
var greet = function greet(name) {
  return "Hello, " + name + "!";
};

ポリフィルとの違い

Babel が行う「構文変換」と混同しやすい概念に ポリフィル（Polyfill） があります。

種類	対象	例
構文変換（Babel本体）	書き方・文法の変換	アロー関数 → function式
ポリフィル（core-js等）	組み込み機能の補完	Promise・Array.from など

構文はBabelが変換できますが、ブラウザに存在しない Promise などのAPIは変換だけでは解決できません。そのため @babel/preset-env と core-js を組み合わせてポリフィルも自動注入するのが一般的な使い方です。

---

歴史と背景

• 2014年 — Sebastian McKenzie（当時17歳の学生）が個人プロジェクト「6to5」として開発・公開。ES6（ES2015）のコードをES5に変換するツールとして注目される
• 2015年 — プロジェクト名を「Babel」に改名。コミュニティ主導のオープンソース開発に移行
• 2015年〜 — React（JSX構文）・Flow型アノテーションとの連携が進み、フロントエンド開発の必須ツールとして急速に普及
• 2017年（Babel 7） — TypeScript サポート・モノレポ構成（@babel/ スコープパッケージ）への移行など大規模なアーキテクチャ改革
• 2018年以降 — webpack・Rollup・Viteなどあらゆるビルドツールに統合され、フロントエンドスタックの基盤として定着
• 現在 — SWC（Rust製の高速トランスパイラ）や esbuild の台頭により「Babelを使わないビルド設定」も増えてきているが、柔軟なプラグインエコシステムは依然として強みを持つ

---

関連ツール・技術との比較

Babel はフロントエンドのビルドチェーンの中で他ツールと連携・競合します。

Babel と競合・代替ツールの比較

ツール	言語	速度	柔軟性	主な用途
Babel	JavaScript	普通	◎ 非常に高い	構文変換・プラグイン拡張全般
SWC	Rust	◎ 非常に速い	○ 高い	Next.js等での高速ビルド
esbuild	Go	◎ 非常に速い	△ 限定的	バンドル・軽量トランスパイル
tsc（TypeScript）	TypeScript	普通	△ TS専用	TypeScript→JavaScript変換

フロントエンドビルドチェーンにおけるBabelの位置づけ

babel.config.js の設定例

// babel.config.js（プロジェクトルートに置く設定ファイル）
module.exports = {
  presets: [
    // ターゲットブラウザに合わせて自動的に変換ルールを選ぶ
    ["@babel/preset-env", { targets: "> 0.25%, not dead" }],
    // React の JSX を変換する
    "@babel/preset-react",
    // TypeScript の型注釈を除去する
    "@babel/preset-typescript",
  ],
};

---

関連用語

• webpack — JavaScriptやCSS・画像などをまとめてバンドルするモジュールバンドラー
• Vite — 高速な開発サーバーとビルドを提供するフロントエンドビルドツール
• TypeScript — JavaScriptに型システムを追加したAltJS（代替言語）
• npm — JavaScriptのパッケージ管理ツール。Babelのインストールに使う
• AST（抽象構文木） — コードを木構造のデータとして表現したもの。Babelの変換処理の中心
• ポリフィル — 新しいブラウザAPIを古い環境でも動くよう補う実装コード
• ESモジュール — JavaScriptの標準的なモジュール仕様（import/export）
• SWC — Rust製の高速トランスパイラ。Babelの代替として注目されている