メインコンテンツにスキップ

Babelとは？

BabelはJavaScriptコンパイラです​

Babelは、主にECMAScript 2015+のコードを、現在および古いブラウザや環境で後方互換性のあるバージョンのJavaScriptに変換するために使用されるツールチェーンです。 Babelがあなたのためにできる主なことは次のとおりです。

  • 構文の変換
  • ターゲット環境にない機能のポリフィル（core-jsなどのサードパーティのポリフィルを使用）
  • ソースコード変換（コードモッド）
  • その他！（動画でインスピレーションを得てください）
JavaScript
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});
ヒント

コンパイラの素晴らしいチュートリアルについては、the-super-tiny-compilerをご覧ください。ここでは、Babel自体がどのように高レベルで機能するかも説明しています。

ES2015以降​

Babelは、構文トランスフォーマーを介して、最新バージョンのJavaScriptをサポートしています。

これらのプラグインを使用すると、ブラウザのサポートを待つことなく、今すぐ新しい構文を使用できます。開始するには、使い方ガイドをご覧ください。

JSXとReact​

BabelはJSX構文を変換できます！開始するには、Reactプリセットをご覧ください。babel-sublimeパッケージと組み合わせて使用すると、構文の強調表示がまったく新しいレベルになります。

このプリセットは、次のようにインストールできます。

npm install --save-dev @babel/preset-react

そして、Babel設定に@babel/preset-reactを追加します。

JSX
export default function DiceRoll(){
  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  const [num, setNum] = useState(getRandomNumber());

  const handleClick = () => {
    const newNum = getRandomNumber();
    setNum(newNum);
  };

  return (
    <div>
      Your dice roll: {num}.
      <button onClick={handleClick}>Click to get a new number</button>
    </div>
  );
};
ヒント

JSXの詳細をご覧ください

型注釈（FlowおよびTypeScript）​

Babelは型注釈を取り除くことができます！開始するには、FlowプリセットまたはTypeScriptプリセットをご覧ください。Babelは型チェックを行わないことに注意してください。型をチェックするには、FlowまたはTypeScriptをインストールして使用する必要があります。

flowプリセットは次のようにインストールできます。

npm install --save-dev @babel/preset-flow
JavaScript
// @flow
function square(n: number): number {
  return n * n;
}

または、typescriptプリセットは次のようにインストールできます。

npm install --save-dev @babel/preset-typescript
JavaScript
function Greeter(greeting: string) {
  this.greeting = greeting;
}
ヒント

FlowとTypeScriptの詳細をご覧ください！

プラグ可能​

Babelはプラグインで構築されています。既存のプラグインを使用するか、独自のプラグインを作成して、独自の変換パイプラインを構成します。プリセットを使用または作成して、プラグインのセットを簡単に使用できます。詳細はこちら→

astexplorer.netを使用してその場でプラグインを作成するか、generator-babel-pluginを使用してプラグインテンプレートを生成します。

example-babel-plugin.js
// A plugin is just a function
export default function({ types: t }) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = [...name]
          .reverse()
          .join("");
      },
    },
  };
}

デバッグ可能​

コンパイルされたコードを簡単にデバッグできるように、ソースマップをサポートします。

仕様準拠​

Babelは、可能な限り合理的に、ECMAScript標準に忠実であろうとします。また、パフォーマンスとのトレードオフとして、より仕様に準拠するための特定のオプションもあります。

コンパクト​

Babelは、かさばるランタイムに依存せずに、可能な限り少ないコードを使用しようとします。

これは難しい場合があり、可読性、ファイルサイズ、および速度と引き換えに仕様準拠をトレードオフする「前提」オプションがあります。