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

@babel/plugin-transform-classes

情報

このプラグインは@babel/preset-envに含まれています。

注意点​

ネイティブクラス（例：class extends Array {}）を拡張する場合、スーパークラスをラップする必要があります。これは、2つの問題を回避するために必要です。

  • BabelはSuperClass.apply(/* ... */)を使用してクラスをトランスパイルしますが、ネイティブクラスは呼び出し可能ではないため、この場合エラーが発生します。
  • 一部の組み込み関数（Arrayなど）は常に新しいオブジェクトを返します。Babelはそれを返す代わりに、新しいthisとして扱う必要があります。

このラッパーは、IE11とObject.setPrototypeOfまたは__proto__をフォールバックとして使用する他のすべてのブラウザで機能します。 **IE ≤ 10のサポートはありません**。IE ≤ 10が必要な場合は、ネイティブを拡張しないことをお勧めします。

Babelは、組み込みクラスを拡張しているかどうかを静的に知る必要があります。このため、「mixinパターン」は機能しません。

JavaScript
class Foo extends mixin(Array) {}

function mixin(Super) {
  return class extends Super {
    mix() {}
  };
}

この制限を回避するには、Babelがネイティブクラスをラップできるように、継承チェーンにもう1つのクラスを追加できます。

JavaScript
const ExtensibleArray = class extends Array {};

class Foo extends mixin(ExtensibleArray) {}

例​

入力

JavaScript
class Test {
  constructor(name) {
    this.name = name;
  }

  logger() {
    console.log("Hello", this.name);
  }
}

出力

JavaScript
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Test = (function() {
  function Test(name) {
    _classCallCheck(this, Test);

    this.name = name;
  }

  Test.prototype.logger = function logger() {
    console.log("Hello", this.name);
  };

  return Test;
})();

インストール​

npm install --save-dev @babel/plugin-transform-classes

使い方​

JavaScript
// without options
{
  "plugins": ["@babel/plugin-transform-classes"]
}

// with options
{
  "plugins": [
    ["@babel/plugin-transform-classes", {
      "loose": true
    }]
  ]
}

CLI経由​

シェル
babel --plugins @babel/plugin-transform-classes script.js

Node API経由​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-classes"],
});

オプション​

loose​

boolean型で、デフォルトはfalseです。

注意

Babelが適用したさまざまなlooseモードの推論を詳細に制御できる、トップレベルのassumptionsへの移行をご検討ください。

babel.config.json
{
  "assumptions": {
    "constantSuper": true,
    "noClassCalls": true,
    "setClassMethods": true,
    "superIsCallableConstructor": true
  }
}

メソッドの列挙可能性​

looseモードでは、クラスメソッドが列挙**可能である**ことに注意してください。これは仕様に沿っておらず、問題が発生する可能性があります。

メソッドの割り当て​

looseモードでは、メソッドは定義される代わりに、単純な割り当てでクラスプロトタイプに定義されます。これにより、以下が機能しなくなる可能性があります。

JavaScript
class Foo {
  set bar() {
    throw new Error("foo!");
  }
}

class Bar extends Foo {
  bar() {
    // will throw an error when this method is defined
  }
}

Bar.prototype.fooが定義されると、Fooのセッターがトリガーされます。これは、本番コードではほとんど発生しないケースですが、覚えておく必要があります。

ヒント

プラグインオプションの設定の詳細については、こちらをご覧ください。