Reactで役立つ分割代入とスプレッド演算子

📅 October 21, 2020

•

⏱️5 min read

Reactでちょくちょく登場すうる、スプレッド演算子と分割代入について、まとめて見ようと思います。両方使いこなすと、Reactのpropsの渡し方がすっきり書ける気がします。

スプレッド演算子

スプレッド構文を使うと、配列式や文字列などの反復可能オブジェクトを、 0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、 0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

凄い、難しく書かれてますが、オブジェクトとか配列を展開してくれる便利なやつですね。

よくある使い方

関数(orオブジェクト)の引数を展開して使う

const arr = [1,2,3]
const hoge = (a,b,c) => {
  return a + b + c
}
console.log(hoge(...arr))　// 6

配列（orオブジェクト）のコピーに使う

スプレッド演算子を使わない場合は、こんな感じになってしまいます。

const objA = { name: 'objA', id: 1}
const cloneObj = Object.assign({}, objA)
console.log(cloneObj) // { name: 'objA', id: 1}

スプレッド演算子を使うとこんな感じになります。コード量も減っていい感じですね。

const objA = { name: 'objA', id: 1}
const cloneObj = {...objA}
console.log(cloneObj)

ちなみに、単純に a = b 的なことをしてしまうと、同じものを参照してしまうので、バグの温床になるので辞めましょう。

const objA = { name: 'objA', id: 1}
const cloneObj = objA
cloneObj.name = 'newObj'
console.log(objA) // { name: 'nnewObj', id: 1}

cloneObjのnameの値を変更すると、objAのnameの値まで変更されてしまう。

配列（orオブジェクト）をマージ

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [...arr1, ...arr2]
console.log(arr3) // [1,2,3,4,5,6]

分割代入

useStateなんかの、Hooksを使いだすとしょっちゅう使う分割代入です。

分割代入 - JavaScript | MDN

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

MDNでは難しく書かれていますが、オブジェクトや配列から欲しい値をいい感じに抽出する方法？ですね。

分割代入を使わない場合だと、下のように残念な感じになりますが、

const user = {
  name: 'masayuki',
  age: 30,
  id: 1
}

const name = user.name
const age = user.age
const id = user.id

分割代入を使うと、一行でスッキリ書けます。

const user = {
  name: 'masayuki',
  age: 30,
  id: 1
}

const {name, age, id} = user
console.log(name,age,id)　// masayuki, 30, 1

新しく、受ける変数名とオブジェクトのキーが一致している必要があります。user.name をuser_nameでうけることはできません。その場合は、もとのオブジェクトのキー名を明示的に書く必要があります。

const user = {
  name: 'masayuki',
  age: 30,
  id: 1
}

const {user_name, age, id} = user // エラーになる
const {name: user_name, age, id } = user // これならOK
console.log(user_name,age,id)　// masayuki, 30, 1

デフォルトの値を設定することも可能です。

const user = {
  name: 'masayuki',
  age: 30,
  id: 1
}

const {name, age, id, gender = 'male'} = user
console.log(name, age, id ,gender) // masayuki, 30, 1, male

Reactの引数で使う場合

よくあるコンポーネントの引数を一旦propsで受けて、分割代入で値を取り出すっていう典型的なよくある例↓

ort React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello 分割代入</h1>
      <Button title="普通のボタン" onClick={() => console.log('押した')}　/>
    </div>
  );
}

const Button = (props) => {
  const {children, onClick} = props
  return <button onClick={onClick}>{children}</button>
}

こんなやつを、スッキリ書くと↓こうなります。これは一旦、引数で無名のオブジェクトを受けて、直接分割代入しています。

const Button = ({children, onClick}) => {
  return <button onClick={onClick}>{children}</button>
}

更に、分割代入ではなく、スプレッド演算子を使って一度展開してobjectに戻すと、コンポーネントにそのまま渡せます。

const Button = (props) => {
  return <button {...props} />
}

ここまですると、コード量は減りますが可読性が落ちる気もするので、ご使用はご注意ください。

それでは、またー!!!

← Prev Next →