updating arrays in state の日本語訳を推敲

Author: honey32

src/content/learn/adding-interactivity.md

@@ -639,7 +639,7 @@ img { width: 200px; height: 200px; }
 
 ## state 内の配列の更新 {/*updating-arrays-in-state*/}
 
-配列もまた、state 内で保持できるミュータブル（mutable; 書き換え可能）な JavaScript オブジェクトの一種ですが、読み取り専用として扱うべきものです。オブジェクトと同様に state に保存された配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）、state が新しい配列を使用するようにセットする必要があります：
+配列もまた、state 内で保持できるミュータブル（mutable, 書き換え可能）な JavaScript オブジェクトの一種ですが、読み取り専用として扱うべきものです。オブジェクトと同様に、state に保存された配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）、state が新しい配列を使用するようにセットする必要があります：
 
 <Sandpack>
 

src/content/learn/updating-arrays-in-state.md

@@ -18,9 +18,9 @@ JavaScript の配列はミュータブル（mutable, 書き換え可能）なも
 
 ## 配列を書き換えずに更新する {/*updating-arrays-without-mutation*/}
 
-JavaScript では、配列とは単なるオブジェクトの一種です。[オブジェクトのときと同様に](/learn/updating-objects-in-state)、**React の state 内にある配列は、読み取り専用として扱う必要があります**。これは、`arr[0] = 'bird'` のような形で配列内の要素に再代入を行ってはならず、`push()` や `pop()` のような配列をミューテーション（mutation, 書き換え）するメソッドを使ってもいけないということです。
+JavaScript において、配列とは単なるオブジェクトの一種です。[オブジェクトのときと同様に](/learn/updating-objects-in-state)、**React の state 内にある配列は、読み取り専用として扱う必要があります**。これは、`arr[0] = 'bird'` のような形で配列内の要素に再代入を行ってはならず、`push()` や `pop()` のような配列をミューテーション（mutation, 書き換え）するメソッドを使ってもいけないということです。
 
-代わりに、配列を更新するたびに、新しい配列を state セッタ関数に渡す必要があります。これを実現するために、state の元の配列から `filter()` や `map()` といった書き換えを行わないメソッドを呼び出して新しい配列を作成できます。そして、結果として得られた新しい配列に state を設定することができます。
+代わりに、いつでも配列を更新したいときには、新しい配列を state セッタ関数に渡す必要があります。これを実現するために、state から取り出した元の配列から、`filter()` や `map()` といった書き換えを行わないメソッドを呼び出すことで、新しい配列を作成できます。そして、結果として得られた新しい配列を state にセットすることができます。
 
 以下は、一般的な配列操作の参照表です。React の state 内の配列を扱う際には、左の列にあるメソッドを避けて、右の列にあるメソッドを使用する必要があります :
 
@@ -40,7 +40,7 @@ JavaScript では、配列とは単なるオブジェクトの一種です。[
 * `slice` は配列や配列の一部をコピーします。
 * `splice` は（要素の挿入や削除という）配列の**ミューテーション**を行います。
 
-React では、state 内のオブジェクトや配列を書き換えたくないため、`slice`（`p` なし！）の方をより頻繁に使用します。[オブジェクトの更新](/learn/updating-objects-in-state)で、ミューテーションとは何で、それがなぜ state で推奨されないかについて説明されています。
+React では、state 内のオブジェクトや配列を書き換えたくないため、`slice`（`p` なし！）の方をより頻繁に使用します。[オブジェクトの更新](/learn/updating-objects-in-state)で、ミューテーションとは何か、それがなぜ state において推奨されないかについて説明されています。
 
 </Pitfall>
 
@@ -88,7 +88,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-代わりに、既存の要素と新しい要素を含む*新しい*配列を作成します。これには複数の方法がありますが、もっとも簡単なのは `...` という[配列スプレッド構文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals)を使用することです。
+代わりに、既存の要素と、末尾には新しい要素を含んだ*新しい*配列を作成します。これには複数の方法がありますが、もっとも簡単なのは `...` という[配列スプレッド構文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals)を使用することです。
 
 ```js
 setArtists( // Replace the state
@@ -280,7 +280,7 @@ body { height: 300px; }
 
 ### 配列内の要素の置換 {/*replacing-items-in-an-array*/}
 
-配列内の一部の要素だけを置き換えたい場合がよくあります。`arr[0] = 'bird'` のような代入は元の配列を書き換えるので、代わりにここでも `map` を使用する必要があります。
+配列内の一部の要素だけを置き換えたい場合がよくあります。`arr[0] = 'bird'` のような代入は元の配列を書き換えてしまうので、代わりにここでも `map` を使用する必要があります。
 
 要素を置き換えるには、`map` を使って新しい配列を作成します。`map` の呼び出し内では、第 2 引数として要素のインデックスを受け取ります。これを使用して、元の要素（第 1 引数）を返すか、他のものを返すかを決定します。
 
@@ -334,7 +334,7 @@ button { margin: 5px; }
 
 ### 配列への挿入 {/*inserting-into-an-array*/}
 
-場合によっては、先頭でも終端でもない特定の位置に要素を挿入したいことがあります。これを行うには、`...` 配列スプレッド構文と `slice()` メソッドを使用できます。`slice()` メソッドを使用すると、配列の「スライス」を切り取ることができます。要素を挿入するには、挿入ポイントの前のスライスを展開した配列、新しい要素、元の配列の残りの部分を作成します。
+場合によっては、先頭でも終端でもない特定の位置に要素を挿入したいことがあります。これを行うには、`...` 配列スプレッド構文と `slice()` メソッドを組み合わせて使用できます。`slice()` メソッドを使用すると、配列の「スライス」を切り取ることができます。要素を挿入するには、挿入ポイントの前のスライス、新しい要素、元の配列の残りの部分からなる配列を作成します。
 
 この例では、"Insert" ボタンは常にインデックス `1` の場所に挿入を行います。
 
@@ -444,7 +444,7 @@ export default function List() {
 
 ここでは、`[...list]` スプレッド構文を使って、最初に元の配列のコピーを作成します。コピーができたら、`nextList.reverse()` や `nextList.sort()` などのミューテーション型のメソッドを使ったり、`nextList[0] = "something"` で個々の要素に代入したりすることができます。
 
-ただし、**配列をコピーしても、その中の既存のアイテムを直接変更することはできません**。これは、コピーが浅く (shallow) 行われるためです。新しい配列には、元の配列と同じ要素が含まれます。そのため、コピーされた配列内のオブジェクトを書き換えると、既存の state が破壊されます。例えば、このようなコードは問題があります。
+ただし、**配列をコピーしても、その中の既存のアイテムを直接変更することはできません**。これは、コピーが浅く (shallow) 行われるためです。新しい配列には、元の配列と同じ要素が含まれます。そのため、コピーされた配列内のオブジェクトを書き換えると、既存の state が書き換えられます。例えば、このようなコードは問題があります。
 
 ```js
 const nextList = [...list];
@@ -779,7 +779,7 @@ updateMyTodos(draft => {
 <Recap>
 
 - 配列を state に入れることができるが、それを直接変更してはいけない。
-- 配列を変更する代わりに、*新しい*バージョンを作成し、state を更新する。
+- 配列を変更せず、代わりに*新しい*版を作成し、state を更新する。
 - `[...arr, newItem]` という配列スプレッド構文を使用して、新しい項目を持つ配列を作成できる。
 - `filter()` や `map()` を使用して、フィルタリングされた、あるいは変換されたアイテムを含む新しい配列を作成できる。
 - Immer を使ってコードを簡潔に保つことができる。