Skip to content

Commit 64c166b

Browse files
authored
Merge pull request #694 from reactjs/polish
Polish "Describing the UI"
2 parents 341d1e9 + 5bb6abd commit 64c166b

9 files changed

+120
-120
lines changed

src/content/learn/conditional-rendering.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: 条件付きレンダー
44

55
<Intro>
66

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

99
</Intro>
1010

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

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

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

2323
<Sandpack>
2424

@@ -52,7 +52,7 @@ export default function PackingList() {
5252
5353
</Sandpack>
5454
55-
複数の `Item` コンポーネントのうち一部のみで `isPacked` プロパティが `false` ではなく `true` になっていることに注意してください。目的は、`isPacked={true}` の場合にのみチェックマーク (✔) を表示させることです。
55+
複数の `Item` コンポーネントのうち一部のみで、props である `isPacked` `false` ではなく `true` になっていることに注意してください。目的は、`isPacked={true}` の場合にのみチェックマーク (✔) を表示させることです。
5656
5757
これは [`if`/`else` 文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)を使って、以下のように書くことができます。
5858
@@ -63,7 +63,7 @@ if (isPacked) {
6363
return <li className="item">{name}</li>;
6464
```
6565
66-
`isPacked` プロパティが `true` だった場合、このコードは**異なる JSX ツリーを返します**。この変更により、一部のアイテムの末尾にチェックマークが表示されます
66+
`isPacked` プロパティが `true` だった場合、このコードは**異なる JSX ツリーを返します**。この変更により、一部のアイテムの末尾にチェックマークが表示されるようになります
6767
6868
<Sandpack>
6969
@@ -208,7 +208,7 @@ return (
208208
209209
#### この 2 つの例は完全に同等か? {/*are-these-two-examples-fully-equivalent*/}
210210
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)を参照してください。
212212
213213
</DeepDive>
214214
@@ -272,7 +272,7 @@ return (
272272

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

275-
以下が完全に動作する例です
275+
以下が完全に動作する例です
276276

277277
<Sandpack>
278278

@@ -536,7 +536,7 @@ export default function PackingList() {
536536
537537
#### `&&` 演算子を使ったアイテムの重要度の表示 {/*show-the-item-importance-with*/}
538538
539-
この例では、それぞれの `Item` が数値型の `importance` プロパティを受け取ります。重要度が 0 以外の場合に限り、`&&` 演算子を使用して、斜体で "_(Importance: X)_" と表示するようにしてください。以下のような結果になるようにしましょう。
539+
この例では、それぞれの `Item` が数値型の props である `importance` を受け取ります。重要度が 0 以外の場合に限り、`&&` 演算子を使用して、斜体で "_(Importance: X)_" と表示するようにしてください。以下のような結果になるようにしましょう。
540540
541541
* Space suit _(Importance: 9)_
542542
* Helmet with a golden leaf
@@ -582,7 +582,7 @@ export default function PackingList() {
582582

583583
<Solution>
584584

585-
以下のようにすれば動きます
585+
以下のようにすれば動きます
586586

587587
<Sandpack>
588588

@@ -665,11 +665,11 @@ export default function DrinkList() {
665665
666666
</Sandpack>
667667
668-
コードを `if` 文を使用するようにリファクタリングしたら、さらに簡素化するアイデアはありますか?
668+
コードを `if` 文を使用するようにリファクタリングできたら、さらに簡素化するアイデアを考えてみてください。
669669
670670
<Solution>
671671
672-
複数のアプローチがありますが、ここでは 1 つの出発点として以下を示します
672+
複数のアプローチがありますが、ここでは 1 つの出発点として以下を示します
673673
674674
<Sandpack>
675675
@@ -714,7 +714,7 @@ export default function DrinkList() {
714714
715715
これで、各ドリンクの情報が複数の条件分岐に分散されずにグループ化されてました。将来新しいドリンクを追加する際にも簡単になります。
716716
717-
別の解決策として、情報をオブジェクトに移動することで、条件を完全に削除することも可能です
717+
別の解法として、情報をオブジェクトに移動することで、条件を完全に削除することも可能です
718718
719719
<Sandpack>
720720

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ React は、ユーザインターフェース(UI)を表示するための Ja
2323

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

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

2828
<Sandpack>
2929

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

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

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

6868

6969
<Sandpack>

0 commit comments

Comments
 (0)