未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

Reactでスプレッド演算子を使ったデータ更新についてまとめてみました

Reactでデータを更新するときにスプレッド演算子をよく使うことがあります。今回は、その使い方と理由、具体的な使いどころをまとめてみました。

スプレッド演算子の使い方

まずは基本的な使い方をおさらいします。スプレッド演算子...)は、オブジェクトや配列のコピーを作るために使います。例えば、以下のように使います:

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4]; // [1, 2, 3, 4]

const originalObject = { a: 1, b: 2 };
const newObject = { ...originalObject, c: 3 }; // { a: 1, b: 2, c: 3 }

なんで使うのか?

スプレッド演算子を使う理由は、主にイミュータブルの原則に従うため です。Reactでは、状態(state)を直接変更しないようにするのが基本です。直接変更すると、Reactが変更を検知できなくて、UIが正しく更新されないことがあるからです。

イミュータブルなデータ構造を使うことで、Reactが状態の変更を正しく検知できるようにします。つまり、元のオブジェクトや配列をそのまま変更せず、新しいコピーを作ることで状態を更新するのです。

どんな時に使うか?

スプレッド演算子を使うタイミングは、主に以下のような場合です:

  1. 状態を更新するとき: 状態を更新するときは、元の状態をコピーして、新しい値を追加したり変更したりします。
   const [state, setState] = useState({ name: 'John', age: 30 });

   const updateAge = () => {
     setState(prevState => ({
       ...prevState,
       age: prevState.age + 1
     }));
   };
  1. 配列を操作するとき: 配列に新しい要素を追加したり、要素を削除したりするときにも使います。
   const [items, setItems] = useState([1, 2, 3]);

   const addItem = () => {
     setItems(prevItems => [...prevItems, 4]);
   };

   const removeItem = () => {
     setItems(prevItems => prevItems.filter(item => item !== 2));
   };

まとめ

スプレッド演算子を使うことで、Reactのイミュータブルの原則に従いながら、状態の更新や配列の操作をシンプルに行うことができます。元のデータを直接変更せず、新しいコピーを作ることで、Reactが変更を正しく検知してUIを更新できるようにするのです。

Reactでデータを扱うときは、スプレッド演算子を上手に使って、効率よくイミュータブルなデータ構造を保つようにしましょう。