state 内の配列の更新

配列を書き換えずに更新する

JavaScript では、配列とは単なるオブジェクトの一種です。オブジェクトのときと同様に、React の state 内にある配列は、読み取り専用として扱う必要があります。これは、arr[0] = 'bird' のような形で配列内の要素に再代入を行ってはならず、push() や pop() のような配列をミューテーション（mutation, 書き換え）するメソッドを使ってもいけないということです。

代わりに、配列を更新するたびに、新しい配列を state セッタ関数に渡す必要があります。これを実現するために、state の元の配列から filter() や map() といった書き換えを行わないメソッドを呼び出して新しい配列を作成できます。そして、結果として得られた新しい配列に state を設定することができます。

以下は、一般的な配列操作の参照表です。React の state 内の配列を扱う際には、左の列にあるメソッドを避けて、右の列にあるメソッドを使用する必要があります :

また、どちらの列のメソッドも使用できるようにしてくれる Immer を使う方法もあります。

配列に要素を追加

push() は配列の書き換えを行います。これは避けるべきです。

代わりに、既存の要素と新しい要素を含む新しい配列を作成します。これには複数の方法がありますが、もっとも簡単なのは ... という配列スプレッド構文を使用することです。

setArtists( // Replace the state
  [ // with a new array
    ...artists, // that contains all the old items
    { id: nextId++, name: name } // and one new item at the end
  ]
);

これで正しく動作します。

配列スプレッド構文を使用すれば、元の ...artists の先頭に要素を追加することもできます：

setArtists([
  { id: nextId++, name: name },
  ...artists // Put old items at the end
]);

このように、スプレッド構文は、push() で配列の末尾に追加することと unshift() で配列の先頭に追加することの両方の役割を果たせます。上記のサンドボックスで試してみてください！

配列から要素を削除

配列から要素を削除する最も簡単な方法は、それをフィルタリングして取り除いた、新しい配列を作ることです。つまり、その要素を含まない新しい配列を生成します。これには filter メソッドを使用します。例えば：

何度か “Delete” タンをクリックして動作を確認したら、クリックハンドラを見て見ましょう。

setArtists(
  artists.filter(a => a.id !== artist.id)
);

ここで、artists.filter(a => a.id !== artist.id) というコードは「artist.id と異なる ID を持つ artists のみの配列を作成する」という意味です。言い換えると、各アーティストの “Delete” ボタンは、該当アーティストを配列からフィルタリングして取り除き、結果として得られる配列で再レンダーを要求します。filter は元の配列を書き換えないことに注意してください。

配列の変換

配列の一部またはすべての要素を変更したい場合は、map() を使用して新しい配列を作成できます。map に渡す関数は、データやインデックス（またはその両方）に基づいて各要素に何をするかを決定できます。

この例では、配列に 2 つの円と 1 つの正方形の座標が含まれています。ボタンを押すと、円だけが 50 ピクセル下に移動します。これは、map() を使用して新しいデータの配列を作成することで行われます。

配列内の要素の置換

配列内の一部の要素だけを置き換えたい場合がよくあります。arr[0] = 'bird' のような代入は元の配列を書き換えるので、代わりにここでも map を使用する必要があります。

要素を置き換えるには、map を使って新しい配列を作成します。map の呼び出し内では、第 2 引数として要素のインデックスを受け取ります。これを使用して、元の要素（第 1 引数）を返すか、他のものを返すかを決定します。

配列への挿入

場合によっては、先頭でも終端でもない特定の位置に要素を挿入したいことがあります。これを行うには、... 配列スプレッド構文と slice() メソッドを使用できます。slice() メソッドを使用すると、配列の「スライス」を切り取ることができます。要素を挿入するには、挿入ポイントの前のスライスを展開した配列、新しい要素、元の配列の残りの部分を作成します。

この例では、 “Insert” ボタンは常にインデックス 1 の場所に挿入を行います。

配列へのその他の変更

スプレッド構文や、map()、filter() などの書き換えを行わないメソッドを使っているだけでは不可能なこともあります。例えば、配列を逆順にしたり、ソートしたりすることができません。JavaScript の reverse() や sort() メソッドは元の配列を書き換えるため、直接使うことはできません。

ただし、最初に配列をコピーしてから、そのコピーに変更を加えることはできます。

例えば、次のようになります。

ここでは、[...list] スプレッド構文を使って、最初に元の配列のコピーを作成します。コピーができたら、nextList.reverse() や nextList.sort() などのミューテーション型のメソッドを使ったり、nextList[0] = "something" で個々の要素に代入したりすることができます。

ただし、配列をコピーしても、その中の既存のアイテムを直接変更することはできません。これは、コピーが浅く (shallow) 行われるためです。新しい配列には、元の配列と同じ要素が含まれます。そのため、コピーされた配列内のオブジェクトを書き換えると、既存の state が破壊されます。例えば、このようなコードは問題があります。

const nextList = [...list];
nextList[0].seen = true; // Problem: mutates list[0]
setList(nextList);

nextList と list は異なる 2 つの配列ですが、nextList[0] と list[0] は同じオブジェクトを指しています。そのため、nextList[0].seen を変更することで、list[0].seen も変更されます。これは state のミューテーションであり、避けるべきです！ この問題は、ネストされた JavaScript オブジェクトの更新と同様の方法で解決できます。変更を加えたい個々の要素を、書き換える代わりにコピーするということです。以下で説明します。

配列内のオブジェクトを更新する

オブジェクトは、実際には配列の「中に」あるわけではありません。コード中では「中に」あるように見えますが、配列内の各オブジェクトはそれぞれ独立した値であり、配列はそれらを「参照」しています。これが、list[0] のようなネストしたフィールドを変更する際に注意が必要な理由です。他の人のアートワークリストが、配列の同じ要素を指しているかもしれません！

ネストされた state を更新する際には、更新したい箇所からトップレベルまでのコピーを作成する必要があります。どのように行うのか見てみましょう。

この例では、2 つの別々のアートワークリストが同じ初期 state を持っています。これらは独立していることになっているのですが、ミューテーションが起きているため state が誤って共有され、一方のリストでボックスをチェックするともう一方のリストに影響してしまっています。

問題はこのコードです。

const myNextList = [...myList];
const artwork = myNextList.find(a => a.id === artworkId);
artwork.seen = nextSeen; // Problem: mutates an existing item
setMyList(myNextList);

myNextList という配列自体は新しいものですが、個々の要素そのものは元の myList 配列と同じです。そのため、artwork.seen を変更することで、元のアートワークも変更されます。そのアートワークは yourList 内にも存在するため、バグが発生します。このようなバグは理解するのが難しいことがありますが、幸いにも state のミューテーションさえ避けておけば、起こさずに済みます。

ミューテーションをせずに、古い要素を更新された要素と置き換えるには、map を使用できます。

setMyList(myList.map(artwork => {
  if (artwork.id === artworkId) {
    // Create a *new* object with changes
    return { ...artwork, seen: nextSeen };
  } else {
    // No changes
    return artwork;
  }
}));

ここで、... はオブジェクトのスプレッド構文であり、オブジェクトのコピーを作成するために使われます。

このアプローチでは、既存の state の要素を書き換えないため、バグは修正されています。

一般的には、作成したばかりのオブジェクト以外は書き換えてはいけません。新しいアートワークを挿入する場合にその新しい要素を書き換えても構いませんが、state にすでに存在するものを扱う場合は、コピーを作成する必要があります。

Immer を使って簡潔な更新ロジックを書く

配列がネストされている場合、書き換えなしで更新を行うコードは冗長になりがちです。オブジェクトのときと同様ですが、

• 一般的には、state を 2〜3 レベル以上深く更新する必要はないはずです。state オブジェクトが非常に深い場合は、別の構造に再構成してフラットにすることができます。
• state 構造を変更したくない場合は、Immer を使用して、書きやすいミューテート型の構文で記述しつつコピーを生成することができます。

以下は、Immer を使用して書き直したアートワークリストの例です。

Immer を使用することで artwork.seen = nextSeen のような書き換えができるようになりました。

updateMyTodos(draft => {
  const artwork = draft.find(a => a.id === artworkId);
  artwork.seen = nextSeen;
});

これが可能なのは、Immer から渡される特別な draft オブジェクトを書き換えているのであり、元の state は書き換えていないためです。同様に、draft の内容に対して push() や pop() などのミューテーション型のメソッドを使用することもできます。

裏側では、Immer は 常に、draft に対して行った書き換え操作に基づいて、次の state をゼロから構築します。これにより、state を書き換えてしまう心配をせず、イベントハンドラを非常に簡潔に保つことができます。