Translate 02.2-jsx-spread.md to Japanese
Kohei TAKATA committed
Jun 26, 2015 at 09:55 UTC
829ce68cd7c658a438c7053192d585d66dc6243d
1 file changed
+52
docs/docs/02.2-jsx-spread.ja-JP.md
new
+52
@@ -0,0 +1,52 @@
1
+---
2
+id: jsx-spread
3
+title: JSXの拡張属性
4
+permalink: jsx-spread-ja-JP.html
5
+prev: jsx-in-depth-ja-JP.html
6
+next: jsx-gotchas-ja-JP.html
7
+---
8
+
9
+以下のように、コンポーネントにどのようなプロパティを配置したいか前もって全て分かっている場合は、JSXを使うことは簡単です。
10
+
11
+```javascript
12
+ var component = <Component foo={x} bar={y} />;
13
+```
14
+
15
+## Propsを変更してはいけない
16
+
17
+セットしたいプロパティが分からない場合は、以下のように後からオブジェクトに追加したいと思うでしょう。
18
+
19
+```javascript
20
+ var component = <Component />;
21
+ component.props.foo = x; // だめ
22
+ component.props.bar = y; // 同様にだめ
23
+```
24
+
25
+これはアンチパターンです。なぜなら、後々まで正しいpropTypesであるかどうかチェックすることを助けることができないことを意味するからです。これは、propTypesのエラーが隠されたスタックトレースに出力されて終わってしまうことを意味します。
26
+
27
+propsは変更不可と考えられるべきです。propsのオブジェクトをどこかで変更することは予期せぬ結果を発生させる可能性があるので、理想的には、この時点ではpropsは固定のオブジェクトであるべきです。
28
+
29
+## 拡張属性
30
+
31
+以下のように、拡張属性というJSXの新しい特徴を使うことができます。
32
+
33
+```javascript
34
+ var props = {};
35
+ props.foo = x;
36
+ props.bar = y;
37
+ var component = <Component {...props} />;
38
+```
39
+
40
+あなたが渡したオブジェクトのプロパティはコンポーネントのpropsにコピーされます。
41
+
42
+これを複数回使用したり、他の属性と組み合わせたりすることもできます。仕様書では、順序が重要となっています。後の属性は前の属性をオーバーライドします。
43
+
44
+```javascript
45
+ var props = { foo: 'default' };
46
+ var component = <Component {...props} foo={'override'} />;
47
+ console.log(component.props.foo); // 'override'
48
+```
49
+
50
+## 奇妙な `...` という表現は何でしょうか？
51
+
52
+`...` 操作（拡張操作）は既に[ES6のarrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)でサポートされています。[Object Rest と Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread)のES7のプロポーザルもあります。JSXのきれいなシンタックスを供給するために、それらのサポートや開発中の標準使用を利用しています。