Translate composition-vs-inheritance

content/docs/composition-vs-inheritance.md

@@ -1,22 +1,22 @@
 ---
 id: composition-vs-inheritance
-title: Composition vs Inheritance
+title: コンポジション vs 継承
 permalink: docs/composition-vs-inheritance.html
 redirect_from:
   - "docs/multiple-components.html"
 prev: lifting-state-up.html
 next: thinking-in-react.html
 ---
 
-React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
+React は強力なコンポジションモデルを備えており、コンポーネント間のコードの再利用には継承よりもコンポジションをお勧めしています。
 
-In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition.
+この章では、React を始めて間もない開発者が継承に手を出した時に陥りがちないくつかの問題と、コンポジションによりその問題がどのように解決できるのかについて考えてみます。
 
-## Containment
+## 子要素の出力 (Containment)
 
-Some components don't know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic "boxes".
+コンポーネントの中には事前には子要素を知らないものもあります。これは `Sidebar` や `Dialog` のような汎用的な "入れ物" をあらわすコンポーネントではよく使われています。
 
-We recommend that such components use the special `children` prop to pass children elements directly into their output:
+このようなコンポーネントでは特別な `children` という props を使い、以下のようにして受け取った子要素を出力することができます。
 
 ```js{4}
 function FancyBorder(props) {
@@ -28,7 +28,7 @@ function FancyBorder(props) {
 }
 ```
 
-This lets other components pass arbitrary children to them by nesting the JSX:
+これにより他のコンポーネントから JSX をネストすることで任意の子要素を渡すことができます。
 
 ```js{4-9}
 function WelcomeDialog() {
@@ -47,9 +47,10 @@ function WelcomeDialog() {
 
 **[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
 
-Anything inside the `<FancyBorder>` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `<div>`, the passed elements appear in the final output.
+`<FancyBorder>` JSX タグの内側のあらゆる要素は `FancyBorder` に `children` という props として渡されます。 `FancyBorder` は `<div>` の内側に `{props.children}` をレンダリングするので、渡された要素が出力されます。
 
-While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using `children`:
+あまり一般的ではありませんが、複数の箇所に子要素を追加したいケースも考えられます。そのようなケースでは 以下のように `children` の props の代わりに独自の props を作成して渡すことができます。
+この実装方法は他のライブラリで言うところの slot や yield のような考え方ですが、React のコンポーネントに props として渡せるものに制限はありません。
 
 ```js{5,8,18,21}
 function SplitPane(props) {
@@ -80,13 +81,13 @@ function App() {
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
 
-React elements like `<Contacts />` and `<Chat />` are just objects, so you can pass them as props like any other data. This approach may remind you of "slots" in other libraries but there are no limitations on what you can pass as props in React.
+`<Contacts />` や `<Chat />` のような React の要素はただのオブジェクトなので、他のあらゆるデータと同様に props として渡すことができます。
 
-## Specialization
+## 特化したコンポーネント (Specialization)
 
-Sometimes we think about components as being "special cases" of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`.
+コンポーネントを他のコンポーネントの "特別なケース" として考えることがあります。例えば、`WelcomeDialog` は `Dialog` の特別なケースと言えるでしょう。
 
-In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props:
+React ではこれもコンポジションで実現できます。汎用的なコンポーネントに props を渡して設定することで、より特化したコンポーネントを作成することができます。
 
 ```js{5,8,16-18}
 function Dialog(props) {
@@ -113,7 +114,7 @@ function WelcomeDialog() {
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)
 
-Composition works equally well for components defined as classes:
+コンポジションはクラスとして定義されたコンポーネントでも同じように動作します。
 
 ```js{10,27-31}
 function Dialog(props) {
@@ -163,10 +164,10 @@ class SignUpDialog extends React.Component {
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
 
-## So What About Inheritance?
+## 継承はどうするの？
 
-At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.
+Facebook では、何千というコンポーネントで React を使用していますが、コンポーネント継承による階層構造が推奨されるケースは全く見つかっていません。
 
-Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
+props とコンポジションにより、コンポーネントの見た目と振る舞いを明示的かつ安全にカスタマイズするのに十分な柔軟性が得られます。コンポーネントはどのような props でも受け付けることができ、それはプリミティブ値でも、React 要素でも、あるいは関数であってもよい、ということに留意して下さい。
 
-If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.
+コンポーネント間で非 UI 機能を再利用したい場合は、それを別の JavaScript モジュールに抽出することをお勧めします。コンポーネントはその関数やオブジェクト、クラスなどを継承することなくインポートすることで使用することができるでしょう。