Skip to content

Commit 09b6674

Browse files
committed
Self-review and improve articles that have been commited w/o peer-review
1 parent ac69e0e commit 09b6674

File tree

7 files changed

+18
-19
lines changed

7 files changed

+18
-19
lines changed

content/docs/components-and-props.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function Welcome(props) {
3030
}
3131
```
3232

33-
この関数は、データの入った "props"(「プロパティ」の意味)というオブジェクトを引数としてひとつ受け取り、React 要素を返すので、有効な React コンポーネントです。これは文字通り JavaScript の関数ですので、このようなコンポーネントのことを関数コンポーネントと呼びます。
33+
この関数は、データの入った "props"(「プロパティ」の意味)というオブジェクトを引数としてひとつ受け取り、React 要素を返すので、有効な React コンポーネントです。これは文字通り JavaScript の関数ですので、このようなコンポーネントのことを "関数コンポーネント (function component)" と呼びます。
3434

3535
コンポーネントを定義するために [ES6 クラス](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)も使用できます:
3636

@@ -171,7 +171,7 @@ function Avatar(props) {
171171
}
172172
```
173173

174-
`Avatar``Comment` の内側でレンダリングされているということを知っている必要はありません。なので prop の名前として、`author` ではなく `user` というもっと一般的な名前を付けました。
174+
`Avatar`、自身が `Comment` の内側でレンダリングされているということを知っている必要はありません。なので props の名前として、`author` ではなく `user` というもっと一般的な名前を付けました。
175175

176176
コンポーネントが使用されるコンテキストではなく、コンポーネント自身からの観点で props の名前を付けることをお勧めします。
177177

content/docs/conditional-rendering.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ ReactDOM.render(
5050

5151
要素を保持しておくために変数を使うことができます。これは、出力の他の部分を変えずにコンポーネントの一部を条件付きでレンダーしたい時に役立ちます。
5252

53-
ログアウトとログインボタンを表す以下の2つの新しいコンポーネントを考えましょう
53+
ログアウトとログインボタンを表す以下の 2 つの新しいコンポーネントを考えましょう
5454

5555
```js
5656
function LoginButton(props) {

content/docs/forms.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ redirect_from:
99
- "docs/forms-zh-CN.html"
1010
---
1111

12-
自然なこととして、HTML のフォーム要素は内部に何らかの状態を持っていますので、フォーム要素は React において他の DOM 要素とちょっと異なる動作をします。例えば、このプレーン HTML によるフォームは 1 つの名前を受け付けます:
12+
自然な HTML のフォーム要素は内部に何らかの状態を持っていますので、フォーム要素は React において他の DOM 要素とちょっと異なる動作をします。例えば、このプレーン HTML によるフォームは 1 つの名前を受け付けます:
1313

1414
```html
1515
<form>
@@ -21,7 +21,7 @@ redirect_from:
2121
</form>
2222
```
2323

24-
このフォームは、ユーザーがフォームを送信した際に新しいページに移動する、という、HTML フォームとしてのデフォルトの動作をします。React でこの振る舞いが必要なら、そのまま動きます。しかし大抵のケースでは、フォームの送信に応答してユーザーがフォームに入力したデータにアクセスするような JavaScript 関数があった方が便利です。これを実現する標準的な方法は、制御された (controlled) コンポーネントと呼ばれるテクニックを使うことです。
24+
このフォームは、ユーザーがフォームを送信した際に新しいページに移動する、という、HTML フォームとしてのデフォルトの動作をします。React でこの振る舞いが必要なら、そのまま動きます。しかし大抵のケースでは、フォームの送信に応答してユーザーがフォームに入力したデータにアクセスするような JavaScript 関数があった方が便利です。これを実現する標準的な方法は、"制御された (controlled) コンポーネント" と呼ばれるテクニックを使うことです。
2525

2626
## 制御されたコンポーネント
2727

@@ -291,9 +291,9 @@ setTimeout(function() {
291291

292292
```
293293

294-
## 管理されたコンポーネントの代替手段
294+
## 制御されたコンポーネントの代替手段
295295

296-
管理されたコンポーネントは、あらゆる種類のデータの変更に対してイベントハンドラを書き、あらゆる入力状態を React コンポーネントに通してやる必要があるため、時としてうんざりすることがあります。このことは既存のコードベースを React に変換する場合や、React アプリケーションを非 React のライブラリと統合する場合に、特に問題化します。これらの状況においては、 入力フォームを実装する代替手段である[非制御コンポーネント](/docs/uncontrolled-components.html)を検討してみてください。
296+
制御されたコンポーネントは、あらゆる種類のデータの変更に対してイベントハンドラを書き、あらゆる入力状態を React コンポーネントに通してやる必要があるため、時としてうんざりすることがあります。このことは既存のコードベースを React に変換する場合や、React アプリケーションを非 React のライブラリと統合する場合に、特に問題化します。これらの状況においては、 入力フォームを実装する代替手段である[非制御コンポーネント](/docs/uncontrolled-components.html)を検討してみてください。
297297

298298
## 本格的なソリューション
299299

content/docs/introducing-jsx.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ JSX は React "要素" を生成します。[次の章](/docs/rendering-elements
2020

2121
### JSXを使う理由
2222

23-
レンダリングロジックは、イベントへの応答や経時的な状態の変化、画面表示のためにデータを準備する方法といった、他の UI ロジックと本質的に結合したものであり、React ではその事実を受け入れます
23+
表示のためのロジックは、イベントへの応答や経時的な状態の変化、画面表示のためのデータを準備する方法といった、他の UI ロジックと本質的に結合したものであり、React はその事実を受け入れます
2424

2525
マークアップとロジックを別々のファイルに書いて人為的に*技術*を分離するのではなく、React はマークアップとロジックを両方含む疎結合の「コンポーネント」という単位を用いて[*関心*を分離](https://en.wikipedia.org/wiki/Separation_of_concerns)します。[後のセクション](/docs/components-and-props.html)でコンポーネントについては改めて詳しく紹介しますが、現時点で JavaScript にマークアップを書くことが気にくわない場合、[こちらの議論](https://www.youtube.com/watch?v=x7cQ3mrcKaY)で考えが改まるかもしれません。
2626

@@ -43,7 +43,7 @@ ReactDOM.render(
4343
);
4444
```
4545

46-
あらゆる有効な[JavaScriptの式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)を JSX 内で中括弧に囲んで使用できます。例えば、`2 + 2``user.firstName``formatName(user)` はすべて有効な JavaScript の式です。
46+
あらゆる有効な [JavaScript の式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)を JSX 内で中括弧に囲んで使用できます。例えば、`2 + 2``user.firstName``formatName(user)` はすべて有効な JavaScript の式です。
4747

4848
以下の例では、`formatName(user)` という JavaScript 関数の結果を `<h1>` 要素内に埋め込んでいます。
4949

@@ -106,7 +106,7 @@ const element = <img src={user.avatarUrl}></img>;
106106

107107
>**警告:**
108108
>
109-
>JSX は HTML よりも JavaScript に近いものですので、React DOM は HTML の属性ではなく `camelCase` のプロパティ命名規則を使用します。
109+
>JSX は HTML よりも JavaScript に近いものですので、React DOM は HTML の属性ではなくキャメルケース (camelCase) のプロパティ命名規則を使用します。
110110
>
111111
>JSX では例えば、`class`[`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) となり、`tabindex`[`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex) となります。
112112
@@ -176,7 +176,7 @@ const element = {
176176
};
177177
```
178178

179-
これらのオブジェクトは "React 要素" と呼ばれます。これらは画面に表示したいものの説明書きとして考えることができます。React はこれらのオブジェクトを読み取り、DOM を構築して最新に保ちます。
179+
このようなオブジェクトは "React 要素" と呼ばれます。これらは画面に表示したいものの説明書きとして考えることができます。React はこれらのオブジェクトを読み取り、DOM を構築して最新に保ちます。
180180

181181
次の章では React 要素を DOM に変換することについて見ていきましょう。
182182

content/docs/lists-and-keys.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,7 @@ ReactDOM.render(
7070
);
7171
```
7272

73-
このコードを実行すると、「リスト項目には key を与えるべきだ」という警告を受け取るでしょう。"key" とは特別な文字列の属性であり、要素のリストを作成する際に含めておく必要があるものます。
74-
なぜ key が重要なのか、次の節で説明します。
73+
このコードを実行すると、「リスト項目には key を与えるべきだ」という警告を受け取るでしょう。"key" とは特別な文字列の属性であり、要素のリストを作成する際に含めておく必要があるものです。なぜ key が重要なのか、次の節で説明します。
7574

7675
`numbers.map()` 内のリスト項目に `key` を割り当てて、key が見つからないという問題を修正しましょう。
7776

content/docs/rendering-elements.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: rendering-elements
3-
title: 要素のレンダリング
3+
title: 要素のレンダー
44
permalink: docs/rendering-elements.html
55
redirect_from:
66
- "docs/displaying-data.html"

content/docs/state-and-lifecycle.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ next: handling-events.html
1010

1111
このページでは React コンポーネントにおける state とライフサイクルについての導入を行います。[詳細なコンポーネントの API リファレンスはこちら](/docs/react-component.html)にあります。
1212

13-
[以前の章のひとつ](/docs/rendering-elements.html#updating-the-rendered-element)にあった秒刻みの時計の例を考えてみましょう。[要素のレンダリング](/docs/rendering-elements.html#rendering-an-element-into-the-dom)の章にて、UI を更新するための方法をひとつだけ学びました。それはレンダーされた出力を更新するために `ReactDOM.render()` を呼び出す、というものでした。
13+
[以前の章のひとつ](/docs/rendering-elements.html#updating-the-rendered-element)にあった秒刻みの時計の例を考えてみましょう。[要素のレンダー](/docs/rendering-elements.html#rendering-an-element-into-the-dom)の章にて、UI を更新するための方法をひとつだけ学びました。それはレンダーされた出力を更新するために `ReactDOM.render()` を呼び出す、というものでした。
1414

1515
```js{8-11}
1616
function tick() {
@@ -201,9 +201,9 @@ ReactDOM.render(
201201

202202
多くのコンポーネントを有するアプリケーションでは、コンポーネントが破棄された場合にそのコンポーネントが占有していたリソースを開放することがとても重要です。
203203

204-
最初に `Clock` が DOM としてレンダーされる際に、[タイマーを設定](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)したいでしょう。このことを React では "マウント (mounting)" と呼びます。
204+
[タイマーを設定](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)したいのは、最初に `Clock` が DOM として描画されるときです。このことを React では "マウント (mounting)" と呼びます。
205205

206-
また `Clock` が生成した DOM が削除される際には[タイマーをクリア](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)したいです。このことを React では "アンマウント (unmounting)" と呼びます。
206+
また[タイマーをクリア](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)したいのは、`Clock` が生成した DOM が削除されるときです。このことを React では "アンマウント (unmounting)" と呼びます。
207207

208208
コンポーネントクラスで特別なメソッドを宣言することで、コンポーネントがマウントしたりアンマウントしたりした際にコードを実行することができます:
209209

@@ -415,7 +415,7 @@ this.setState(function(state, props) {
415415

416416
親コンポーネントであれ子コンポーネントであれ、特定の他のコンポーネントがステートフルかステートレスかを知ることはできませんし、特定のコンポーネントの定義が関数型かクラス型かを気にするべきではありません。
417417

418-
これが、state はローカルのものである、ないしはカプセル化されている、と言われる理由です。state を所有してセットするコンポーネント自身以外からはアクセスすることができません
418+
これが、state はローカルのものである、ないしはカプセル化されている、と言われる理由です。state を所有してセットするコンポーネント自身以外からはその state にアクセスすることができません
419419

420420
コンポーネントはその子コンポーネントに props として自身の state を渡してもかまいません。
421421

@@ -464,6 +464,6 @@ ReactDOM.render(
464464

465465
[**Try it on CodePen**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
466466

467-
`Clock` は独立してタイマーを設定して更新します
467+
`Clock` は独立してタイマーをセットし、独立して更新します
468468

469469
React アプリケーションでは、コンポーネントがステートフルかステートレスかは、コンポーネントにおける内部実装の詳細 (implementation detail) とみなされ、それは時間と共に変化しうるものです。ステートレスなコンポーネントをステートフルなコンポーネントの中で使うことが可能であり、その逆も同様です。

0 commit comments

Comments
 (0)