@@ -4,7 +4,7 @@ title: 条件付きレンダー
4
4
5
5
<Intro >
6
6
7
- 様々な条件によって 、コンポーネントに表示させる内容を変化させたいことがあります。React では、JavaScript の ` if ` 文や ` && ` 、` ? : ` 演算子などの構文を使うことで、JSX を条件付きでレンダーできます。
7
+ 様々な条件に基づいて 、コンポーネントに表示させる内容を変化させたいことがあります。React では、JavaScript の ` if ` 文や ` && ` 、` ? : ` 演算子などの構文を使うことで、JSX を条件付きでレンダーできます。
8
8
9
9
</Intro >
10
10
@@ -18,7 +18,7 @@ title: 条件付きレンダー
18
18
19
19
## 条件を満たす場合に JSX を返す {/* conditionally-returning-jsx* /}
20
20
21
- 例えば、複数の ` Item ` をレンダーする ` PackingList ` コンポーネントがあり、各 ` Item ` に梱包が終わっているかどうか表示させたいとしましょう 。
21
+ 例えば、複数の ` Item ` をレンダーする ` PackingList ` コンポーネントがあり、各 ` Item ` に梱包が終わっているかどうかを表示させたいとしましょう 。
22
22
23
23
<Sandpack >
24
24
@@ -52,7 +52,7 @@ export default function PackingList() {
52
52
53
53
</Sandpack>
54
54
55
- 複数の `Item` コンポーネントのうち一部のみで `isPacked` プロパティが `false` ではなく `true` になっていることに注意してください。目的は、`isPacked={true}` の場合にのみチェックマーク (✔) を表示させることです。
55
+ 複数の `Item` コンポーネントのうち一部のみで、props である `isPacked` が `false` ではなく `true` になっていることに注意してください。目的は、`isPacked={true}` の場合にのみチェックマーク (✔) を表示させることです。
56
56
57
57
これは [`if`/`else` 文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)を使って、以下のように書くことができます。
58
58
@@ -63,7 +63,7 @@ if (isPacked) {
63
63
return <li className="item">{name}</li>;
64
64
```
65
65
66
- `isPacked` プロパティが `true` だった場合、このコードは**異なる JSX ツリーを返します**。この変更により、一部のアイテムの末尾にチェックマークが表示されます 。
66
+ `isPacked` プロパティが `true` だった場合、このコードは**異なる JSX ツリーを返します**。この変更により、一部のアイテムの末尾にチェックマークが表示されるようになります 。
67
67
68
68
<Sandpack>
69
69
@@ -208,7 +208,7 @@ return (
208
208
209
209
#### この 2 つの例は完全に同等か? {/*are-these-two-examples-fully-equivalent*/}
210
210
211
- オブジェクト指向プログラミングのバックグラウンドをお持ちの場合、2 つの例の一方では `<li>` の「インスタンス」が 2 つ作られるため 、これらがわずかに異なると考えてしまうかもしれません。しかし JSX 要素は内部に状態を持たず、実際の DOM 要素でもないため、「インスタンス」ではありません。JSX は軽量な「説明書き」であり設計図のようなものです。従って上記の 2 つの例は実際に完全に同等です。[Preserving and Resetting State ](/learn/preserving-and-resetting-state) を参照してください。
211
+ オブジェクト指向プログラミングのバックグラウンドをお持ちの場合、2 つの例の一方では `<li>` の「インスタンス」が 2 つ作られているため 、これらがわずかに異なると考えてしまうかもしれません。しかし JSX 要素は内部に状態を持たず、実際の DOM 要素でもないため、「インスタンス」ではありません。JSX は軽量な「説明書き」であり設計図のようなものです。従って上記の 2 つの例は実際に完全に同等です。[state の保持とリセット ](/learn/preserving-and-resetting-state)を参照してください。
212
212
213
213
</DeepDive>
214
214
@@ -272,7 +272,7 @@ return (
272
272
273
273
これは「* ` isPacked ` なら (` && ` )、チェックマークをレンダーし、それ以外の場合には何もレンダーしない* 」のように読んでください。
274
274
275
- 以下が完全に動作する例です:
275
+ 以下が完全に動作する例です。
276
276
277
277
<Sandpack >
278
278
@@ -536,7 +536,7 @@ export default function PackingList() {
536
536
537
537
#### `&&` 演算子を使ったアイテムの重要度の表示 {/*show-the-item-importance-with*/}
538
538
539
- この例では、それぞれの `Item` が数値型の `importance` プロパティを受け取ります 。重要度が 0 以外の場合に限り、`&&` 演算子を使用して、斜体で "_(Importance: X)_" と表示するようにしてください。以下のような結果になるようにしましょう。
539
+ この例では、それぞれの `Item` が数値型の props である `importance` を受け取ります 。重要度が 0 以外の場合に限り、`&&` 演算子を使用して、斜体で "_(Importance: X)_" と表示するようにしてください。以下のような結果になるようにしましょう。
540
540
541
541
* Space suit _(Importance: 9)_
542
542
* Helmet with a golden leaf
@@ -582,7 +582,7 @@ export default function PackingList() {
582
582
583
583
<Solution >
584
584
585
- 以下のようにすれば動きます:
585
+ 以下のようにすれば動きます。
586
586
587
587
<Sandpack >
588
588
@@ -665,11 +665,11 @@ export default function DrinkList() {
665
665
666
666
</Sandpack>
667
667
668
- コードを `if` 文を使用するようにリファクタリングしたら、さらに簡素化するアイデアはありますか?
668
+ コードを `if` 文を使用するようにリファクタリングできたら、さらに簡素化するアイデアを考えてみてください。
669
669
670
670
<Solution>
671
671
672
- 複数のアプローチがありますが、ここでは 1 つの出発点として以下を示します:
672
+ 複数のアプローチがありますが、ここでは 1 つの出発点として以下を示します。
673
673
674
674
<Sandpack>
675
675
@@ -714,7 +714,7 @@ export default function DrinkList() {
714
714
715
715
これで、各ドリンクの情報が複数の条件分岐に分散されずにグループ化されてました。将来新しいドリンクを追加する際にも簡単になります。
716
716
717
- 別の解決策として 、情報をオブジェクトに移動することで、条件を完全に削除することも可能です:
717
+ 別の解法として 、情報をオブジェクトに移動することで、条件を完全に削除することも可能です。
718
718
719
719
<Sandpack>
720
720
0 commit comments