JavaScript

【JavaScript】スプレット構文について

今回はReactを勉強しているとよく出てくるスプレット構文についてかんたんにまとめていきたいと思います。

スプレット構文とは

スプレット構文とは配列やオブジェクトの前に…をつけることでその中身が展開される記法です。

// 配列の場合
const arr = [1, 2, 3]
const arr_2 = [...arr, 4, 5]
console.log(arr_2)  // [ 1, 2, 3, 4, 5 ]

// オブジェクトの場合
const obj = {a: 1, b: 2, c: 3}
const obj_2 = {...obj, d: 4, e, 5}
console.log(obj_2)  // { a: 1, b: 2, c: 3, d: 4, e: 5 }

オブジェクトの場合、キーがかぶっていた場合は上書きされます。

const obj_3 = {...obj, c: 10, d: 4, e: 5}
console.log(obj_3)  // { a: 1, b: 2, c: 10, d: 4, e: 5 }

オブジェクトのコピー

スプレット構文はオブジェクトをコピーするのにも使われます。

const original = {a: 1, b: 2, c: 3}
const copy = {...original}
copy === original  // false

copy.c = 10
console.log(copy)  // { a: 1, b: 2, c: 10 }
console.log(original)  // { a: 1, b: 2, c: 3 }

ただし、この方法は浅いコピー(シャローコピー)なので、オブジェクトの深さが1段までしか有効ではないです。

const user_1 = {
  name: 'sakai',
  email: 'abc@example.com',
  age: 27,
  address: { town: 'suzuka' }
}

const copy = { ...user }
copy.address.town = 'kasai'
console.log(copy)
// {
//   name: 'sakai',
//   email: 'abc@example.com',
//   age: 27,
//   address: { town: 'kasai' }
// }

console.log(user)
// {
//   name: 'sakai',
//   email: 'abc@example.com',
//   age: 27,
//   address: { town: 'kasai' }
// }

スプレット構文と分割代入

スプレット構文は分割代入と組み合わせると表現力が高まります。

const user = {
  id: 1,
  name: 'sakai',
  email: 'abc@example.com',
  age: 27
}

const { id, ...userWithoutId } = user;
console.log(id, userWithoutId)
// 1 { name: 'sakai', email: 'abc@example.com', age: 27 }

Reactで使われる場面

Reactで実際にスプレット構文が使われる場面を紹介して終わりにしたいと思います。

export const restaurantsReducer = (state, action) => {
  switch (action.type) {
    case restaurantsActionTypes.FETCHING:
      return {
        ...state,
        fetchState: REQUEST_STATE.LOADING,
      };
    // 略
  }
}

ここでのstateは{ fetchState: 'INITIAL', restaurantsList: [] }になります。なので、…stateの部分でオブジェクトが展開され、6行目のところでfetchStateを上書きしていることになります。

このように業務で使ったことのない自分でさえよく見る構文なので、ちゃんと押さえておいて損はない構文なのかなと思います。

さいごに

今回は、Reactを使う上で押さえておきたかったスプレット構文についてまとめました。Reactを書く機会があったら積極的に使っていきたいと思います。

ここまで読んでいただきありがとうございました。

ABOUT ME
sakai
三重出身の28歳。前職はメーカーで働いていて、プログラミングスクールに通って未経験からWeb業界に転職しました。Railsをメインで使っていて、AWSも少しできます。音楽を聞くこととYoutubeを見るのが好きです。最近はへきトラ劇場にハマってます