JavaScriptトランスパイラーBabelの基礎と応用

トランスパイラー Babel

はじめに

Babelは、最新のJavaScriptコードやJSXなどを古い環境でも実行可能なように変換してくれるJavaScriptコンパイラーです。

主要な役割

最新JavaScript文法のトランスパイル

• ES6+文法は古いブラウザではサポートされていないため、BabelはES5に変換してすべてのブラウザで動作できるようにします。

JSXの変換

• Reactで使用するJSX文法を普通のJavaScriptに変換します。

ポリフィルの提供

• ES6+の新しい機能（Promise、Map、Setなど）は文法の変換だけで実装できないため、Babelはこれらの機能を提供するためにポリフィルを追加で挿入します。
• ポリフィルは、ブラウザでサポートされていない機能や古いブラウザで使用できるように代替コードを提供するものです。

トランスパイラーとバンドラーの統合サポート

• BabelはWebpackやRollupなどのバンドラーと組み合わせて、JavaScriptプロジェクトで簡単に使用できます。

核心コンポーネント

Presets

• Babelがトランスパイルする作業の設定を事前に定義したパッケージです。
  -よく使用されるPreset:
  • @babel/preset-env:
    • ES6+をES5に変換します。
    • ブラウザのサポート対象に応じてトランスパイル結果が異なります。
  • @babel/preset-react:
    • JSXをJavaScriptに変換します。
  • @babel/preset-typescript:
    • TypeScriptをJavaScriptに変換します。
• 例:

  {
    "presets": [
      ["@babel/preset-env", { "targets": "> 0.25%, not dead" }],
      "@babel/preset-react"
    ]
  }
  

Plugins

• Presetとは異なり、特定の機能をトランスパイルしたり、プロジェクトに合わせた機能を追加したりできます。
  -よく使用されるPlugin:
  • @babel/plugin-transform-arrow-functions: アロー関数を通常の関数に変換します。
  • @babel/plugin-transform-runtime: 反復的なコードの挿入を減らし、ポリフィルを効率的に管理します。
• 例:

  {
    "plugins": [
      "@babel/plugin-transform-arrow-functions",
      "@babel/plugin-transform-runtime"
    ]
  }
  

Config

• Babelの設定は、プロジェクトのルートにある設定ファイルで定義します。
• .babelrc (JSON形式) または babel.config.js (JavaScript形式) が一般的です。