ushumpei’s blog

生活で気になったことを随時調べて書いていきます。

オブジェクトリテラル内でのスプレッド演算子

 こんにちは。

 スプレッド演算子(spread operator)がオブジェクトリテラル内で使えませんでした。babel-preset-es2015入れとけばなんとかなるだろうと思っていたのですが、babel-preset-stage-2が必要みたいです。ECMAScriptの仕様策定方法を知らないのでstage-2の意味はわからないですが、なんかよさそうなものがあったので読もうと思います。

 ざっくりとした設定方法をメモしておきます。

インストール

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-2 webpack

webpack.config.jsはこんな感じになりました。

module.exports = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader:  'babel',
        query: {
          presets: [
            'es2015',
            'stage-2',
          ],
        },
      },
    ],
  },
}

以下動くかどうか確認のためindex.jsindex.htmlを用意。

index.js

let obj1 = { 'before': '...oh' };
alert(JSON.stringify(obj1,null,2));
let obj2 = { ...obj1 , 'after': 'oh!' };
alert(JSON.stringify(obj2,null,2));
// ひどいサンプル

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Spread</title>
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

webpackでビルド実行

./node_modules/.bin/webpack --colors --progress

 index.htmlをブラウザで開くとアラートが2回表示されます。オブジェクトリテラルが再代入なしで更新されているのが、なんとなくわかるかと思います。もっとプロパティが多いと、魅力が伝わる気がします。

感想

 ちゃんとした例を書かないとダメですね。あとECMAScriptに関しても知っておきたいです。