@babel/plugin-transform-spread

情報

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

例

入力

JavaScript

var a = ["a", "b", "c"];

var b = [...a, "foo"];

var c = foo(...a);

出力

JavaScript

var a = ["a", "b", "c"];

var b = a.concat(["foo"]);

var c = foo.apply(void 0, a);

インストール

npm

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

Yarn

yarn add --dev @babel/plugin-transform-spread

pnpm

pnpm add --save-dev @babel/plugin-transform-spread

使用方法

設定ファイルを使用する場合（推奨）

オプションなし

babel.config.json

{
  "plugins": ["@babel/plugin-transform-spread"]
}

オプションあり

babel.config.json

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

CLI経由

シェル

babel --plugins @babel/plugin-transform-spread script.js

Node API経由

JavaScript

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

オプション

loose

boolean、デフォルトはfalse。

looseモードでは、**すべて**のイテラブルが配列であるとみなされます。

注意

トップレベルのiterableIsArrayの仮定に移行することを検討してください。

babel.config.json

{
  "assumptions": {
    "iterableIsArray": true
  }
}

iterableIsArrayの仮定では、Babelは配列をスプレッドする際に「穴」を保持します（たとえば、[ ...Array(2) ]は[ (hole), (hole) ]を生成します）。 この動作を回避するには、iterableIsArrayをfalseに設定します。

ヒント

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

allowArrayLike

boolean、デフォルトはfalse

追加バージョン: v7.10.0

このオプションは、配列のようなオブジェクトを配列であるかのようにスプレッドすることを許可します。

注意

トップレベルのarrayLikeIsIterableの仮定に移行することを検討してください。

babel.config.json

{
  "assumptions": {
    "arrayLikeIsIterable": true
  }
}

配列のようなオブジェクトとは、`length`プロパティを持つオブジェクトです。たとえば、`{ 0: "a", 1: "b", length: 2 }`です。 実際の配列と同様に、配列のようなオブジェクトには「穴」が存在する可能性があることに注意してください。`{ 1: "a", length: 3 }`は`[ (hole), "a", (hole) ]`と同等です。

配列のようなオブジェクトを配列であるかのようにスプレッドすることは仕様に準拠していませんが、`Symbol.iterator`をサポートする最新のブラウザでは*イテラブル*となるオブジェクトが多数あります。注目すべき例としては、`document.querySelectorAll("img.big")`のようなDOMコレクションがあり、これがこのオプションの主なユースケースです。

このオプションが無効になっている場合でも、Babelは古いエンジンで`arguments`のスプレッドを許可していることに注意してください。これは、ECMAScript仕様で*イテラブル*として定義されているためです。

参考資料

• MDN: スプレッド構文