babel.config.js・とは？初心者が知っておく基本と設定の使い方共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

babel.config.jsとは何かをやさしく解説

このページでは babel.config.js の基本を中学生にもわかるように丁寧に説明します。babel.config.js は実は JavaScript の世界でとても大事な設定ファイルです。babel は新しい JavaScript の機能を古いブラウザにも動くように変換してくれるツールですが、その変換の仕組みを指示するのがこのファイルです。

babel.config.js の役割と特長

プロジェクトの根元に置くことが多く、全体設定をまとめて管理できます。babel.config.js は プレセットと呼ばれる変換ルールの集合や、必要に応じたプラグインを指定します。これにより、特定の環境や条件で変換を変えることができます。

基本的な構造と書き方

最も一般的な書き方は CommonJS の形です。すなわち module.exports = { presets: ["@babel/preset-env"], plugins: [] } のように記述します。module.exports は「このファイルが出す設定」を指示する文です。presets は変換の基礎になる機能の集まり、plugins は追加の機能です。presets や plugins を自分のプロジェクトに合わせて選ぶことで、どの機能をどの環境で有効にするかを決められます。

具体例と使い方の流れ

まずは必要な道具をインストールします。一般的には npm install --save-dev @babel/core @babel/cli @babel/preset-env のように実行します。続いて babel.config.js を作成し、以下のように書きます。

module.exports = { presets: ["@babel/preset-env"], plugins: [] }

シンプルな例の表現

項目	説明
presets	変換の基本セットを指定します
plugins	追加の変換機能を指定します
env	環境ごとの設定を分けたいときに使います

この表のように babel.config.js では presets と plugins、env の3つがよく使われます。env では開発環境や本番環境、特定のブラウザターゲットごとに設定を分けることができます。

設定を変えることで、現代の JavaScript の機能を「どの環境で使えるか」を管理できます。例えば新しい構文を使いたいが古いブラウザは対応していない場合、その機能だけを選んで変換することができます。babel.config.js があると、コードの互換性を保ちながら最新の記述を使うことが容易になります。

最後に、開発を進める上でのコツをいくつか紹介します。まずは最小限の設定から始め、徐々に presets や plugins を追加していくと理解が進みやすいです。次に、monorepo のように複数のパッケージを扱う場合でも babel.config.js はルートに置くのが基本です。親パッケージの設定が子パッケージにも影響することを覚えておくと混乱を避けられます。

babel.config.jsの同意語

babel.config.js: Babelの設定をJavaScriptで記述する、プロジェクト全体のトランスパイルルールを定義するファイル名そのもの。
Babel設定ファイル: Babelの変換設定を格納したファイル全般の呼び方。プラグインやプリセットの指定を含む設定情報を保存します。
Babel設定: Babelの設定全体のこと。どのプラグインやプリセットを使うか、変換の挙動を決める項目のこと。
Babelコンフィグファイル: Babelのコンフィグレーションを格納するファイルの総称。JavaScript/JSON形式などで記述します。
Babelコンフィグ: Babelの設定（構成情報）を指す略語。プラグイン・プリセット・環境設定を含むことが多い。
Babel用設定ファイル: Babelを利用する際の設定をまとめたファイル。実行時の変換ルールを決めます。
Babel設定スクリプト: 設定をJavaScriptとして記述するファイル。動的に設定を組み立てることも可能です。
Babel変換設定ファイル: Babelがコードをどのように変換するかのルールを記述した設定ファイル。
Babelの構成ファイル: Babelの動作を決定する構成情報を格納するファイル。環境ごとの設定も含みます。
Babel構成: Babelの設定要素の集合。プラグイン、プリセット、環境設定などを指します。

babel.config.jsの対義語・反対語

非Babel設定ファイル: Babelに関連しない設定ファイルで、Babelのトランスパイル設定を含まない
Babelなし構成ファイル: Babelを使わない前提の構成ファイル。代わりに別のツールやデフォルト設定を用いる
未トランスパイル設定: コードをBabelで変換せずそのまま実行する前提の設定
トランスパイル不要設定: Babelのトランスパイル機能を使わない前提の設定
直書きJS設定: 生のJavaScriptコードをそのまま前提として扱う設定ファイル
手動ビルド前提設定: 自動的なトランスパイルを使わず、ビルドを手動でする前提の設定
ES5準拠のみ設定: 最新のJavaScript機能を避し、ES5互換だけを前提とする設定
プリプロセッサ不使用設定: Babel以外のプリプロセッサ（例: TypeScript、SCSSのプリプロセスなど）を使わない設定
トランスパイル無効設定: トランスパイル機能を常に無効化する設定
代替ビルド設定: Babelの代替ツール（例: SWC、TypeScriptのビルド設定など）を前提とする設定
最小限の設定ファイル: 最小限の設定のみを含み、Babelの詳細設定を排除したファイル
非変換ファイル設定: コードを変換せずにそのまま利用することを前提とした設定

babel.config.jsの共起語

Babel: JavaScriptコードを古い環境でも動くように変換するツール全体の名称。
babel.config.js: Babelのプロジェクト全体の設定を記述するJavaScriptファイル。場所や適用範囲を一元管理するのに使われます。
babelrc: Babelの設定ファイルの従来形式。babel.config.js に比べてプロジェクトのルールが細かく分かれることがあります。
.babelrc: babelrc の実ファイル名表記。実務では babel.config.js が推奨されることが多いです。
プリセット: 複数の変換ルールをひとまとめにした機能パック。1つのプリセットで複数の変換をまとめて適用できる。
preset-env: 環境に応じたトランスパイルを自動で行う標準的なプリセット。targets によって変換の対象を決めます。
preset-react: JSXを通常のJavaScriptに変換するためのプリセット。React開発でよく使われます。
preset-typescript: TypeScriptをBabelで変換するプリセット。型情報は保持されませんがJSに変換します。
プラグイン: 個別の変換処理を追加する小さな機能単位。必要な機能だけを組み合わせて使います。
plugin-transform-runtime: ランタイムのポリフィルを最適化してコードサイズを抑えるプラグイン。再利用可能なランタイムを提供します。
plugin-proposal-class-properties: クラスのプロパティ表現を変換する提案機能のプラグイン。
plugin-proposal-private-methods: クラスのプライベートメソッドを変換するプラグイン。
babel-loader: Webpackと連携してBabel変換を適用するローダー。ビルド時にコードを変換します。
webpack: モジュールを束ねて配布可能なファイルにまとめるビルドツール。Babelと組み合わせて使われることが多いです。
rollup: モジュールを束ねる別のビルドツール。ライブラリ向けの構成で軽量さが特徴。
targets: Babelが変換の対象とする実行環境を指定する設定項目。主に環境ごとの相違を吸収します。
browserslist: 対象とするブラウザや環境の範囲を指定する設定。プリセット-envなどと連携して変換を決定します。
modules: 出力時のモジュール形式をどう扱うかを指定する設定。false などを使いESモジュールを維持する場合もあります。
core-js: ポリフィルライブラリ。新機能を古い環境で使えるようにするための基盤です。
regenerator-runtime: async/await などの実行時サポートを提供するランタイム。Babel のポリフィルと組み合わせて使われます。
polyfill: 新機能を古い環境で使えるようにするポリフィル全般の総称。
sourceMaps: 元のコードと変換後コードの対応を示す情報を生成する設定。デバッグ時に役立ちます。
ignore: 変換対象から除外するファイルやディレクトリを指定。.
include: 変換対象に含めるファイルを指定。特定のパスや拡張子を絞るのに使います。
exclude: ignore と同様に、特定の条件下で除外を追加で設定する場合の項目。
babel-node: Node.js 上で Babel を使ってコードを実行するランタイム。開発時に便利です。

babel.config.jsの関連用語

Babel: JavaScriptの新しい文法や機能を、古い実行環境でも動くように変換するトランスパイラです。
babel.config.js: Babelの設定を定義するファイル。通常は module.exports で設定をエクスポートし、プロジェクト全体の変換ルールを指定します。
.babelrc: Babelの設定を記述するファイル形式のひとつ。JSON/JavaScript 形式で記述し、特定の階層で有効になります。
babelrc: .babelrc の略称。設定ファイルとして同様の役割を果たします。
@babel/core: Babelの中核となるライブラリ。実際のトランスパイル処理を担います。
@babel/cli: コマンドラインから Babel を実行するためのツール群。ファイルの一括変換などが可能です。
@babel/preset-env: 最新のJavaScriptを、対象となる環境に合わせて変換するプリセット。targets で環境を指定します。
@babel/preset-react: ReactのJSXを通常のJavaScriptに変換するプリセット。
@babel/preset-typescript: TypeScriptをJavaScriptへ変換するプリセット。型情報は出力されません。
@babel/preset-flow: Flow の型注釈を削除するプリセット（Flow を使っている場合に有効）。
@babel/plugin-transform-runtime: 重複するヘルパーをランタイムに置くことで、コードサイズを減らすプラグイン。
@babel/plugin-proposal-class-properties: クラスのプロパティ宣言をサポートする提案機能を変換するプラグイン。
@babel/plugin-proposal-nullish-coalescing-operator: ?? 演算子をサポートする提案機能の変換プラグイン。
@babel/plugin-proposal-optional-chaining: ?. 演算子をサポートする提案機能の変換プラグイン。
@babel/plugin-syntax-dynamic-import: 動的インポート import() の構文を解析するだけのプラグイン。
babel-loader: Webpack などのビルドツールと連携して Babel 変換を適用するローダー。
targets: preset-env に渡す環境ターゲットの設定。どのブラウザや Node バージョンをサポートするかを指定します。
modules: preset-env の設定オプション。ESModule の扱いを制御します（false にするとモジュールを維持など）。
useBuiltIns: core-js のポリフィルを自動挿入する設定。'usage' や 'entry' を選択します。
core-js: ポリフィルの実装ライブラリ。3 系以降が主流です。
regenerator-runtime: async/await などのランタイムを提供するライブラリ。
@babel/plugin-proposal-private-methods: クラスのプライベートメソッドをサポートするプラグイン。
env: 環境別に設定を分岐させるセクション。development、production などの環境で異なる設定を適用できます。
overrides: ファイルパターンごとに別の設定を適用する機能。大規模なプロジェクトで便利です。
ignore: 変換対象外にするファイルのリスト。特定のパターンを除外できます。
only: 変換対象とするファイルのリスト。限定的に変換を行いたいときに使用します。
api.cache: babel.config.js の設定関数内で API を使ってキャッシュを制御する方法。ビルド性能を改善します。