【(3点リーダ)…propsって何?】スプレッド構文(Spread syntax)【JavaScript】

Reactなんかを書いていると、<myComponent {...props} />のように引数の中に3点リーダが入っていることがあると思います。

これがES6で追加されたスプレッド構文です。

スプレッド構文とは、関数呼び出しでは 0 個以上の引数としてArrayやStringなどのiterableオブジェクトをその場で展開する構文です。

最初にみたときは「何だこの省略記号?」と思いました笑

今後JavaScriptを書く上では外せない構文だと思いますのでぜひ覚えましょう。

 

基本構文

基本的な構文をみていきます。

関数呼び出し

applyを利用していたのをスプレッド構文で置き換えることができます。

// 従来の書き方
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

// スプレッド構文
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

// 場所を選ばず、複数回使える
function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]); //(-1, 0, 1, 2, 3)と同じ

new演算子

コンストラクタをnew演算子で呼ぶとき、スプレッド構文を使えばArrayの要素をコンストラクタの引数として指定することができます。

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

既にある配列を利用

Arrayリテラル(配列)を宣言するときに、スプレッド構文を使うことで、既にある配列を簡単に利用することができます。

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

複製も可能です

var arr = [1, 2, 3]; 
var arr2 = [...arr]; 
// arr.slice() のような動きです arr2.push(4); 
// arr2 は [1, 2, 3, 4] になります // arr は変更されません

連結もconcatを使わずに簡潔に書くことができます。

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
// [0, 1, 2, 3, 4, 5]

オブジェクトで利用

オブジェクトリテラルでもスプレッド構文を利用することができます。

これはタイトルにもあるようにReactでpropsをまとめて渡したい時などに出てくると思います。

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

// Componentにpropsを渡すとき
function App() {
  var props = { title: 'hoge', content: 'fuga'};
  return (
      <myComponent {...props} />
  );
}

 

スプレッド構文 – JavaScript | MDN

Reactのおすすめ学習フローはこちら

初めての人にオススメしたいReactの勉強法【初心者向け】