Skip to content

Translate "Managing State" and unify styles of chapter top pages #610

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 5, 2023
Merged

Translate "Managing State" and unify styles of chapter top pages #610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
89ec6d1
Translate "Managing State" and unify styles of chapter top pages
smikitky Jun 15, 2023
968dd06
微修正
smikitky Jun 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions src/content/learn/adding-interactivity.md
View file
Open in desktop
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
Open in desktop
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