分割代入、スプレッド構文についてまとてみた

はじめに

最近のreact,next.jsなどで開発をしている際に、分割代入・スプレッド構文を見るようになりました。あまり理解できてなかったので自分なりに整理してまとめてみました。

スプレッド構文

スプレッド構文は、配列やオブジェクトの要素を展開、新しい配列を作成する機能です。

例　

// 従来の方法：配列を結合する
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = arr1.concat(arr2);
console.log(merged); // [1, 2, 3, 4, 5, 6]

// スプレッド構文を使う（モダンな方法）
const merged2 = [...arr1, ...arr2];
console.log(merged2); // [1, 2, 3, 4, 5, 6]

// 要素を途中に挿入することもできる
const merged3 = [0, ...arr1, 3.5, ...arr2, 7];
console.log(merged3); // [0, 1, 2, 3, 3.5, 4, 5, 6, 7]

/ 従来の方法：オブジェクトをマージする
const user1 = { name: 'Taro', age: 25 };
const user2 = Object.assign({}, user1, { city: 'Tokyo' });
console.log(user2); // { name: 'Taro', age: 25, city: 'Tokyo' }

// スプレッド構文を使う（モダンな方法）
const user3 = { ...user1, city: 'Tokyo' };
console.log(user3); // { name: 'Taro', age: 25, city: 'Tokyo' }

// 既存のプロパティを上書きすることもできる
const updated = { ...user1, age: 26 };
console.log(updated); // { name: 'Taro', age: 26 }

実例　Reactで状態を更新する際に、スプレッド構文を使用して状態の一部を変更しながら、他の部分をそのまま保持(この場合はageを保持)

import React, { useState } from 'react';

const MyComponent = () => {
  const [state, setState] = useState({
    name: 'Taro',
    age: 30,
  });

  const handleNameChange = (e) => {
    setState({ ...state, name: e.target.value });
  };

  return (
    <>
      <input type="text" value={state.name} onChange={handleNameChange} />
      <p>{state.name} is {state.age} years old.</p>
    </>
  );
};

分割代入は、配列やオブジェクトから値を取り出し、複数の変数に一度代入する機能です。

例

// 従来の方法
const colors = ['red', 'green', 'blue'];
const firstColor = colors[0];
const secondColor = colors[1];

// 分割代入を使う（モダンな方法）
const [first, second, third] = colors;
console.log(first);  // 'red'
console.log(second); // 'green'
console.log(third);  // 'blue'

// 必要な要素だけを取得できる
const [primary, ...rest] = colors;
console.log(primary); // 'red'
console.log(rest);    // ['green', 'blue']

// デフォルト値を指定することもできる
const [main, sub = 'white'] = ['black'];
console.log(main); // 'black'
console.log(sub);  // 'white'（指定されなかったのでデフォルト値が使われる）

// 従来の方法
const user = { name: 'Taro', age: 25, city: 'Tokyo' };
const name = user.name;
const age = user.age;

// 分割代入を使う（モダンな方法）
const { name, age, city } = user;
console.log(name); // 'Taro'
console.log(age);  // 25
console.log(city); // 'Tokyo'

// 必要なプロパティだけを取得できる
const { name, city } = user;
console.log(name); // 'Taro'
console.log(city); // 'Tokyo'

// 変数名を変えたい場合はコロンを使う
const { name: userName, age: userAge } = user;
console.log(userName); // 'Taro'
console.log(userAge);  // 25

// デフォルト値を指定できる
const { name, country = 'Japan' } = user;
console.log(country); // 'Japan'

実例　APIから取得したデータを分割代入で扱う

const apiResponse = {
  id: 123,
  name: 'Taro Yamada',
  email: '[e-mail]',
  age: 25,
  city: 'Tokyo',
  bio: 'Hello, I am a developer!',
  createdAt: '2023-01-15',
  updatedAt: '2024-02-20'
};

// 分割代入で必要な情報だけを取得（画面表示に必要な情報のみ）
const { id, name, email, age, city, bio } = apiResponse;

console.log(name);  // 'Taro Yamada'
console.log(email); // '[e-mail]'

まとめ

• スプレッド構文 は配列やオブジェクトの要素を展開・結合・コピーするための構文で、React の状態更新などで頻繁に使われます。
• 分割代入 は配列やオブジェクトから必要な値だけを変数に取り出すための使う構文で、コードの可読性を高めます。