Babelは、最新のJavaScript構文を古いブラウザでも動く形式に変換するトランスパイラ（ソース変換コンパイラ）です。2014年9月、当時オーストラリアの高校生だったセバスチャン・マッケンジー氏が「6to5」という名前で公開しました。ES6（2015年）の新機能を当時の主要ブラウザ向けにES5へ書き戻すツールとして広まり、2015年に「Babel」へ改名し、JSX変換やTypeScriptサポート、プラグイン経由のAST変換基盤として成長しました。現在はJavaScriptエコシステムの土台として、React・Vue・Next.jsなど主要プロジェクトに組み込まれています。
この記事の目次
- プラグイン式AST変換器
- 6to5からBabelへの改名
- 現場での主な使われ方
- esbuild・SWCとの違い
- まとめ
プラグイン式AST変換器
Babelの内部は3段構えになっています。まず@babel/parser（旧Babylon）がJavaScriptソースをパースしてAST（抽象構文木）を生成し、次に@babel/traverseがそのASTを走査して、登録された変換プラグインを順に適用します。最後に@babel/generatorがASTから新しいJavaScriptコードを文字列として出力する、というパイプラインです。プラグインは「アロー関数を関数式に変換する」「optional chainingを書き戻す」といった単位で書かれ、AST操作で完結します。
ユーザー側は通常、個別プラグインを直接指定する代わりに「プリセット」を使います。@babel/preset-envは「target browsers設定に応じて必要な変換だけを自動選択する」プリセットで、Browserslistと連動して動きます。@babel/preset-reactはJSX変換、@babel/preset-typescriptはTypeScriptの型注釈削除を担当します。プラグインAPIが公開されているため、テンプレート文字列で書いたDSLを最適化したり、独自構文を導入したりといった用途にも応用されます。
6to5からBabelへの改名
Babelは2014年9月、オーストラリアの高校生だったセバスチャン・マッケンジー氏が「6to5」という名前で公開しました。「ES6で書いてES5に変換する」というその時々の用途を素直に表した名前でしたが、2015年にES6が正式に「ECMAScript 2015」と命名され、年次更新のスケジュールが定まると、「永遠に6to5なわけじゃない」ということでバベルの塔にちなんだ「Babel」へ改名されました。
2015～2016年のReact／JSX大流行と歩を合わせてBabelは爆発的に普及し、2018年8月にはアーキテクチャを刷新したBabel 7が正式リリースされました。Babel 7では@babel/から始まるscoped packageに統一され、@babel/preset-envやTypeScript対応が本格的に整いました。現在もコアメンテナはNicolò Ribaudo氏らに引き継がれ、TC39で新提案構文への対応が継続されています。JavaScriptの新機能を現場で使えるかどうかは、Babelの対応スピードに大きく依存してきました。
現場での主な使われ方
Babelの代表用途は依然として「最新JSを古いブラウザでも動かす」ことです。Browserslistで対象を「最新2バージョン＋IE11」のように指定すると、@babel/preset-envが必要な変換だけを選んで適用します。IE11サポート要件が薄れた現在もSafariの古い版・Android標準ブラウザなど、長い尾を持つ環境向けのコンパイル工程として現役で使われています。
JavaScript以外への適用も広く、React／Vue／Svelteでは独自構文の変換工程としてBabelが組み込まれます。テストランナーのJestはbabel-jest経由でテストコードを変換し、ESMやTypeScriptのまま書けるようにします。ライブラリ作者にとっては、配布用にesm／cjs／ブラウザ向けbundleを生成するビルドステップでもBabelが活躍します。プラグイン機構が強力なので、社内DSLや独自JSX、emotion／styled-components用のラベル付与など、「AST書き換えを伴うコード自動生成」全般に応用されています。
esbuild・SWCとの違い
BabelはJavaScript自身で書かれており、起動とパースが純粋にNode.jsの上で動きます。そのため大規模リポジトリでは数秒～数十秒の変換時間がかかることがあり、2020年前後からesbuild（Go製、Evan Wallace氏）やSWC（Rust製、DongYoon Kang氏）など、ネイティブ実装で桁違いに速い後発ツールが登場しました。
とはいえBabelの強みは長年積み上げたプラグインエコシステムと、AST操作APIの洗練度にあります。TC39の最新提案構文がいち早く実装されるのは依然としてBabelで、独自構文を導入したい場合や複雑なコード変換が必要な場合は今もBabelが第一候補です。esbuild／SWCは速度に振り切った代わりにプラグイン拡張点はまだ限定的で、プロジェクトによっては「ビルドはSWC・テストはBabel」「ライブラリ配布はBabel・アプリはesbuild」と使い分ける構成も一般的になっています。
まとめ
Babelは2014年に「6to5」として誕生し、ES6時代以降のJavaScript変換基盤として定着したトランスパイラです。プラグイン式AST変換とプリセットによる手軽さで、JSX・TypeScript・最新構文の取り回しを支えてきました。esbuild／SWC勢が台頭しても、構文対応の早さとエコシステムの厚みで、現代のJSビルド工程に欠かせない存在です。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント