Reactで覚えて置きたいスプレッド構文

スプレッド構文とは...

スプレッド構文とはJavaScriptの機能になります。
...変数がスプレッド構文にあたり、配列やオブジェクトを展開し、値渡しをする際に使います。
下記サンプルコードのようにObject.assignを簡単にかけるようにした機能と覚えて問題ないです。

const person = {name: "名前", age:0}

const copyPerson = Object.assign({}, person);
console.log(copyPerson)

// スプレッド構文とObject.assignは両方とも変数を展開する
const copyPerson1 = {...person};
console.log(copyPerson1)

出力も同じになっていますね。
出力

{
    "name": "名前",
    "age": 0
}

{
    "name": "名前",
    "age": 0
}

下記は印象に残ったスプレッド構文の書き方になります。

const person = {name: "名前", age:0}

const tanaka1 = {...person}
console.log(tanaka1)

const tanaka2 = {...person, name: "田中", age:20}
console.log(tanaka2)

const tanaka3 = {...person, address: "沖縄"}
console.log(tanaka3)

tanaka2ではオブジェクトを展開してかつ、nameとageを更新します。
これはpersonにnameとageが存在したので更新されました。

次にtanaka3では新しくaddressが付与されました。
これはpersonにaddressが存在しなかったので付与されました。

出力

{
    "name": "名前",
    "age": 0
}

{
    "name": "田中",
    "age": 20
}

{
    "name": "名前",
    "age": 0,
    "address": "沖縄"
}

React関連のソースコードでは状態変化でよく使われているなと思いました。
下記は年齢を増やしていくだけのサンプルになり、setStateを使って状態変化をする際に展開してageだけ更新しています。

import React, { useState } from 'react'

const App = props => {
  const [state, setState] = useState(props)
  const { name, age } = state

  return (
    <>
      <p>名前:{name} 年齢:{age}歳</p>
      // スプレッド構文により、ageを更新
      <button onClick={() => setState({...state, age: age + 1})}>+1</button>
    </>
  )
}

App.defaultProps = {
  name: '初期値',
  age: '20'
}

export default App

まとめ

今回はスプレッド構文について解説しました。
よろしければいいねお願いします。