Skip to content

Polish "Describing the UI" #694

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 1 commit into from
Oct 2, 2023
Merged

Polish "Describing the UI" #694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 11 additions & 11 deletions src/content/learn/conditional-rendering.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: 条件付きレンダー

<Intro>

様々な条件によって、コンポーネントに表示させる内容を変化させたいことがあります。React では、JavaScript の `if` 文や `&&`、`? :` 演算子などの構文を使うことで、JSX を条件付きでレンダーできます。
様々な条件に基づいて、コンポーネントに表示させる内容を変化させたいことがあります。React では、JavaScript の `if` 文や `&&`、`? :` 演算子などの構文を使うことで、JSX を条件付きでレンダーできます。

</Intro>

Expand All @@ -18,7 +18,7 @@ title: 条件付きレンダー

## 条件を満たす場合に JSX を返す {/*conditionally-returning-jsx*/}

例えば、複数の `Item` をレンダーする `PackingList` コンポーネントがあり、各 `Item` に梱包が終わっているかどうか表示させたいとしましょう。
例えば、複数の `Item` をレンダーする `PackingList` コンポーネントがあり、各 `Item` に梱包が終わっているかどうかを表示させたいとしましょう。

<Sandpack>

Expand Down Expand Up @@ -52,7 +52,7 @@ export default function PackingList() {

</Sandpack>

複数の `Item` コンポーネントのうち一部のみで `isPacked` プロパティが `false` ではなく `true` になっていることに注意してください。目的は、`isPacked={true}` の場合にのみチェックマーク (✔) を表示させることです。
複数の `Item` コンポーネントのうち一部のみで、props である `isPacked` が `false` ではなく `true` になっていることに注意してください。目的は、`isPacked={true}` の場合にのみチェックマーク (✔) を表示させることです。

これは [`if`/`else` 文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)を使って、以下のように書くことができます。

Expand All @@ -63,7 +63,7 @@ if (isPacked) {
return <li className="item">{name}</li>;
```

`isPacked` プロパティが `true` だった場合、このコードは**異なる JSX ツリーを返します**。この変更により、一部のアイテムの末尾にチェックマークが表示されます。
`isPacked` プロパティが `true` だった場合、このコードは**異なる JSX ツリーを返します**。この変更により、一部のアイテムの末尾にチェックマークが表示されるようになります。

<Sandpack>

Expand Down Expand Up @@ -208,7 +208,7 @@ return (

#### この 2 つの例は完全に同等か？ {/*are-these-two-examples-fully-equivalent*/}

オブジェクト指向プログラミングのバックグラウンドをお持ちの場合、2 つの例の一方では `<li>` の「インスタンス」が 2 つ作られるため、これらがわずかに異なると考えてしまうかもしれません。しかし JSX 要素は内部に状態を持たず、実際の DOM 要素でもないため、「インスタンス」ではありません。JSX は軽量な「説明書き」であり設計図のようなものです。従って上記の 2 つの例は実際に完全に同等です。[Preserving and Resetting State](/learn/preserving-and-resetting-state) を参照してください。
オブジェクト指向プログラミングのバックグラウンドをお持ちの場合、2 つの例の一方では `<li>` の「インスタンス」が 2 つ作られているため、これらがわずかに異なると考えてしまうかもしれません。しかし JSX 要素は内部に状態を持たず、実際の DOM 要素でもないため、「インスタンス」ではありません。JSX は軽量な「説明書き」であり設計図のようなものです。従って上記の 2 つの例は実際に完全に同等です。[state の保持とリセット](/learn/preserving-and-resetting-state)を参照してください。

</DeepDive>

Expand Down Expand Up @@ -272,7 +272,7 @@ return (

これは「*`isPacked` なら (`&&`)、チェックマークをレンダーし、それ以外の場合には何もレンダーしない*」のように読んでください。

以下が完全に動作する例です：
以下が完全に動作する例です。

<Sandpack>

Expand Down Expand Up @@ -536,7 +536,7 @@ export default function PackingList() {

#### `&&` 演算子を使ったアイテムの重要度の表示 {/*show-the-item-importance-with*/}

この例では、それぞれの `Item` が数値型の `importance` プロパティを受け取ります。重要度が 0 以外の場合に限り、`&&` 演算子を使用して、斜体で "_(Importance: X)_" と表示するようにしてください。以下のような結果になるようにしましょう。
この例では、それぞれの `Item` が数値型の props である `importance` を受け取ります。重要度が 0 以外の場合に限り、`&&` 演算子を使用して、斜体で "_(Importance: X)_" と表示するようにしてください。以下のような結果になるようにしましょう。

* Space suit _(Importance: 9)_
* Helmet with a golden leaf
Expand Down Expand Up @@ -582,7 +582,7 @@ export default function PackingList() {

<Solution>

以下のようにすれば動きます：
以下のようにすれば動きます。

<Sandpack>

Expand Down Expand Up @@ -665,11 +665,11 @@ export default function DrinkList() {

</Sandpack>

コードを `if` 文を使用するようにリファクタリングしたら、さらに簡素化するアイデアはありますか？
コードを `if` 文を使用するようにリファクタリングできたら、さらに簡素化するアイデアを考えてみてください。

<Solution>

複数のアプローチがありますが、ここでは 1 つの出発点として以下を示します：
複数のアプローチがありますが、ここでは 1 つの出発点として以下を示します。

<Sandpack>

Expand Down Expand Up @@ -714,7 +714,7 @@ export default function DrinkList() {

これで、各ドリンクの情報が複数の条件分岐に分散されずにグループ化されてました。将来新しいドリンクを追加する際にも簡単になります。

別の解決策として、情報をオブジェクトに移動することで、条件を完全に削除することも可能です：
別の解法として、情報をオブジェクトに移動することで、条件を完全に削除することも可能です。

<Sandpack>

Expand Down
4 changes: 2 additions & 2 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 @@ -23,7 +23,7 @@ React は、ユーザインターフェース（UI）を表示するための Ja

## 初めてのコンポーネント {/*your-first-component*/}

React アプリケーションは*コンポーネント*と呼ばれる独立した UI のパーツで構成されています。React コンポーネントとは、マークアップを添えることができる JavaScript 関数です。コンポーネントは、ボタンのような小さなものであることもあれば、ページ全体といった大きなものであることもあります。以下は、3 つの `Profile` コンポーネントをレンダーする `Gallery` コンポーネントの例です：
React アプリケーションは*コンポーネント*と呼ばれる独立した UI のパーツで構成されています。React コンポーネントとは、マークアップを添えることができる JavaScript 関数です。コンポーネントは、ボタンのような小さなものであることもあれば、ページ全体といった大きなものであることもあります。以下は、3 つの `Profile` コンポーネントをレンダーする `Gallery` コンポーネントの例です。

<Sandpack>

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

## コンポーネントのインポートとエクスポート {/*importing-and-exporting-components*/}

1 つのファイルに多くのコンポーネントを宣言することもできますが、大きなファイルは取り回しが難しくなります。これを解決するために、コンポーネントを個別のファイルに*エクスポート*し、別のファイルからそのコンポーネントを*インポート*することができます：
1 つのファイルに多くのコンポーネントを宣言することもできますが、大きなファイルは取り回しが難しくなります。これを解決するために、コンポーネントを個別のファイルに*エクスポート*し、別のファイルからそのコンポーネントを*インポート*することができます。


<Sandpack>
Expand Down
Loading