Translate Warnings pages

content/warnings/dont-call-proptypes.md

@@ -3,30 +3,30 @@ title: Don't Call PropTypes Warning
 layout: single
 permalink: warnings/dont-call-proptypes.html
 ---
+「PropTypes を呼び出してはならない」警告。
 
-> Note:
+> 注意：
 >
-> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types).
->
->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion.
+> React.PropTypes は React v15.5 から別パッケージに移動しました。代わりに [prop-types ライブラリ](https://www.npmjs.com/package/prop-types)を使用してください。
+> コードを自動で変換するための [codemod スクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes)も提供しています。
 
-In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error.
+React の将来のメジャーリリースでは、PropType のバリデーションを実装するコードは、本番用ビルドから削除される予定です。その際には、バリデーションを手動で呼び出す全てのコード（本番用ビルドで削除されないもの）はエラーを投げることになります。
 
-### Declaring PropTypes is still fine
+### PropTypes 宣言については問題ありません
 
-The normal usage of PropTypes is still supported:
+PropType の通常の使用は引き続きサポートされます。
 
 ```javascript
 Button.propTypes = {
   highlighted: PropTypes.bool
 };
 ```
 
-Nothing changes here.
+これについては何も変わっていません。
 
-### Don’t call PropTypes directly
+### PropTypes を直接呼び出さない
 
-Using PropTypes in any other way than annotating React components with them is no longer supported:
+React コンポーネントに注釈を付ける以外の方法で PropType を使用することはサポートされなくなりました。
 
 ```javascript
 var apiShape = PropTypes.shape({
@@ -38,13 +38,13 @@ var apiShape = PropTypes.shape({
 var error = apiShape(json, 'response');
 ```
 
-If you depend on using PropTypes like this, we encourage you to use or create a fork of PropTypes (such as [these](https://github.com/aackerman/PropTypes) [two](https://github.com/developit/proptypes) packages).
+この形で PropType を使用をする必要がある場合、PropType のフォーク版（[これら](https://github.com/aackerman/PropTypes) [2つの](https://github.com/developit/proptypes)パッケージなど）を使用するか、あるいは新たにフォーク版を作成することをおすすめします。
 
-If you don't fix the warning, this code will crash in production with React 16.
+警告に応じてコードを修正しなければ、このコードは React 16 の本番用ビルドではクラッシュします。
 
-### If you don't call PropTypes directly but still get the warning
+### PropTypes を直接呼んでいないのに警告が発生するとき
 
-Inspect the stack trace produced by the warning. You will find the component definition responsible for the PropTypes direct call. Most likely, the issue is due to third-party PropTypes that wrap React’s PropTypes, for example:
+警告で出力されているスタックトレースを調べることで、PropTypes を直接呼んでいるコンポーネント定義を見付けることができます。ほとんどの場合、React の PropType をラップするサードパーティ製の PropType が問題の原因です。たとえば、
 
 ```js
 Button.propTypes = {
@@ -55,13 +55,14 @@ Button.propTypes = {
 }
 ```
 
-In this case, `ThirdPartyPropTypes.deprecated` is a wrapper calling `PropTypes.bool`. This pattern by itself is fine, but triggers a false positive because React thinks you are calling PropTypes directly. The next section explains how to fix this problem for a library implementing something like `ThirdPartyPropTypes`. If it's not a library you wrote, you can file an issue against it.
+このケースでは、 `ThirdPartyPropTypes.deprecated` が `PropTypes.bool` を呼び出しているラッパーです。このパターンそのものは良いのですが、あなたが直接 PropTypes を呼び出したと React が判断するため、誤検出（=呼び出していないのに呼び出したと判定）を引き起こします。次節では `ThirdPartyPropTypes` のようなライブラリを実装する際に、この問題をどのように解決するかについて述べます。自分で書いたライブラリでなければ、そのライブラリについて issue を作成することもできます。
 
-### Fixing the false positive in third party PropTypes
+### サードパーティの PropTypes における誤検知を修正する
 
-If you are an author of a third party PropTypes library and you let consumers wrap existing React PropTypes, they might start seeing this warning coming from your library. This happens because React doesn't see a "secret" last argument that [it passes](https://github.com/facebook/react/pull/7132) to detect manual PropTypes calls.
+あなたがサードパーティ製 PropTypes の作者で、利用者に既存の React PropTypes をラップさせる場合、ライブラリがこの警告を発生させるのを利用者は目にするようになるでしょう。
+これは手動によるPropTypesの呼び出しを[検知するために渡す最後尾の引数 `secret`](https://github.com/facebook/react/pull/7132)を React が確認できないために起こります。
 
-Here is how to fix it. We will use `deprecated` from [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) as an example. The current implementation only passes down the `props`, `propName`, and `componentName` arguments:
+以下に修正方法を示します。例として使用しているのは [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) にある `deprecated` です。現時点での実装では単に引数として `props`、 `propName`、そして `componentName` を渡しているだけです。
 
 ```javascript
 export default function deprecated(propType, explanation) {
@@ -79,7 +80,7 @@ export default function deprecated(propType, explanation) {
 }
 ```
 
-In order to fix the false positive, make sure you pass **all** arguments down to the wrapped PropType. This is easy to do with the ES6 `...rest` notation:
+誤検知を修正するには、**すべての**引数をラップされた PropType に渡してください。これは ES6 の `...rest` 記法で簡単に行えます。
 
 ```javascript
 export default function deprecated(propType, explanation) {
@@ -97,4 +98,4 @@ export default function deprecated(propType, explanation) {
 }
 ```
 
-This will silence the warning.
+これで警告は出力されなくなります。

content/warnings/invalid-aria-prop.md

@@ -3,9 +3,8 @@ title: Invalid ARIA Prop Warning
 layout: single
 permalink: warnings/invalid-aria-prop.html
 ---
+「無効な ARIA Props」警告 (invalid-aria-prop) は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の[標準仕様](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)に無い aria-* プロパティで DOM 要素をレンダリングしようとした場合に発生します。
 
-The invalid-aria-prop warning will fire if you attempt to render a DOM element with an aria-* prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
+1. 使用した props が標準仕様に準拠しているはずのものであるなら、綴りをよく確認してください。 `aria-labelledby` や `aria-activedescendant` の綴り間違いはありがちです。
 
-1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled.
-
-2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered
+2. 指定した属性を React が標準仕様の一部として正しく認識していない場合。この振舞いはReact の将来のバージョンで修正される可能性は高いでしょう。しかし現時点では、React は知らない属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。

content/warnings/legacy-factories.md

@@ -3,8 +3,9 @@ title: React Element Factories and JSX Warning
 layout: single
 permalink: warnings/legacy-factories.html
 ---
+React Element ファクトリと JSX についての警告。
 
-You probably came here because your code is calling your component as a plain function call. This is now deprecated:
+このページを閲覧しているのは、恐らくコンポーネントを普通の関数として呼び出ししているからでしょう。これは現在非推奨になっています。
 
 ```javascript
 var MyComponent = require('MyComponent');
@@ -16,7 +17,7 @@ function render() {
 
 ## JSX
 
-React components can no longer be called directly like this. Instead [you can use JSX](/docs/jsx-in-depth.html).
+React コンポーネントは、このように直接呼び出すことはできなくなりました。代わりに [JSX を使用できます](/docs/jsx-in-depth.html)。
 
 ```javascript
 var React = require('react');
@@ -27,9 +28,9 @@ function render() {
 }
 ```
 
-## Without JSX
+## JSX を使用しない場合
 
-If you don't want to, or can't use JSX, then you'll need to wrap your component in a factory before calling it:
+JSX を使いたくない、または使えない場合、コンポーネントを呼び出す前にファクトリでラップする必要があります。
 
 ```javascript
 var React = require('react');
@@ -40,11 +41,11 @@ function render() {
 }
 ```
 
-This is an easy upgrade path if you have a lot of existing function calls.
+呼び出しの箇所が大量である場合、この修正方法が簡単です。
 
-## Dynamic components without JSX
+## JSX を使用しない動的なコンポーネント
 
-If you get a component class from a dynamic source, then it might be unnecessary to create a factory that you immediately invoke. Instead you can just create your element inline:
+コンポーネントのクラスが動的に与えられる場合は、すぐに実行してしまうファクトリを作成する必要はありません。その代わりにインラインで単に要素を作成します。
 
 ```javascript
 var React = require('react');
@@ -54,6 +55,6 @@ function render(MyComponent) {
 }
 ```
 
-## In Depth
+## 詳細
 
-[Read more about WHY we're making this change.](https://gist.github.com/sebmarkbage/d7bce729f38730399d28)
+[この変更がなされた理由について更に読む。](https://gist.github.com/sebmarkbage/d7bce729f38730399d28)

content/warnings/refs-must-have-owner.md

@@ -3,46 +3,51 @@ title: Refs Must Have Owner Warning
 layout: single
 permalink: warnings/refs-must-have-owner.html
 ---
+「refにはオーナーが必要である」の警告。
 
-You are probably here because you got one of the following error messages:
+このページを閲覧しているのは恐らく以下のエラーメッセージの1つが出力されたからでしょう。
 
 *React 16.0.0+*
-> Warning:
+> 警告:
 >
 > Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
+>
+> ref 要素が文字列 (myRefName) として指定されましたが、オーナーが設定されていませんでした。Reactの複数のコピーがロードされている可能性があります。（詳細： https://fb.me/react-refs-must-have-owner ）。
 
-*earlier versions of React*
+*より古いバージョンの React*
 > Warning:
 >
 > addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded.
+>
+> addComponentAsRefTo(...): ReactOwner だけが ref を持つことができます。コンポーネントの `render` メソッド内で作成されていないコンポーネントに ref を指定したか、React のコピーを複数ロードしているかもしれません。
 
-This usually means one of three things:
+これは通常、以下の3つのいずれかを意味します：
 
-- You are trying to add a `ref` to a function component.
-- You are trying to add a `ref` to an element that is being created outside of a component's render() function.
-- You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured npm dependency)
+- `ref` を関数コンポーネントに使用しようとしている
+- コンポーネントの render() 関数の外部で作成されている要素に `ref` を使用しようとしている
+- React の複数の（競合する）コピーがロードされている（例えばnpm依存関係の設定ミスによって）
 
-## Refs on Function Components
+## 関数コンポーネントのRef
 
-If `<Foo>` is a function component, you can't add a ref to it:
+`<Foo>` が関数コンポーネントである場合には、ref を指定することはできません。
 
 ```js
 // Doesn't work if Foo is a function!
 <Foo ref={foo} />
 ```
 
-If you need to add a ref to a component, convert it to a class first, or consider not using refs as they are [rarely necessary](/docs/refs-and-the-dom.html#when-to-use-refs).
+コンポーネントに ref を指定する必要がある場合は、クラスコンポーネントに変換するか、あるいは ref を使わない方法を検討してください。[ref が本当に必要](/docs/refs-and-the-dom.html#when-to-use-refs)になることは滅多にありません。
 
-## Strings Refs Outside the Render Method
+## render メソッド外での文字列 ref の使用
 
-This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). For example, this won't work:
+これは通常、オーナーを持たない（つまり、他のコンポーネントの `render` メソッド内で作成されなかった）コンポーネントへ ref を追加しようとしているということです。例えば、以下はうまく動作しません。
 
 ```js
 // Doesn't work!
 ReactDOM.render(<App ref="app" />, el);
 ```
 
-Try rendering this component inside of a new top-level component which will hold the ref. Alternatively, you may use a callback ref:
+この ref を保持する新しいトップレベルのコンポーネントの中で当該のコンポーネントをレンダリングしてみてください。あるいは、コールバック ref を使えるかもしれません。
 
 ```js
 let app;
@@ -54,10 +59,10 @@ ReactDOM.render(
 );
 ```
 
-Consider if you [really need a ref](/docs/refs-and-the-dom.html#when-to-use-refs) before using this approach.
+このようなアプローチを採用する前に、[本当に ref が必要かどうか](/docs/refs-and-the-dom.html#when-to-use-refs)を検討してください。
 
-## Multiple copies of React
+## React の複数のコピー
 
-Bower does a good job of deduplicating dependencies, but npm does not. If you aren't doing anything (fancy) with refs, there is a good chance that the problem is not with your refs, but rather an issue with having multiple copies of React loaded into your project. Sometimes, when you pull in a third-party module via npm, you will get a duplicate copy of the dependency library, and this can create problems.
+Bower は依存関係の重複を上手く排除しますが、npm はそうではありません。ref に対して特別なことを何もしていないなら、原因は ref ではなく、複数の React のコピーがプロジェクトにロードされているからである可能性が高いでしょう。サードパーティ製のモジュールを npm 経由で追加した場合、依存ライブラリの重複したコピーがたまに問題を引き起こす可能性があります。
 
-If you are using npm... `npm ls` or `npm ls react` might help illuminate.
+npm を使用している場合、`npm ls` や `npm ls react` の実行が、問題の原因を探す役に立つかもしれません。

content/warnings/special-props.md

@@ -3,7 +3,8 @@ title: Special Props Warning
 layout: single
 permalink: warnings/special-props.html
 ---
+「特別な props」の警告。
 
-Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component.
+JSX 要素の大部分の props はコンポーネントに渡されますが、React が使用するため、コンポーネントに転送されない 2 つの特別な props（`ref` と `key`）があります。
 
-For instance, attempting to access `this.props.key` from a component (i.e., the render function or [propTypes](/docs/typechecking-with-proptypes.html#proptypes)) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: `<ListItemWrapper key={result.id} id={result.id} />`). While this may seem redundant, it's important to separate app logic from reconciling hints.
+たとえばコンポーネントから（render()関数または[propType](/docs/typechecking-with-proptypes.html#proptypes)から）`this.props.key` へアクセスしようとすると未定義となります。子コンポーネント内でその値が必要ならば、別の props で渡します（例： `<ListItemWrapper key={result.id} id={result.id} />`）。これは冗長に思えるかもしれませんが、アプリケーションのロジックと突き合わせ処理（reconciling）のためのヒントを分けることは重要です。