@samitouri / QOS-React-2 / commits / 680d4e7933

Translate 06-transferring-props.md to Japanese

Kohei TAKATA committed Jul 3, 2015 at 09:49 UTC 680d4e793379163ed1a5eb37daca7696c07068d5
1 file changed +161
docs/docs/06-transferring-props.ja-JP.md new
+161
@@ -0,0 +1,161 @@
1 +---
2 +id: transferring-props
3 +title: propsの移譲
4 +permalink: transferring-props-ja-JP.html
5 +prev: reusable-components-ja-JP.html
6 +next: forms-ja-JP.html
7 +
8 +---
9 +
10 +
11 +コンポーネントを抽象的にラップすることはReactにおいて共通のパターンです。外のコンポーネントは単純なプロパティを表示し、中ではさらに複雑なインプリメンテーションの詳細を持つようになっています。
12 +
13 +以下のように、古いpropsと追加の値を[JSXの拡張属性](/react/docs/jsx-spread-ja-JP.html)を使ってマージすることができます。
14 +
15 +```javascript
16 +<Component {...this.props} more="values" />
17 +```
18 +
19 +JSXを使わない場合は、以下のように、ES6の `Object.assign` か Underscore の `_.extend` といったオブジェクトヘルパーを使うことができます。
20 +
21 +```javascript
22 +React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));
23 +```
24 +
25 +以下のチュートリアルはベストプラクティスを提示しています。JSXや試験的なES7のシンタックスを使っています。
26 +
27 +## 手動での移動
28 +
29 +ほとんどの場合、プロパティを明確に子要素に渡すべきです。それは、内部のAPIのサブセットだけを外に出していることと、認識しているプロパティが動作することを保証します。
30 +
31 +```javascript
32 +var FancyCheckbox = React.createClass({
33 + render: function() {
34 + var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
35 + return (
36 + <div className={fancyClass} onClick={this.props.onClick}>
37 + {this.props.children}
38 + </div>
39 + );
40 + }
41 +});
42 +React.render(
43 + <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
44 + Hello world!
45 + </FancyCheckbox>,
46 + document.getElementById('example')
47 +);
48 +```
49 +
50 +しかし、 `name` プロパティや `title` プロパティや `onMouseOver` はどうでしょうか？
51 +
52 +## JSXにおける `...` を使った移譲
53 +
54 +> 注意:
55 +> 以下の例では、実験的なES7のシンタックスであることを示すために `--harmony ` フラグが必要になります。ブラウザ上でJSXトランスフォーマーを使う際には、単純に `<script type="text/jsx;harmony=true">` を使ってスクリプトを読み込んでください。詳細については、 [レストとスプレッドのプロパティ ...](/react/docs/transferring-props.html#rest-and-spread-properties-...)をご覧ください。
56 +
57 +全てのプロパティを渡すのはバグを生みやすく、面倒くさいときがあります。そのようなケースでは、未知のプロパティのセットを使うためにレストプロパティと共に[分割代入引数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)を使うことができます。
58 +
59 +以下のように `...other` を使うことで、使いたいプロパティを一覧にすることができます。
60 +
61 +```javascript
62 +var { checked, ...other } = this.props;
63 +```
64 +
65 +これは、自分で指定したものは 除き 、全てのpropsを渡すことを保証します。
66 +
67 +```javascript
68 +var FancyCheckbox = React.createClass({
69 + render: function() {
70 + var { checked, ...other } = this.props;
71 + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
72 + // `other` は { onClick: console.log } を含みますが、 checked プロパティは含みません。
73 + return (
74 + <div {...other} className={fancyClass} />
75 + );
76 + }
77 +});
78 +React.render(
79 + <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
80 + Hello world!
81 + </FancyCheckbox>,
82 + document.getElementById('example')
83 +);
84 +```
85 +
86 +> 注意:
87 +> 上の例では、 `checked` propは正式なDOMの属性でもあります。この方法を使って分割代入を行わない場合は、無意識的に渡すこともできます。
88 +
89 +未知の `other` propsを移譲する際には、分割代入パターンを常に使ってください。
90 +
91 +```javascript
92 +var FancyCheckbox = React.createClass({
93 + render: function() {
94 + var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
95 + // アンチパターン: `checked` が内部のコンポーネントに渡されます。
96 + return (
97 + <div {...this.props} className={fancyClass} />
98 + );
99 + }
100 +});
101 +```
102 +
103 +## 同じpropを使い、移譲する
104 +
105 +コンポーネントがプロパティを使うだけでなく、子要素に渡したい場合は、明確に `checked={checked}` と記述することで再度渡すことができます。 `this.props` オブジェクトで全てを渡すほうが、リファクタリングやチェックをしやすいので好ましいです。
106 +
107 +```javascript
108 +var FancyCheckbox = React.createClass({
109 + render: function() {
110 + var { checked, title, ...other } = this.props;
111 + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
112 + var fancyTitle = checked ? 'X ' + title : 'O ' + title;
113 + return (
114 + <label>
115 + <input {...other}
116 + checked={checked}
117 + className={fancyClass}
118 + type="checkbox"
119 + />
120 + {fancyTitle}
121 + </label>
122 + );
123 + }
124 +});
125 +```
126 +
127 +> 注意:
128 +> 順番の問題です。JSXのpropsの前に `{...other}` を置くことで、コンポーネントの使用者がオーバーライドできないことを保証します。上の例ではinputが `"checkbox"` 型であることを保証しました。
129 +
130 +## レストとスプレッドのプロパティ `...`
131 +
132 +レストプロパティはあるオブジェクトの残りの要素を新しいオブジェクトに引き抜きます。分割代入パターンでリストになっている全てのプロパティを外に出します。
133 +
134 +これは、[ES7プロポーサル](https://github.com/sebmarkbage/ecmascript-rest-spread)の実験的な実行です。
135 +
136 +```javascript
137 +var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
138 +x; // 1
139 +y; // 2
140 +z; // { a: 3, b: 4 }
141 +```
142 +
143 +> 注意:
144 +> 実験的なES7のシンタックスを有効にするには、 `--harmony` フラグを[JSXコマンドラインツール](https://www.npmjs.com/package/react-tools)で使用してください。
145 +
146 +## Underscoreによる移譲
147 +
148 +JSXを使わない際には、同じパターンを行うライブラリを使うことができます。Underscoreでは、 `_.omit` を使ってプロパティをフィルタしたり、 `_.extend` を使って新しいオブジェクトにプロパティをコピーしたりできます。
149 +
150 +```javascript
151 +var FancyCheckbox = React.createClass({
152 + render: function() {
153 + var checked = this.props.checked;
154 + var other = _.omit(this.props, 'checked');
155 + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
156 + return (
157 + React.DOM.div(_.extend({}, other, { className: fancyClass }))
158 + );
159 + }
160 +});
161 +```