state 内のオブジェクトの更新

ミューテーションとは？

state には、どのような JavaScript の値でも格納することができます。

const [x, setX] = useState(0);

これまでに扱ってきたのは、数値、文字列、および真偽値です。これらの種類の JavaScript 値は “イミュータブル”（不変, immutable）、つまり値が変わることがなく「読み取り専用」なものです。再レンダーをトリガするには値を置き換えます。

setX(5);

x という state の値は 0 から 5 に置き換わりましたが、0 という数字そのものが変化したわけではありません。JavaScript の数値、文字列、真偽値のような組み込みプリミティブの値そのものを変化させることは不可能です。

さて、state にオブジェクトが入っている場合を考えてみましょう。

const [position, setPosition] = useState({ x: 0, y: 0 });

技術的には、オブジェクト自体の内容を書き換えることが可能です。これをミューテーション (mutation) と呼びます。

position.x = 5;

ただし、React の state 内にあるオブジェクトは技術的にはミュータブル（mutable, 書き換え可能）であるとしても、数値、真偽値、文字列と同様に、イミュータブルなものであるかのように扱うべきです。書き換えをする代わりに、常に値の置き換えをするべきです。

state を読み取り専用として扱う

言い換えると、state として格納するすべての JavaScript オブジェクトは読み取り専用として扱う必要があります。

以下の例では、現在のポインタ位置を表すオブジェクトを state に保持しています。プレビュー領域でタッチしたりマウスカーソルを動かしたりすると、赤い点が動いて欲しいと思っています。しかし、点が初期位置から動きません：

問題は、このコードにあります。

onPointerMove={e => {
  position.x = e.clientX;
  position.y = e.clientY;
}}

このコードは、直近のレンダーで position に割り当てられたオブジェクトを書き換え、つまりミューテートしています。しかし、state セット関数が使用されないと、React はそのオブジェクトが変更されたことを認識できません。そのため、React は何の反応もしません。これは料理をすでに食べた後で注文を変更しようとするようなものです。state のミューテートは一部のケースでは機能することがありますが、おすすめしません。レンダー内でアクセスできる state 値は、読み取り専用として扱うべきです。

この場合、実際に再レンダーをトリガするためには、新しいオブジェクトを作成し、それを state セット関数に渡す必要があります。

onPointerMove={e => {
  setPosition({
    x: e.clientX,
    y: e.clientY
  });
}}

setPosition を使うことで、React に次のことを伝えます。

• position をこの新しいオブジェクトに置き換えよ
• そしてもう一度このコンポーネントをレンダーせよ

プレビューエリアでタッチするかマウスホバーすることで、赤い点がポインタに追随するようになりましたね。

position.x = e.clientX;
position.y = e.clientY;

const nextPosition = {};
nextPosition.x = e.clientX;
nextPosition.y = e.clientY;
setPosition(nextPosition);

setPosition({
  x: e.clientX,
  y: e.clientY
});

スプレッド構文を使ったオブジェクトのコピー

前の例では、position オブジェクトは現在のカーソル位置から常に新規作成されます。しかし、多くの場合、新しく作成するオブジェクトに既存のデータも含めたいことがあります。例えば、フォームの 1 つのフィールドだけを更新し、他のすべてのフィールドについては以前の値を保持したい、ということがあります。

以下の入力フィールドは、onChange ハンドラが state を書き換えているため、動作しません。

例えば、以下の行は過去のレンダーからの state を書き換えてしまっています。

person.firstName = e.target.value;

望んだ動作を得る確実な方法は、新しいオブジェクトを作成し、setPerson に渡すことです。しかし、ここではフィールドのうちの 1 つだけが変更されているため、既存のデータもコピーしたいでしょう。

setPerson({
  firstName: e.target.value, // New first name from the input
  lastName: person.lastName,
  email: person.email
});

... というオブジェクトスプレッド構文を使用することで、すべてのプロパティを個別にコピーする必要がなくなります。

setPerson({
  ...person, // Copy the old fields
  firstName: e.target.value // But override this one
});

これでフォームが機能します！

各入力フィールドに対して state 変数を別々に宣言していないことに注目してください。大きなフォームでは、すべてのデータをオブジェクトにまとめて保持することが非常に便利です。正しく更新さえしていれば！

... スプレッド構文は「浅い (shallow)」ことに注意してください。これは 1 レベルの深さでのみコピーを行います。これは高速ですが、ネストされたプロパティを更新したい場合は、スプレッド構文を複数回使用する必要があるということでもあります。

ネストされたオブジェクトの更新

以下のようなネストされたオブジェクト構造を考えてみましょう。

const [person, setPerson] = useState({
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
});

person.artwork.city を更新したい場合、ミューテーションで変更する方法は明らかです。

person.artwork.city = 'New Delhi';

しかし、React では state をイミュータブルなものとして扱います！ city を更新するためには、まず（既存のデータも含まれた）新しい artwork オブジェクトを生成する必要があります。そして、新しい artwork を含む新しい person オブジェクトを生成します。

const nextArtwork = { ...person.artwork, city: 'New Delhi' };
const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);

あるいは、単一の関数呼び出しとして記述する場合は以下のようになります。

setPerson({
  ...person, // Copy other fields
  artwork: { // but replace the artwork
    ...person.artwork, // with the same one
    city: 'New Delhi' // but in New Delhi!
  }
});

これは少し冗長ですが、多くのケースでうまく機能します。

let obj = {
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj3 = {
  name: 'Copycat',
  artwork: obj1
};

Immer で簡潔な更新ロジックを書く

もし state が深くネストされている場合、フラットにすることを検討するべきかもしれません。しかし、state の構造を変更したくない場合は、スプレッド構文をネストして使うより短いやり方が欲しくなるかもしれません。人気ライブラリである Immer は、使いやすいミューテート型の構文を使って書きつつ、コピーを自動的に作成してくれるというものです。Immer を使うと、あなたのコードは一見オブジェクトをミューテートして「ルール違反」をしているかのように見えます。

updatePerson(draft => {
  draft.artwork.city = 'Lagos';
});

しかし、通常のミューテーションとは異なり、過去の state は上書きされません！

Immer を試すには：

1. npm install use-immer を実行し、Immer を依存ライブラリとして追加する
2. 次に import { useState } from 'react' を import { useImmer } from 'use-immer' に置き換える

以下は、Immer に変換された上記の例です：

イベントハンドラがどれほど簡潔になったか注目してください。useState と useImmer は 1 つのコンポーネント内で自由に組み合わせることができます。Immer は、state がネストしておりオブジェクトのコピーのためのコードが冗長になりそうな場合でも、更新を行うハンドラを簡潔に保つことができる素晴らしい方法です。