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

@babel/plugin-transform-destructuring

情報

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

例​

入力

JavaScript
let { x, y } = obj;

let [a, b, ...rest] = arr;

出力

JavaScript
function _toArray(arr) { ... }

let _obj = obj,
    x = _obj.x,
    y = _obj.y;

let _arr = arr,
    _arr2 = _toArray(_arr),
    a = _arr2[0],
    b = _arr2[1],
    rest = _arr2.slice(2);

インストール​

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

使用法​

babel.config.json
{
  "plugins": ["@babel/plugin-transform-destructuring"]
}

CLI経由​

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

Node API経由​

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

オプション​

loose​

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

このオプションを有効にすると、分割代入したいものが配列であると仮定し、他のイテラブルに対してArray.fromを使用しません。

注意

トップレベルのiterableIsArrayアサンプションへの移行を検討してください。

babel.config.json
{
  "assumptions": {
    "iterableIsArray": true
  }
}

useBuiltIns​

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

このオプションを有効にすると、Babelのextendsヘルパーの代わりにObject.assignを直接使用します。

例​

.babelrc

babel.config.json
{
  "plugins": [
    ["@babel/plugin-transform-destructuring", { "useBuiltIns": true }]
  ]
}

入力

JavaScript
var { ...x } = z;

出力

JavaScript
var _z = z,
  x = Object.assign({}, _z);
ヒント

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

allowArrayLike​

boolean、デフォルトはfalse

追加: v7.10.0

このオプションは、配列の分割代入構文を使用して、配列のようなオブジェクトを分割代入することを許可します。

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

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

Babelでは、このオプションが無効になっていても、古いエンジンでargumentsの分割代入が許可されていることに注意してください。これは、ECMAScript仕様でイテラブルとして定義されているためです。

注意

トップレベルのarrayLikeIsIterableアサンプションへの移行を検討してください。

babel.config.json
{
  "assumptions": {
    "arrayLikeIsIterable": true
  }
}

参考文献​