Skip to content

Commit ac49079

Browse files
authored
Merge branch 'master' into tr/hooks-faq
2 parents cc5291b + 01ab50f commit ac49079

File tree

9 files changed

+183
-165
lines changed

9 files changed

+183
-165
lines changed

TRANSLATION.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ README.md にある通りですが、さらなる簡略版は以下の通りで
2424

2525
- 見出しの行末にある `{#try-react}` のようなものは見出しアンカーなので、翻訳しない。([参考](https://github.com/reactjs/reactjs.org/issues/1608)
2626
- 「です」「ます」調で書く(箇条書きの中など特殊な文脈を除く)。
27+
- 原文と改行のしかた、空行の入れかたを厳密に一致させる。GitHub の差分表示画面で見て**行番号レベルで**左右が対応しているようにする。これは将来原文が更新された場合に Git が修正箇所を正しく対応づけるために重要。(ただし極一部の記事では、原文に文の途中で改行が何度も含まれているものがあり、その場合はしかたがない)
2728
- カッコは内部に和文を含む場合は全角、英数字のみ含む場合(特に原文の単語を示す場合など)は半角とする。
2829
- 半角開きカッコの前と半角閉じカッコの後には半角スペースを入れる。ただし別の約物と直接隣接している場合は不要。
2930
> ```
@@ -50,4 +51,4 @@ README.md にある通りですが、さらなる簡略版は以下の通りで
5051
5152
## 用語の統一
5253
53-
Wiki の[訳語の統一](https://github.com/reactjs/ja.reactjs.org/wiki/%E8%A8%B3%E8%AA%9E%E3%81%AE%E7%B5%B1%E4%B8%80)を参照。
54+
Wiki の[訳語の統一](https://github.com/reactjs/ja.reactjs.org/wiki/%E8%A8%B3%E8%AA%9E%E3%81%AE%E7%B5%B1%E4%B8%80)を参照。

content/docs/code-splitting.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ import("./math").then(math => {
9393
> 近い将来での標準化が期待されています。
9494
9595
Webpack がこの構文を見つけると、自動的にアプリのコードを分割します。
96-
Create React App を使用している場合はすでに設定がされているため、[すぐに使用を開始することができます。](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)
97-
Next.js も同様です。
96+
Create React App を使用している場合はすでに設定がされているため、[すぐに使用を開始することができます。](https://facebook.github.io/create-react-app/docs/code-splitting)
97+
[Next.js](https://github.com/zeit/next.js/#dynamic-import) も同様です。
9898

9999
もし Webpack を自分でセットアップしていた場合には、Webpack の[コード分割に関するガイド](https://webpack.js.org/guides/code-splitting/)を読むと良いでしょう。
100100
きっとあなたの Webpack の設定はだいたい[このように](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)なると思います。

content/docs/hooks-custom.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ function ChatRecipientPicker() {
201201

202202
あまり焦って抽象化を加えないようにしましょう。関数コンポーネントがやれることが増えたので、平均的な関数コンポーネントはこれまでより長いものになるでしょう。それは普通のことですので、いますぐカスタムフックに分割しないと*いけない*とは考えないでください。一方で、カスタムフックをどこで使えば複雑なロジックをシンプルなインターフェースに置き換えたり、ごちゃっとしたコンポーネントを整理したりできるのか、考え始めることをお勧めします。
203203

204-
一例として、その場しのぎで多くのローカル state が含まれるようになった複雑なコンポーネントをお持ちかもしれません。`useState` を使っても更新ロジックの集中化が簡単になるわけではありませんので、それを [Redux](https://redux.js.org/) のリデューサ (reducer) で書くたくなることがあるでしょう
204+
一例として、その場しのぎで多くのローカル state が含まれるようになった複雑なコンポーネントをお持ちかもしれません。`useState` を使っても更新ロジックの集中化が簡単になるわけではありませんので、それを [Redux](https://redux.js.org/) のリデューサ (reducer) で書きたくなることがあるでしょう
205205

206206
```js
207207
function todosReducer(state, action) {

content/docs/optimizing-performance.md

Lines changed: 111 additions & 111 deletions
Large diffs are not rendered by default.

content/languages.yml

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Status enums indicate what percentage of "core" content has been translated:
2-
# 0: Incomplete (049%)
3-
# 1: Partially complete (50–94%)
4-
# 2: Complete (95–100%)
2+
# 0: Incomplete (0-49%)
3+
# 1: Partially complete (50-99%)
4+
# 2: Complete (100%)
55

66
- name: English
77
translated_name: English
@@ -27,6 +27,10 @@
2727
translated_name: Deutsch
2828
code: de
2929
status: 0
30+
- name: Greek
31+
translated_name: Ελληνικά
32+
code: el
33+
status: 0
3034
- name: Spanish
3135
translated_name: Español
3236
code: es
@@ -38,6 +42,10 @@
3842
- name: French
3943
translated_name: Français
4044
code: fr
45+
status: 2
46+
- name: Gujarati
47+
translated_name: ગુજરાતી
48+
code: gu
4149
status: 0
4250
- name: Hebrew
4351
translated_name: עברית
@@ -62,11 +70,23 @@
6270
- name: Japanese
6371
translated_name: 日本語
6472
code: ja
65-
status: 1
73+
status: 2
74+
- name: Central Khmer
75+
translated_name: ភាសាខ្មែរ
76+
code: km
77+
status: 0
6678
- name: Korean
6779
translated_name: 한국어
6880
code: ko
6981
status: 0
82+
- name: Kurdish
83+
translated_name: کوردی‎
84+
code: ku
85+
status: 0
86+
- name: Lithuanian
87+
translated_name: Lietuvių kalba
88+
code: lt
89+
status: 0
7090
- name: Malayalam
7191
translated_name: മലയാളം
7292
code: ml
@@ -98,22 +118,33 @@
98118
- name: Russian
99119
translated_name: Русский
100120
code: ru
101-
status: 0
121+
status: 1
102122
- name: Sinhala
103123
translated_name: සිංහල
104124
code: si
105125
status: 0
126+
- name: Swedish
127+
translated_name: Svenska
128+
code: sv
106129
- name: Tamil
107130
translated_name: தமிழ்
108131
code: ta
109132
status: 0
133+
- name: Telugu
134+
translated_name: తెలుగు
135+
code: te
136+
status: 0
110137
- name: Turkish
111138
translated_name: Türkçe
112139
code: tr
113140
status: 0
114141
- name: Ukrainian
115142
translated_name: Українська
116143
code: uk
144+
status: 1
145+
- name: Urdu
146+
translated_name: اردو
147+
code: ur
117148
status: 0
118149
- name: Uzbek
119150
translated_name: Oʻzbekcha
@@ -126,8 +157,8 @@
126157
- name: Simplified Chinese
127158
translated_name: 简体中文
128159
code: zh-hans
129-
status: 0
160+
status: 1
130161
- name: Traditional Chinese
131162
translated_name: 繁體中文
132163
code: zh-hant
133-
status: 0
164+
status: 0

content/tutorial/tutorial.md

Lines changed: 19 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ redirect_from:
3131

3232
このチュートリアルから価値を得るために全セクションを一度に終わらせる必要はありません。セクション 1 つや 2 つ分でも構いませんので、できるところまで進めましょう。
3333

34-
チュートリアルを進めながらコードをコピー・ペーストしても構いませんが、手でタイプすることをお勧めします。そうすれば手が動きを覚えるとともに、理解も進むようになるでしょう。
35-
3634
### これから作るもの {#what-are-we-building}
3735

3836
このチュートリアルでは、インタラクティブな三目並べゲーム (tic-tac-toe) の作り方をお見せします。
@@ -190,6 +188,8 @@ Square(マス目)コンポーネントは 1 つの `<button>` をレンダ
190188

191189
では手始めに、Board コンポーネントから Square コンポーネントにデータを渡してみましょう。
192190

191+
チュートリアルを進めるにあたって、コードをコピー・ペーストしないで、手でタイプすることをお勧めします。そうすれば手が動きを覚えるとともに、理解も進むようになるでしょう。
192+
193193
Board の `renderSquare` メソッド内で、props として `value` という名前の値を Square に渡すようにコードを変更します:
194194

195195
```js{3}
@@ -260,7 +260,7 @@ class Square extends React.Component {
260260
>}
261261
>```
262262
>
263-
> `onClick={() => alert('click')}` と記載したときに `onClick` プロパティに渡しているのは*関数*であることに注意してください。この関数はクリックされるまで実行されません。`() =>` を書くのを忘れて `onClick={alert('click')}` と書くのはよくある間違いであり、こうするとコンポーネントが再レンダーされるたびにアラートが表示されてしまいます。
263+
> `onClick={() => alert('click')}` と記載したときに `onClick` プロパティに渡しているのは*関数*であることに注意してください。React はクリックされるまでこの関数を実行しません。`() =>` を書くのを忘れて `onClick={alert('click')}` と書くのはよくある間違いであり、こうするとコンポーネントが再レンダーされるたびにアラートが表示されてしまいます。
264264
265265
次のステップとして、Square コンポーネントに自分がクリックされたことを「覚えさせ」て、"X" マークでマスを埋めるようにさせます。コンポーネントが何かを「覚える」ためには、**state** というものを使います。
266266
@@ -294,7 +294,7 @@ class Square extends React.Component {
294294
次に Square の `render` メソッドを書き換えて、クリックされた時に state の現在値を表示するようにします。
295295

296296
* `<button>` タグ内の `this.props.value``this.state.value` に置き換える。
297-
* `() => alert()` というイベントハンドラを `() => this.setState({value: 'X'})` に書き換える。
297+
* `onClick={...}` というイベントハンドラを `onClick={() => this.setState({value: 'X'})}` に書き換える。
298298
* 読みやすくするため、`className``onClick` の両プロパティをそれぞれ独立した行に配置する。
299299

300300
これらの書き換えの後、Square の `render` メソッドから返される `<button>` タグは以下のようになります。
@@ -356,7 +356,9 @@ Board が各 Square に、現時点の state がどうなっているか問い
356356

357357
**複数の子要素からデータを集めたい、または 2 つの子コンポーネントに互いにやりとりさせたいと思った場合は、代わりに親コンポーネント内で共有の state を宣言する必要があります。親コンポーネントは props を使うことで子に情報を返すことができます。こうすることで、子コンポーネントが兄弟同士、あるいは親との間で常に同期されるようになります。**
358358

359-
このように state を親コンポーネントにリフトアップ (lift up) することは React コンポーネントのリファクタリングでよくあることですので、この機会に挑戦してみましょう。Board にコンストラクタを追加し、初期 state をセットして 9 個の null 値を持つ配列が含まれるようにします。この 9 個の null が 9 個のマス目に対応します。
359+
このように state を親コンポーネントにリフトアップ (lift up) することは React コンポーネントのリファクタリングでよくあることですので、この機会に挑戦してみましょう。
360+
361+
Board にコンストラクタを追加し、初期 state に 9 個の null が 9 個のマス目に対応する 9 個の null 値をセットします。
360362

361363
```javascript{2-7}
362364
class Board extends React.Component {
@@ -370,35 +372,9 @@ class Board extends React.Component {
370372
renderSquare(i) {
371373
return <Square value={i} />;
372374
}
373-
374-
render() {
375-
const status = 'Next player: X';
376-
377-
return (
378-
<div>
379-
<div className="status">{status}</div>
380-
<div className="board-row">
381-
{this.renderSquare(0)}
382-
{this.renderSquare(1)}
383-
{this.renderSquare(2)}
384-
</div>
385-
<div className="board-row">
386-
{this.renderSquare(3)}
387-
{this.renderSquare(4)}
388-
{this.renderSquare(5)}
389-
</div>
390-
<div className="board-row">
391-
{this.renderSquare(6)}
392-
{this.renderSquare(7)}
393-
{this.renderSquare(8)}
394-
</div>
395-
</div>
396-
);
397-
}
398-
}
399375
```
400376

401-
後で盤面が埋まっていくと、このような見た目になるでしょう
377+
後で盤面が埋まっていくと、`this.state.squares` 配列はこのような見た目になるでしょう
402378

403379
```javascript
404380
[
@@ -432,7 +408,7 @@ Board の `renderSquare` メソッドは現在以下のようになっていま
432408

433409
次に、マス目がクリックされた時の挙動を変更しましょう。現在、どのマス目に何が入っているのかを管理しているのは Board です。Square が Board の state を更新できるようにする必要があります。state はそれを定義しているコンポーネント内でプライベートなものですので、Square から Board の state を直接書き換えることはできません。
434410

435-
Board の state のプライベート性を保護するため、Board から Square に関数を渡すことにします。この関数はマス目がクリックされた時に呼び出されます`renderSquare` メソッドを以下のように書き換えましょう:
411+
代わりに、Board から Square に関数を渡すことにして、マス目がクリックされた時に Square にその関数を呼んでもらうようにしましょう`renderSquare` メソッドを以下のように書き換えましょう:
436412

437413
```javascript{5}
438414
renderSquare(i) {
@@ -477,12 +453,12 @@ Square がクリックされると、Board から渡された `onClick` 関数
477453
1. 組み込みの DOM コンポーネントである `<button>``onClick` プロパティが設定されているため React がクリックに対するイベントリスナを設定します。
478454
2. ボタンがクリックされると、React は Square の `render()` メソッド内に定義されている `onClick` のイベントハンドラをコールします。
479455
3. このイベントハンドラが `this.props.onClick()` をコールします。Square の `onClick` プロパティは Board から渡されているものです。
480-
4. Board は Square に `onClick={() => this.handleClick(i)}` を渡していたので、Squre はクリックされたときに `this.handleClick(i)` を呼び出します。
481-
5. まだ `handleClick()` は定義していないので、コードがクラッシュします。
456+
4. Board は Square に `onClick={() => this.handleClick(i)}` を渡していたので、Square はクリックされたときに `this.handleClick(i)` を呼び出します。
457+
5. まだ `handleClick()` は定義していないので、コードがクラッシュします。Square をクリックすると、"this.handleClick is not a function" といった赤いエラー画面が表示されるはずです。
482458

483459
>補足
484460
>
485-
> DOM 要素である `<button>` は組み込みコンポーネントなので、`onClick` 属性は React にとって特別な意味を持っています。Square のようなカスタムコンポーネントでは、名前の付け方はあなたの自由です。Square の `onClick` プロパティや Board の `handleClick` メソッドについては別の名前を付けたとしても構いません。しかし React では、イベントを表す props には `on[Event]` という名前、イベントを処理するメソッドには `handle[Event]` という名前を付けるのが慣習となっています。
461+
> DOM 要素である `<button>` は組み込みコンポーネントなので、`onClick` 属性は React にとって特別な意味を持っています。Square のようなカスタムコンポーネントでは、名前の付け方はあなたの自由です。Square の `onClick` プロパティや Board の `handleClick` メソッドについては別の名前を付けたとしても同じように動作します。React では、イベントを表す props には `on[Event]` という名前、イベントを処理するメソッドには `handle[Event]` という名前を付けるのが慣習となっています。
486462
487463
まだ `handleClick` を定義していないので、マス目をクリックしようとするとエラーが出るはずです。この `handleClick` を Board クラスに加えましょう。
488464

@@ -611,7 +587,7 @@ function Square(props) {
611587

612588
>補足
613589
>
614-
> Square を関数コンポーネントに変えた際、`onClick={() => this.props.onClick()}` をより短い `onClick={props.onClick}` に書き換えました(*両側*でカッコが消えています)。クラスでは正しい `this` の値にアクセスするためにアロー関数を使いましたが、関数コンポーネントでは `this` について心配する必要はありません。
590+
> Square を関数コンポーネントに変えた際、`onClick={() => this.props.onClick()}` をより短い `onClick={props.onClick}` に書き換えました(*両側*でカッコが消えています)。
615591
616592
### 手番の処理 {#taking-turns}
617593

@@ -643,7 +619,9 @@ class Board extends React.Component {
643619
}
644620
```
645621

646-
この変更により、"X" 側と "O" 側が交互に着手できるようになります。Board の `render` 内にある "status" テキストも変更して、どちらのプレーヤの手番なのかを表示するようにしましょう。
622+
この変更により、"X" 側と "O" 側が交互に着手できるようになります。試してみてください!
623+
624+
Board の `render` 内にある "status" テキストも変更して、どちらのプレーヤの手番なのかを表示するようにしましょう。
647625

648626
```javascript{2}
649627
render() {
@@ -714,7 +692,7 @@ class Board extends React.Component {
714692

715693
### ゲーム勝者の判定 {#declaring-a-winner}
716694

717-
どちらの手番なのかを表示できたので、次にやることはゲームが決着して次の手番がなくなった時にそれを表示することです。ファイル末尾に以下のヘルパー関数を加えることで、勝者の判定ができるようになります
695+
どちらの手番なのかを表示できたので、次にやることはゲームが決着して次の手番がなくなった時にそれを表示することです。ファイル末尾に以下のヘルパー関数をコピーして貼り付けてください
718696

719697
```javascript
720698
function calculateWinner(squares) {
@@ -738,6 +716,8 @@ function calculateWinner(squares) {
738716
}
739717
```
740718

719+
9 つの square の配列が与えられると、この関数は勝者がいるか適切に確認し、`'X'``'O'`、あるいは `null` を返します。
720+
741721
Board の `render` 関数内で `calculateWinner(squares)` を呼び出して、いずれかのプレーヤが勝利したかどうか判定します。決着がついた場合は "Winner: X" あるいは "Winner: O" のようなテキストを表示するとよいでしょう。Board の `render` 関数の `status` 宣言を以下のコードで置き換えましょう。
742722

743723
```javascript{2-8}

src/components/CodeEditor/CodeEditor.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ import {LiveEditor, LiveProvider} from 'react-live';
1111
import {colors, media} from 'theme';
1212
import MetaTitle from 'templates/components/MetaTitle';
1313

14+
// Replace unicode to text for other languages
15+
const unicodeToText = text =>
16+
text.replace(/\\u([\dA-F]{4})/gi, (_, p1) =>
17+
String.fromCharCode(parseInt(p1, 16)),
18+
);
19+
1420
const compileES5 = (
1521
code, // eslint-disable-next-line no-undef
1622
) => Babel.transform(code, {presets: ['es2015', 'react']}).code;
@@ -271,7 +277,7 @@ class CodeEditor extends Component {
271277

272278
if (showJSX) {
273279
newState.code = code;
274-
newState.compiledES6 = compileES6(code);
280+
newState.compiledES6 = unicodeToText(compileES6(code));
275281
} else {
276282
newState.compiledES6 = code;
277283
}

src/components/LayoutHeader/DocSearch.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ class DocSearch extends Component<{}, State> {
2222
// eslint-disable-next-line no-undef
2323
if (window.docsearch) {
2424
window.docsearch({
25-
apiKey: '36221914cce388c46d0420343e0bb32e',
26-
indexName: 'react',
25+
apiKey: '0a814a89e0c31ab1d55d440f967517b4',
26+
indexName: 'reactjs_ja',
2727
inputSelector: '#algolia-doc-search',
2828
});
2929
} else {

0 commit comments

Comments
 (0)