JavaScriptのSpreadオペレーターを理解

公開日:2020-10-07 更新日:2020-10-07

ReactやVue.jsのJavaScriptコードの中でよく見かける"..."。初めて見かける人とこれがどのような結果になるのか予想もつきません。

オブジェクトのプロパティの更新やオブジェクトの追加などでも頻繁に使われるので実際のコードで見かけそうなシンプルで具体的な例を使って理解しておきましょう。ポイントは名前にSpreadの開くという意味を持っているので一度展開を行ってからくっつける(更新もありますが)といったイメージをするのがわかりやすいような気がします。

オブジェクトのプロパティの更新

ブログの投稿を保持するpostオブジェクトを準備します。

let post = {
  title: "JavaScript難しい",
  author: "John",
  date: "2020-10-08",
};

titleのみ変更を行いたい時にspreadオペレーターを利用することができます。

let post = {
  title: "JavaScript難しい",
  author: "John",
  date: "2020-10-08",
};

post = { ...post, title: "JavaScript簡単" };

console.log(post);

実行するとtitleのみ上書きされることが確認できます。

{ title: 'JavaScript簡単', author: 'John', date: '2020-10-08' }`

オブジェクトへのプロパティの追加

先ほど利用したpostオブジェクトにプロパティの追加を行います。

let post = {
  title: "JavaScript難しい",
  author: "John",
  date: "2020-10-08",
};

post = { ...post, image: "javascript.png" };

console.log(post);

実行するとimageプロパティが追加されることが確認できます。

{
  title: 'JavaScript難しい',
  author: 'John',
  date: '2020-10-08',
  image: 'javascript.png'
}

オブジェクトの入った配列の結合

2つのpostオブジェクトが入った2つの配列があります。一度サーバからpostsのデータを取得し、さらにnew_postsを取得した時を想定しています。2つという制限はなく100入っていても変わりません。

let posts = [
  {
    title: "JavaScript難しい",
    author: "John",
    date: "2020-10-08",
  },
  {
    title: "JavaScript簡単",
    author: "John",
    date: "2020-10-08",
  },
];

let new_posts = [
  {
    title: "Reactは難しい",
    author: "John",
    date: "2020-10-09",
  },
  {
    title: "Reactは簡単",
    author: "John",
    date: "2020-10-09",
  },
];

spreadオペレーターを利用して下記のように記述します。

posts = [...posts, ...new_posts];

console.log(posts);

Spreadオペレーターにより2つの配列が結合されます。

[
  { title: 'JavaScript難しい', author: 'John', date: '2020-10-08' },
  { title: 'JavaScript簡単', author: 'John', date: '2020-10-08' },
  { title: 'Reactは難しい', author: 'John', date: '2020-10-09' },
  { title: 'Reactは簡単', author: 'John', date: '2020-10-09' }
]

配列に新規のオブジェクトを追加

postオブジェクトを持つ配列に入力フォーム等で入力した値をオブジェクトとして追加したい場合もSpreadオペレーターが利用できます。

let posts = [
  {
    title: "JavaScript難しい",
    author: "John",
    date: "2020-10-08",
  },
  {
    title: "JavaScript簡単",
    author: "John",
    date: "2020-10-08",
  },
];

let new_post = {
  title: "Reactは難しい",
  author: "John",
  date: "2020-10-09",
};

posts = [...posts, new_post];

console.log(posts);

実行すると配列へのオブジェクトの追加が確認できます。これをmap関数やv-forなどでloopさせることで投稿ブログの一覧を表示することができます。

[
  { title: 'JavaScript難しい', author: 'John', date: '2020-10-08' },
  { title: 'JavaScript簡単', author: 'John', date: '2020-10-08' },
  { title: 'Reactは難しい', author: 'John', date: '2020-10-09' }
]

オプジェクトの複製

spreadオペレーターはオブジェクトの複製にも利用することができます。

const post = {
  title: "JavaScript難しい",
  author: "John",
  date: "2020-10-08",
};

let new_post = { ...post };

console.log(new_post);

実行するとpostと同じ値が表示されます。

配列でSpreadオペレーター

特に配列では最初に説明した開いてからくっつけるのイメージがそのままのような気がします。

let num = [1, 2, 3];

let num_2 = [4, 5];

let num_3 = [...num, ...num_2];

console.log(num_3);

結果は開いてくっつけているので下記のようになります。

[ 1, 2, 3, 4, 5 ]