reactjs · isdh · Sep 5, 2019
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
@@ -149,7 +149,7 @@ class ShoppingList extends React.Component {
 // Example usage: <ShoppingList name="Mark" />
 ```
 
-この妙な XML のようなタグについてはすぐ後で説明します。コンポーネントは、React に何を描画したいかを伝えます。データが変更されると、React はコンポーネントを効率よく更新して再レンダーします。
+この妙な XML のようなタグについてはすぐ後で説明します。コンポーネントは、React に何を描画したいかを伝えます。データが変更されると、React はコンポーネントを効率よく更新して再描画します。
 
 ここで `ShoppingList` は **React コンポーネントのクラス**、もしくは **React コンポーネントの型**です。コンポーネントは props（"properties" の略）と呼ばれるパラメータを受け取り、`render` メソッドを通じて、表示するビューの階層構造を返します。
 
@@ -168,7 +168,7 @@ return React.createElement('div', {className: 'shopping-list'},
 
 JSX では JavaScript のすべての能力を使うことができます。*どのような* JavaScript の式も JSX 内で中括弧に囲んで記入することができます。各 React 要素は、変数に格納したりプログラム内で受け渡ししたりできる、JavaScript のオブジェクトです。
 
-上記の `ShoppingList` コンポーネントは `<div />` や `<li />` といった組み込みの DOM コンポーネントのみをレンダーしていますが、自分で書いたカスタム React コンポーネントを組み合わせることも可能です。例えば、`<ShoppingList />` と書いてショッピングリスト全体を指し示すことができます。それぞれの React のコンポーネントはカプセル化されており独立して動作します。これにより単純なコンポーネントから複雑な UI を作成することができます。
+上記の `ShoppingList` コンポーネントは `<div />` や `<li />` といった組み込みの DOM コンポーネントのみを描画していますが、自分で書いたカスタム React コンポーネントを組み合わせることも可能です。例えば、`<ShoppingList />` と書いてショッピングリスト全体を指し示すことができます。それぞれの React のコンポーネントはカプセル化されており独立して動作します。これにより単純なコンポーネントから複雑な UI を作成することができます。
 
 ## スターターコードの中身を確認する {#inspecting-the-starter-code}
 
@@ -182,7 +182,7 @@ JSX では JavaScript のすべての能力を使うことができます。*ど
 * Board（盤面）
 * Game
 
-Square（マス目）コンポーネントは 1 つの `<button>` をレンダーし、Board（盤面）が 9 個のマス目をレンダーしています。Game コンポーネントは盤面と、後ほど埋めることになるプレースホルダーを描画しています。この時点ではインタラクティブなコンポーネントはありません。
+Square（マス目）コンポーネントは 1 つの `<button>` を描画し、Board（盤面）が 9 個のマス目を描画しています。Game コンポーネントは盤面と、後ほど埋めることになるプレースホルダーを描画しています。この時点ではインタラクティブなコンポーネントはありません。
 
 ### データを Props 経由で渡す {#passing-data-through-props}
 
@@ -260,7 +260,7 @@ class Square extends React.Component {
 >}
 >```
 >
-> `onClick={() => alert('click')}` と記載したときに `onClick` プロパティに渡しているのは*関数*であることに注意してください。React はクリックされるまでこの関数を実行しません。`() =>` を書くのを忘れて `onClick={alert('click')}` と書くのはよくある間違いであり、こうするとコンポーネントが再レンダーされるたびにアラートが表示されてしまいます。
+> `onClick={() => alert('click')}` と記載したときに `onClick` プロパティに渡しているのは*関数*であることに注意してください。React はクリックされるまでこの関数を実行しません。`() =>` を書くのを忘れて `onClick={alert('click')}` と書くのはよくある間違いであり、こうするとコンポーネントが再描画されるたびにアラートが表示されてしまいます。
 
 次のステップとして、Square コンポーネントに自分がクリックされたことを「覚えさせ」て、"X" マークでマスを埋めるようにさせます。コンポーネントが何かを「覚える」ためには、**state** というものを使います。
 
@@ -321,7 +321,7 @@ class Square extends React.Component {
 }
 ```
 
-Square の `render` メソッド内に書かれた `onClick` ハンドラ内で `this.setState` を呼び出すことで、React に `<button>` がクリックされたら常に再レンダーするよう伝えることができます。データ更新のあと、この Square の `this.state.value` は `'X'` になっていますので、盤面に `X` と表示されることになります。どのマス目をクリックしても `X` が出てくるはずです。
+Square の `render` メソッド内に書かれた `onClick` ハンドラ内で `this.setState` を呼び出すことで、React に `<button>` がクリックされたら常に再描画するよう伝えることができます。データ更新のあと、この Square の `this.state.value` は `'X'` になっていますので、盤面に `X` と表示されることになります。どのマス目をクリックしても `X` が出てくるはずです。
 
 `setState` をコンポーネント内で呼び出すと、React はその内部の子コンポーネントも自動的に更新します。
 
@@ -515,7 +515,7 @@ class Board extends React.Component {
 
 **[この時点でのコード全体を見る](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
 
-これらの変更を加えれば、再びマス目をクリックすると値が書き込まれるようになります。しかし今や、状態は個々の Square コンポーネントではなく Board コンポーネント内に保存されています。Board の state が変更になると、個々の Square コンポーネントも自動的に再レンダーされます。全てのマス目の状態を Board コンポーネント内で保持するようにしたことで、この後でどちらが勝者か判定できるようになります。
+これらの変更を加えれば、再びマス目をクリックすると値が書き込まれるようになります。しかし今や、状態は個々の Square コンポーネントではなく Board コンポーネント内に保存されています。Board の state が変更になると、個々の Square コンポーネントも自動的に再描画されます。全てのマス目の状態を Board コンポーネント内で保持するようにしたことで、この後でどちらが勝者か判定できるようになります。
 
 Square コンポーネントはもう自分で state を管理しないようになったので、Board コンポーネントから値を受け取って、クリックされた時はそのことを Board コンポーネントに伝えるだけになりました。React 用語でいうと、Square コンポーネントは**制御されたコンポーネント** (controlled component) になったということです。Board が Square コンポーネントを全面的に制御しています。
 
@@ -557,9 +557,9 @@ var newPlayer = Object.assign({}, player, {score: 2});
 
 イミュータブルなオブジェクトでの変更の検出はとても簡単です。参照しているイミュータブルなオブジェクトが前と別のものであれば、変更があったということです。
 
-#### React の再レンダータイミングの決定 {#determining-when-to-re-render-in-react}
+#### React の再描画タイミングの決定 {#determining-when-to-re-render-in-react}
 
-イミュータビリティの主な利点は、React で *pure component* を構築しやすくなるということです。イミュータブルなデータは変更があったかどうか簡単に分かるため、コンポーネントをいつ再レンダーすべきなのか決定しやすくなります。
+イミュータビリティの主な利点は、React で *pure component* を構築しやすくなるということです。イミュータブルなデータは変更があったかどうか簡単に分かるため、コンポーネントをいつ再描画すべきなのか決定しやすくなります。
 
 `shouldComponentUpdate()` および *pure component* をどのように作成するのかについては、[パフォーマンス最適化](/docs/optimizing-performance.html#examples)のページで説明しています。
 
@@ -802,7 +802,7 @@ history = [
 
 トップレベルの Game コンポーネント内で過去の着手の履歴を表示したいと思います。そのためには Game コンポーネントが `history` にアクセスできる必要がありますので、`history` という state はトップレベルの Game コンポーネントに置くようにしましょう。
 
-`hisotory` state を Game コンポーネント内に置くことで、`squares` の state を、子である Board コンポーネントから取り除くことができます。Square コンポーネントにあった[「state をリフトアップ」](#lifting-state-up)して Board コンポーネントに移動したときと全く同様にして、今度は Board にある state をトップレベルの Game コンポーネントにリフトアップしましょう。これにより Game コンポーネントは Board のデータを完全に制御することになり、`history` 内の過去の手番のデータを Board にレンダーさせることができるようになります。
+`hisotory` state を Game コンポーネント内に置くことで、`squares` の state を、子である Board コンポーネントから取り除くことができます。Square コンポーネントにあった[「state をリフトアップ」](#lifting-state-up)して Board コンポーネントに移動したときと全く同様にして、今度は Board にある state をトップレベルの Game コンポーネントにリフトアップしましょう。これにより Game コンポーネントは Board のデータを完全に制御することになり、`history` 内の過去の手番のデータを Board に描画させることができるようになります。
 
 まず、Game コンポーネントの初期 state をコンストラクタ内でセットします。
 
@@ -1053,7 +1053,7 @@ Game の `render` メソッド内で `history` に `map` を作用させてみ
 
 ### key を選ぶ {#picking-a-key}
 
-リストをレンダーする際、リストの項目それぞれについて、React はとある情報を保持します。リストが変更になった場合、React はどのアイテムが変更になったのかを知る必要があります。リストのアイテムは追加された可能性も、削除された可能性も、並び替えられた可能性も、中身自体が変更になった可能性もあります。
+リストを描画する際、リストの項目それぞれについて、React はとある情報を保持します。リストが変更になった場合、React はどのアイテムが変更になったのかを知る必要があります。リストのアイテムは追加された可能性も、削除された可能性も、並び替えられた可能性も、中身自体が変更になった可能性もあります。
 
 例えば以下のツリーから：
 
@@ -1076,7 +1076,7 @@ Game の `render` メソッド内で `history` に `map` を作用させてみ
 <li key={user.id}>{user.name}: {user.taskCount} tasks left</li>
 ```
 
-リストが再レンダーされる際、React はそれぞれのリスト項目の key について、前回のリスト項目内に同じ key を持つものがないか探します。もし以前になかった key がリストに含まれていれば、React はコンポーネントを作成します。もし以前のリストにあった key が新しいリストに含まれていなければ、React は以前のコンポーネントを破棄します。もし 2 つの key がマッチした場合、対応するコンポーネントは移動されます。key はそれぞれのコンポーネントの同一性に関する情報を React に与え、それにより React は再レンダー間で state を保持できるようになります。もしコンポーネントの key が変化していれば、コンポーネントは破棄されて新しい state で再作成されます。
+リストが再描画される際、React はそれぞれのリスト項目の key について、前回のリスト項目内に同じ key を持つものがないか探します。もし以前になかった key がリストに含まれていれば、React はコンポーネントを作成します。もし以前のリストにあった key が新しいリストに含まれていなければ、React は以前のコンポーネントを破棄します。もし 2 つの key がマッチした場合、対応するコンポーネントは移動されます。key はそれぞれのコンポーネントの同一性に関する情報を React に与え、それにより React は再描画間で state を保持できるようになります。もしコンポーネントの key が変化していれば、コンポーネントは破棄されて新しい state で再作成されます。
 
 `key` は特別なプロパティであり React によって予約されています（より応用的な機能である `ref` も同様です）。要素が作成される際、React は `key` プロパティを引き抜いて、返される要素に直接その `key` を格納します。`key` は `props` の一部のようにも思えますが、`this.props.key` で参照できません。React はどの子要素を更新すべきかを決定する際に、`key` を自動的に使用します。コンポーネントが自身の `key` について確認する方法はありません。
 
@@ -1170,7 +1170,7 @@ class Game extends React.Component {
   }
 ```
 
-最後に、Game コンポーネントの `render` を書き換えて、常に最後の着手後の状態をレンダーするのではなく `stepNumber` によって現在選択されている着手をレンダーするようにします。
+最後に、Game コンポーネントの `render` を書き換えて、常に最後の着手後の状態を描画するのではなく `stepNumber` によって現在選択されている着手を描画するようにします。
 
 ```javascript{3}
   render() {