最近、配列に対して呼び出すことができる新しい相互運用可能なメソッド Array.prototype.with() がブラウザに追加されました。
この記事では、このメソッドの仕組みと、元の配列を変更せずに配列を更新する方法について説明します。
Array.prototype.with(index, value) の概要
Array.prototype.with(index, value) メソッドは、指定された新しい value に index を設定して、呼び出された配列のコピーを返します。
次の例は、年齢層の配列を示しています。配列の新しいコピーを作成し、第 2 の年齢を 15 から 16 に変更します。
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
コードの詳細: ages.with(...) は、元の配列を変更せずに ages 変数のコピーを返します。ages.with(1, …) は 2 番目の項目（index = 1）を置き換えます。ages.with(1, 16) は 2 番目の項目を 16 に割り当てます。
これで、変更した配列の新しいコピーを作成できました。
これは、元の配列が変更されないようにしたい場合に非常に便利です。この記事では、この方法のユースケースをいくつか取り上げています。ここで、角かっこ表記を使用した場合にどうなるかを見てみましょう。
const ages = [10, 15, 20, 25];
const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)
ご覧のとおり、この例では ages 変数も変更されています。これは、ages = newAges を割り当てた場合、JavaScript が配列をコピーするのではなく、他の配列への参照を作成するためです。したがって、一方の変更は、両方が同じ配列を参照しているため、他方にも影響します。
Array.prototype.with() と不変性
React（および Redux）、Vue など、多くのフロントエンド ライブラリとフレームワークの中核は不変性です。
また、他のライブラリやフレームワークでは、必ずしも不変性が必要というわけではありませんが、パフォーマンスを向上させるために不変性の使用が推奨されています（Angular と Lit）。
そのため、デベロッパーは配列のコピーを返す他のメソッドを使用する必要があったため、コードの可読性が犠牲になりました。
const ages = [10, 15, 20, 25];
const newAges = ages.map((age, index) => {
if (index === 1) {
return 16;
}
return age;
});
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)
以下に、React で .with() を useState と組み合わせて使用し、アイテムの配列を不変に更新する方法を示す Codepen の例を示します。
.with() メソッドは配列のコピーを返すため、複数の .with() 呼び出しや他の配列メソッドを連結できます。次の例では、配列から 2 番目と 3 番目の年齢を増分する方法を示します。
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)
console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
その他の新しい不変メソッド
最近、他の 3 つの方法の相互運用が可能になりました。
Array.prototype.toReversed(): 元の配列を変更せずに配列を反転します。Array.prototype.toSorted(): 元の配列を変更せずに配列を並べ替えます。Array.prototype.toSpliced():.splice()のように機能しますが、元の配列は変更されません。
MDN によると、これら 3 つの方法は、対応するもののコピー バージョンです。これらの方法は、不変性が想定される場合、または望ましい場合にも使用できます。
結論として、JavaScript では、この記事で紹介した 4 つの方法のいずれかを使用することで、不変の更新を簡単に実行できます。具体的には、.with() メソッドを使用すると、元の配列を変更することなく、配列の 1 つの要素を簡単に更新できます。