Skip to content

Commit

Permalink
Merge pull request #610 from reactjs/tr/managing-state
Browse files Browse the repository at this point in the history 
Translate "Managing State" and unify styles of chapter top pages
  • Loading branch information
@smikitky
smikitky authored Jul 5, 2023
2 parents 94093ad + 968dd06 commit 5585a99
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 68 deletions.
30 changes: 15 additions & 15 deletions src/content/learn/adding-interactivity.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ button { margin-right: 10px; }

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

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

</LearnMore>

Expand Down Expand Up @@ -229,7 +229,7 @@ button {

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

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

</LearnMore>

Expand All @@ -251,7 +251,7 @@ button {

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

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

</LearnMore>

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

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

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

</LearnMore>

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

</Sandpack>

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

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

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

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

</LearnMore>

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

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

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

Expand Down Expand Up @@ -633,13 +633,13 @@ img { width: 200px; height: 200px; }

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

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

</LearnMore>

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

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

<Sandpack>

Expand Down Expand Up @@ -791,12 +791,12 @@ function ItemList({ artworks, onToggle }) {

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

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

</LearnMore>

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

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

また、すでにこれらのトピックをご存知の方は [state の管理](/learn/managing-state)を読んでみてはいかがでしょうか。
もしくは、すでにこれらのトピックに詳しい場合、[state の管理](/learn/managing-state)について読んでみましょう。
20 changes: 10 additions & 10 deletions src/content/learn/describing-the-ui.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ img { margin: 0 10px 10px 0; height: 90px; }

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

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

</LearnMore>

Expand Down Expand Up @@ -112,7 +112,7 @@ img { margin: 0 10px 10px 0; }

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

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

</LearnMore>

Expand Down Expand Up @@ -181,7 +181,7 @@ img { height: 90px; }

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

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

</LearnMore>

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

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

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

</LearnMore>

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

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

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

</LearnMore>

Expand Down Expand Up @@ -519,12 +519,12 @@ export default function TeaSet() {

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

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

</LearnMore>

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

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

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

0 comments on commit 5585a99

Please sign in to comment.