Skip to content

Commit 5585a99

Browse files
smikitkysmikitky
authored
Merge pull request #610 from reactjs/tr/managing-state
Translate "Managing State" and unify styles of chapter top pages
2 parents 94093ad + 968dd06 commit 5585a99

File tree

4 files changed

+68
-68
lines changed

4 files changed

+68
-68
lines changed

‎src/content/learn/adding-interactivity.md

+15-15
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ button { margin-right: 10px; }
6868

6969
<LearnMore path="/learn/responding-to-events">
7070

71-
イベントハンドラの追加方法を学ぶには **[イベントへの応答](/learn/responding-to-events)** を読んでみましょう。
71+
[**イベントへの応答**](/learn/responding-to-events)を読んで、イベントハンドラの追加方法を学びましょう。
7272

7373
</LearnMore>
7474

@@ -229,7 +229,7 @@ button {
229229

230230
<LearnMore path="/learn/state-a-components-memory">
231231

232-
値を記憶し、インタラクションに応答してその値を更新するには **[state: コンポーネントのメモリ](/learn/state-a-components-memory)** を読んでみましょう。
232+
[**state: コンポーネントのメモリ**](/learn/state-a-components-memory)を読んで、値を記憶し、インタラクションに応答してその値を更新する方法について学びましょう。
233233

234234
</LearnMore>
235235

@@ -251,7 +251,7 @@ button {
251251

252252
<LearnMore path="/learn/render-and-commit">
253253

254-
UI 更新のライフサイクルを学ぶには **[レンダーとコミット](/learn/render-and-commit)** を読んでみましょう。
254+
[**レンダーとコミット**](/learn/render-and-commit)を読んで、UI 更新のライフサイクルを学びましょう。
255255

256256
</LearnMore>
257257

@@ -314,7 +314,7 @@ label, textarea { margin-bottom: 10px; display: block; }
314314

315315
<LearnMore path="/learn/state-as-a-snapshot">
316316

317-
イベントハンドラ内で state が「固定」され、変化していないように見える理由を学ぶには **[state はスナップショットである](/learn/state-as-a-snapshot)** を読んでみましょう。
317+
[**state はスナップショットである**](/learn/state-as-a-snapshot)を読んで、イベントハンドラ内で state が「固定」され、変化していないように見える理由を学びましょう。
318318

319319
</LearnMore>
320320

@@ -354,7 +354,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
354354

355355
</Sandpack>
356356

357-
[state はスナップショットである](/learn/state-as-a-snapshot) で、なぜこのようなことが起こってしまうのかを説明しています。state を設定すると、新しい再レンダーが要求されますが、すでに実行されているコード内の state は変更されません。そのため `setScore(score + 1)` を呼び出した直後は `score` が `0` であり続けます。
357+
[state はスナップショットである](/learn/state-as-a-snapshot)で、なぜこのようなことが起こってしまうのかを説明しています。state を設定すると、新しい再レンダーが要求されますが、すでに実行されているコード内の state は変更されません。そのため `setScore(score + 1)` を呼び出した直後は `score` が `0` であり続けます。
358358

359359
```js
360360
console.log(score); // 0
@@ -402,13 +402,13 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
402402

403403
<LearnMore path="/learn/queueing-a-series-of-state-updates">
404404

405-
次のレンダリングの前に複数の更新をキューに入れる方法を学ぶには **[一連の state の変更をキューに入れる](/learn/queueing-a-series-of-state-updates)** を読んでみましょう。
405+
[**一連の state の更新をキューに入れる**](/learn/queueing-a-series-of-state-updates)を読んで、次回のレンダーの前に複数の更新をキューに入れる方法を学びましょう。
406406

407407
</LearnMore>
408408

409-
## state 内のオブジェクトを更新する方法 {/*updating-objects-in-state*/}
409+
## state 内のオブジェクトの更新 {/*updating-objects-in-state*/}
410410

411-
State はオブジェクトを含むあらゆる種類の JavaScript の値を保持することができます。しかし、React の state 内で保持するオブジェクトや配列を直接変更してはいけません。その代わり、オブジェクトや配列を更新したい場合、既存のもののコピーを作るなどして新しい値を作成し、その新しい値を使って state を変更する必要があります。
411+
state にはオブジェクトを含むあらゆる種類の JavaScript の値を保持することができます。しかし、React の state 内で保持するオブジェクトや配列を直接変更してはいけません。その代わり、オブジェクトや配列を更新したい場合、既存のもののコピーを作るなどして新しい値を作成し、その新しい値を使って state を変更する必要があります。
412412

413413
通常、変更したいオブジェクトや配列をコピーするには `...` というスプレッド構文を使用します。例えば、ネストされたオブジェクトを更新する場合、次のようになります：
414414

@@ -633,13 +633,13 @@ img { width: 200px; height: 200px; }
633633

634634
<LearnMore path="/learn/updating-objects-in-state">
635635

636-
オブジェクトを正しく更新する方法を学ぶために **[state 内のオブジェクトを更新する方法](/learn/updating-objects-in-state)** を読んでみましょう。
636+
[**state 内のオブジェクトの更新**](/learn/updating-objects-in-state)を読んで、オブジェクトを正しく更新する方法を学びましょう。
637637

638638
</LearnMore>
639639

640-
## state 内の配列を更新する方法 {/*updating-arrays-in-state*/}
640+
## state 内の配列の更新 {/*updating-arrays-in-state*/}
641641

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

644644
<Sandpack>
645645

@@ -791,12 +791,12 @@ function ItemList({ artworks, onToggle }) {
791791

792792
<LearnMore path="/learn/updating-arrays-in-state">
793793

794-
配列を正しく更新する方法を学ぶには **[state 内の配列を更新する方法](/learn/updating-arrays-in-state)** を読んでみましょう。
794+
[**state 内の配列の更新**](/learn/updating-arrays-in-state)を読んで、配列を正しく更新する方法を学びましょう。
795795

796796
</LearnMore>
797797

798-
## 次は何？ {/*whats-next*/}
798+
## 次のステップ {/*whats-next*/}
799799

800-
この章を 1 ページずつ読み始めるには[イベントへの応答](/learn/responding-to-events)に移動しましょう!
800+
[イベントへの応答](/learn/responding-to-events)に進んで、この章をページごとに読み進めましょう！
801801

802-
また、すでにこれらのトピックをご存知の方は [state の管理](/learn/managing-state)を読んでみてはいかがでしょうか。
802+
もしくは、すでにこれらのトピックに詳しい場合、[state の管理](/learn/managing-state)について読んでみましょう。

‎src/content/learn/describing-the-ui.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
5757

5858
<LearnMore path="/learn/your-first-component">
5959

60-
**[初めてのコンポーネント](/learn/your-first-component)** を読んで、React コンポーネントの宣言方法、使用方法について学びましょう。
60+
[**初めてのコンポーネント**](/learn/your-first-component)を読んで、React コンポーネントの宣言方法、使用方法について学びましょう。
6161

6262
</LearnMore>
6363

@@ -112,7 +112,7 @@ img { margin: 0 10px 10px 0; }
112112

113113
<LearnMore path="/learn/importing-and-exporting-components">
114114

115-
**[コンポーネントのインポートとエクスポート](/learn/importing-and-exporting-components)** を読んで、コンポーネントを個々の専用ファイルに分割する方法を学びましょう。
115+
[**コンポーネントのインポートとエクスポート**](/learn/importing-and-exporting-components)を読んで、コンポーネントを個々の専用ファイルに分割する方法を学びましょう。
116116

117117
</LearnMore>
118118

@@ -181,7 +181,7 @@ img { height: 90px; }
181181

182182
<LearnMore path="/learn/writing-markup-with-jsx">
183183

184-
**[JSX でマークアップを記述する](/learn/writing-markup-with-jsx)** を読んで、正しい JSX の書き方を学びましょう。
184+
[**JSX でマークアップを記述する**](/learn/writing-markup-with-jsx)を読んで、正しい JSX の書き方を学びましょう。
185185

186186
</LearnMore>
187187

@@ -229,7 +229,7 @@ body > div > div { padding: 20px; }
229229
230230
<LearnMore path="/learn/javascript-in-jsx-with-curly-braces">
231231
232-
**[JSX に波括弧で JavaScript を含める](/learn/javascript-in-jsx-with-curly-braces)**を読んで、JSX 内から JavaScript のデータにアクセスする方法を学びましょう。
232+
[**JSX に波括弧で JavaScript を含める**](/learn/javascript-in-jsx-with-curly-braces)を読んで、JSX 内から JavaScript のデータにアクセスする方法を学びましょう。
233233
234234
</LearnMore>
235235
@@ -310,7 +310,7 @@ export function getImageUrl(person, size = 's') {
310310

311311
<LearnMore path="/learn/passing-props-to-a-component">
312312

313-
**[コンポーネントに props を渡す](/learn/passing-props-to-a-component)** を読んで、props の渡し方と読み取り方を学びましょう。
313+
[**コンポーネントに props を渡す**](/learn/passing-props-to-a-component)を読んで、props の渡し方と読み取り方を学びましょう。
314314

315315
</LearnMore>
316316

@@ -358,7 +358,7 @@ export default function PackingList() {
358358
359359
<LearnMore path="/learn/conditional-rendering">
360360
361-
**[条件付きレンダー](/learn/conditional-rendering)** を読んで、コンテンツを条件付きでレンダーするためのさまざまな方法を学びましょう。
361+
[**条件付きレンダー**](/learn/conditional-rendering)を読んで、コンテンツを条件付きでレンダーするためのさまざまな方法を学びましょう。
362362
363363
</LearnMore>
364364
@@ -458,7 +458,7 @@ h2 { font-size: 20px; }
458458

459459
<LearnMore path="/learn/rendering-lists">
460460

461-
**[リストのレンダー](/learn/rendering-lists)** を読んで、コンポーネントのリストをレンダーする方法と、key の選択方法を学びましょう。
461+
[**リストのレンダー**](/learn/rendering-lists)を読んで、コンポーネントのリストをレンダーする方法と、key の選択方法を学びましょう。
462462

463463
</LearnMore>
464464

@@ -519,12 +519,12 @@ export default function TeaSet() {
519519

520520
<LearnMore path="/learn/keeping-components-pure">
521521

522-
**[コンポーネントを純粋に保つ](/learn/keeping-components-pure)** を読んで、予測可能な純関数としてコンポーネントを作成する方法を学びましょう。
522+
[**コンポーネントを純粋に保つ**](/learn/keeping-components-pure)を読んで、予測可能な純関数としてコンポーネントを作成する方法を学びましょう。
523523

524524
</LearnMore>
525525

526526
## 次のステップ {/*whats-next*/}
527527

528-
[初めてのコンポーネント](/learn/your-first-component) に進んで、この章をページごとに読み進めましょう！
528+
[初めてのコンポーネント](/learn/your-first-component)に進んで、この章をページごとに読み進めましょう！
529529

530-
もしくは、すでにこれらのトピックに詳しい場合、[インタラクティビティの追加](/learn/adding-interactivity) について読んでみましょう。
530+
もしくは、すでにこれらのトピックに詳しい場合、[インタラクティビティの追加](/learn/adding-interactivity)について読んでみましょう。

0 commit comments

Comments
 (0)