【Javascript】スプレッド構文

公式ドキュメント
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

配列の要素を関数の引数に一気に渡したり、オブジェクトを作る時に既存のデータをそのままぶち込むことができる。

配列操作

スプレッド構文を使わずの配列結合

配列の結合をconcatメソッドで行う例：

const names = ["山田", "鈴木"];
const emails = ["[e-mail]", "[e-mail]"];
const ages = [25, 30];

// 各情報の配列をconcatメソッドで連結
const combinedInfo = names.concat(emails).concat(ages);

直感的でわかりやすいですが、複数の配列を結合する場合には、concatを繰り返し使用しなければならないから、冗長になりやすい。あとconcatメソッドは新しい配列を返すため、大量データを扱うにはパフォーマンス的に向いてなさそう。

スプレッド構文を使って結合

const names = ["山田", "鈴木"];
const emails = ["[e-mail]", "[e-mail]"];
const ages = [25, 30];
// スプレッド構文を使用して情報の配列を一つに結合
const combinedInfo = [...names, ...emails, ...ages];

Webpackの設定で使う

Webpackで本番/開発環境などの複数環境のビルドプロセスや複数PJの管理をしたいといときにmodule.exportにまとめて渡さないといけないので複数環境やPJで分解して渡す際に使用した。以下は本番/開発環境で分けた例

// 共通の設定
const commonConfig = {
  entry: './src/index.js',
  module: {
    rules: [{ test: /\.js$/, use: 'babel-loader' }]
  }
};

// 本番環境の設定
const productionConfig = {
  ...commonConfig,//スプレッド構文で共通の設定をコピー
  mode: 'production',
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
  optimization: {
    minimize: true
  }
};

// 開発環境の設定
const developmentConfig = {
  ...commonConfig,//スプレッド構文で共通の設定をコピー
  mode: 'development',
  devtool: 'source-map',
  plugins: [
    ...commonConfig.plugins,
    new webpack.HotModuleReplacementPlugin()
  ]
};

module.exports = (env) => {
  if (env.production) {
    return productionConfig;
  } else if (env.development) {
    return developmentConfig;
  } else {
    return commonConfig;
  }
};

スプレッド構文を使わないと、毎回entryやmodule用意してentry: commonConfig.entryという感じで冗長してしまうが、...commonConfigで書かなくてもよくなった。少しは可読性が上がった、と思う。