Babelとは
最新のJavaScriptを、古い環境でも動くように変換してくれるツール です。
- 例）
const / let、アロー関数、async/await、クラス構文など - 古いブラウザや古いNode.jsでも動くように「昔のJavaScript（ES5）」に書き換えてくれる
「モダンな書き方で開発して、古い環境にも対応できる」ための変換ツール
使い方（導入の流れ）
※プロジェクトに応じて変わりますが、基本的には開発環境にインストールします。
npm install -D @babel/core @babel/preset-env babel-loader
用途の例：
-
@babel/core→ Babel本体 -
@babel/preset-env→ 変換ルール（最新JavaScript → 古いJSへ） -
babel-loader→ Webpackと連携する際に使用
基本設定
① .babelrc（または babel.config.json）を作成し設定
{
"presets": ["@babel/preset-env"]
}
② Webpackを併用している場合は設定に追記
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Babelの補足・メリット
| 内容 | 説明 |
|---|---|
| 古いブラウザ互換性 | IE / Safariなどでも動くJSに変換 |
| モダンな文法で開発可能 | コード品質UP・保守性UP |
| ReactやTypeScriptでも利用 | JSX → JavaScript への変換にも使われる |
注意点
- Babelは「変換ツール」であり、パフォーマンス向上ツールではない
- 必要なpresetやpluginを追加していくため、環境構築に慣れが必要
- 「変換対象を絞る」設定をしないと、不要な変換でビルドが遅くなることがある
まとめ
| ツール | 目的 |
|---|---|
| Webpack | ファイルをまとめたり最適化する（bundle） |
| Babel | 最新JSを古い環境対応に変換する |
→ Webpack + Babel の組み合わせは長年「定番の構成」
しかし近年は Vite / esbuild など、
高速ビルドツールが Babel の代わりにトランスパイル機能を持つケースも増えている。