Skip to content

Commit d9bffc4

Browse files
committed
updating arrays in state の日本語訳を推敲
1 parent 9c3a585 commit d9bffc4

File tree

2 files changed

+9
-9
lines changed

2 files changed

+9
-9
lines changed

src/content/learn/adding-interactivity.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ img { width: 200px; height: 200px; }
639639

640640
## state 内の配列の更新 {/*updating-arrays-in-state*/}
641641

642-
配列もまた、state 内で保持できるミュータブル(mutable; 書き換え可能)な JavaScript オブジェクトの一種ですが、読み取り専用として扱うべきものです。オブジェクトと同様に state に保存された配列を更新したい場合、新しいものを作成し(または既存のもののコピーを作成し)、state が新しい配列を使用するようにセットする必要があります:
642+
配列もまた、state 内で保持できるミュータブル(mutable, 書き換え可能)な JavaScript オブジェクトの一種ですが、読み取り専用として扱うべきものです。オブジェクトと同様にstate に保存された配列を更新したい場合、新しいものを作成し(または既存のもののコピーを作成し)、state が新しい配列を使用するようにセットする必要があります:
643643

644644
<Sandpack>
645645

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ JavaScript の配列はミュータブル(mutable, 書き換え可能)なも
1818

1919
## 配列を書き換えずに更新する {/*updating-arrays-without-mutation*/}
2020

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

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

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

@@ -40,7 +40,7 @@ JavaScript では、配列とは単なるオブジェクトの一種です。[
4040
* `slice` は配列や配列の一部をコピーします。
4141
* `splice` は(要素の挿入や削除という)配列の**ミューテーション**を行います。
4242

43-
React では、state 内のオブジェクトや配列を書き換えたくないため、`slice``p` なし!)の方をより頻繁に使用します。[オブジェクトの更新](/learn/updating-objects-in-state)で、ミューテーションとは何で、それがなぜ state で推奨されないかについて説明されています
43+
React では、state 内のオブジェクトや配列を書き換えたくないため、`slice``p` なし!)の方をより頻繁に使用します。[オブジェクトの更新](/learn/updating-objects-in-state)で、ミューテーションとは何か、それがなぜ state において推奨されないかについて説明されています
4444

4545
</Pitfall>
4646

@@ -88,7 +88,7 @@ button { margin-left: 5px; }
8888

8989
</Sandpack>
9090

91-
代わりに、既存の要素と新しい要素を含む*新しい*配列を作成します。これには複数の方法がありますが、もっとも簡単なのは `...` という[配列スプレッド構文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals)を使用することです。
91+
代わりに、既存の要素と、末尾には新しい要素を含んだ*新しい*配列を作成します。これには複数の方法がありますが、もっとも簡単なのは `...` という[配列スプレッド構文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals)を使用することです。
9292

9393
```js
9494
setArtists( // Replace the state
@@ -280,7 +280,7 @@ body { height: 300px; }
280280

281281
### 配列内の要素の置換 {/*replacing-items-in-an-array*/}
282282

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

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

@@ -334,7 +334,7 @@ button { margin: 5px; }
334334

335335
### 配列への挿入 {/*inserting-into-an-array*/}
336336

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

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

@@ -444,7 +444,7 @@ export default function List() {
444444

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

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

449449
```js
450450
const nextList = [...list];
@@ -779,7 +779,7 @@ updateMyTodos(draft => {
779779
<Recap>
780780

781781
- 配列を state に入れることができるが、それを直接変更してはいけない。
782-
- 配列を変更する代わりに、*新しい*バージョンを作成し、state を更新する。
782+
- 配列を変更せず、代わりに*新しい*版を作成し、state を更新する。
783783
- `[...arr, newItem]` という配列スプレッド構文を使用して、新しい項目を持つ配列を作成できる。
784784
- `filter()``map()` を使用して、フィルタリングされた、あるいは変換されたアイテムを含む新しい配列を作成できる。
785785
- Immer を使ってコードを簡潔に保つことができる。

0 commit comments

Comments
 (0)