From a9ef9436e49eb4040a26d5254c319df307e8e9ba Mon Sep 17 00:00:00 2001 From: jesse Date: Wed, 6 Feb 2019 10:32:45 +0900 Subject: [PATCH 1/3] doc: translate typechecking with proptypes --- content/docs/typechecking-with-proptypes.md | 25 +++++++++++---------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index b2c72c621..e14055aa2 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -6,13 +6,14 @@ redirect_from: - "docs/react-api.html#typechecking-with-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). +> React.PropTypes は React v15.5 において別パッケージに移動しました。代わりに [`prop-types` ライブラリ](https://www.npmjs.com/package/prop-types)を利用するようにしてください。 > ->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) to automate the conversion. +> コードを自動で変換するための [codemod スクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes)を提供しています。 -As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flow.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property: + +アプリケーションが成長するにつれて、型チェックによって多くの不具合を見つけられるようになります。 アプリケーションによっては、[Flow](https://flow.org/) もしくは [TypeScript](https://www.typescriptlang.org/) のような JavaScript 拡張を使ってアプリケーション全体の型チェックを行うことができるでしょう。 しかしそれらを使用せずとも、React は組み込みの型チェック機能を備えています。 コンポーネントの props に型チェックを行うために、特別な `propTypes` プロパティを割当てることがます。 ```javascript import PropTypes from 'prop-types'; @@ -30,11 +31,11 @@ Greeting.propTypes = { }; ``` -`PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode. +`PropTypes` は受け取ったデータが有効かどうかを確認するために使用できる種々のバリデーターをエクスポートしています。 上記の例では、`PropTypes.string` を使用しています。 無効な値がプロパティに与えられた場合、JavaScript のコンソールに警告文が出力されます。 パフォーマンス上の理由から、`propTypes` のチェックは開発モードでのみ行われます。 ### PropTypes -Here is an example documenting the different validators provided: +PropTypes によって提供されている様々なバリデーターの実例を紹介します。 ```javascript import PropTypes from 'prop-types'; @@ -119,9 +120,9 @@ MyComponent.propTypes = { }; ``` -### Requiring Single Child +### 単一の子要素を要求する -With `PropTypes.element` you can specify that only a single child can be passed to a component as children. +`PropTypes.element` を使うことで、コンポーネントに単一の子要素しか渡せないことを指定することができます。 ```javascript import PropTypes from 'prop-types'; @@ -143,9 +144,9 @@ MyComponent.propTypes = { }; ``` -### Default Prop Values +### props のデフォルト値 -You can define default values for your `props` by assigning to the special `defaultProps` property: +`defaultProps` というプロパティを割り当てることで、`props` に値が渡されなかった際のデフォルト値を定義することができます。 ```javascript class Greeting extends React.Component { @@ -168,7 +169,7 @@ ReactDOM.render( ); ``` -If you are using a Babel transform like [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , you can also declare `defaultProps` as static property within a React component class. This syntax has not yet been finalized though and will require a compilation step to work within a browser. For more information, see the [class fields proposal](https://github.com/tc39/proposal-class-fields). +もし、[transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) のような Babel 変換のプラグインを使用している場合、`defaultProps` をクラス内の static プロパティとして定義することができます。この記法はまだ tc39 によって確定されていないため、ブラウザ上で正しく表示させるには、 Babel 等で変換する必要があります。詳細は [class fields proposal](https://github.com/tc39/proposal-class-fields) を参照してください。 ```javascript class Greeting extends React.Component { @@ -184,4 +185,4 @@ class Greeting extends React.Component { } ``` -The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`. +`this.props.name` が親コンポーネントから値が指定されなかった場合でも `defaultProps` によって値が代入されます。 `propTypes` による型チェックは `defaultProps` が解決した後に行われるため、`defaultProps` にも型チェックが反映されます。 From 2559375dc6e2e4331b5d1ffce42a532f6b0bb90f Mon Sep 17 00:00:00 2001 From: jesse Date: Wed, 6 Feb 2019 11:25:18 +0900 Subject: [PATCH 2/3] docs: delete extra space and modify wording --- content/docs/typechecking-with-proptypes.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index e14055aa2..2ce7cfb9b 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -12,7 +12,6 @@ redirect_from: > > コードを自動で変換するための [codemod スクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes)を提供しています。 - アプリケーションが成長するにつれて、型チェックによって多くの不具合を見つけられるようになります。 アプリケーションによっては、[Flow](https://flow.org/) もしくは [TypeScript](https://www.typescriptlang.org/) のような JavaScript 拡張を使ってアプリケーション全体の型チェックを行うことができるでしょう。 しかしそれらを使用せずとも、React は組み込みの型チェック機能を備えています。 コンポーネントの props に型チェックを行うために、特別な `propTypes` プロパティを割当てることがます。 ```javascript @@ -31,7 +30,7 @@ Greeting.propTypes = { }; ``` -`PropTypes` は受け取ったデータが有効かどうかを確認するために使用できる種々のバリデーターをエクスポートしています。 上記の例では、`PropTypes.string` を使用しています。 無効な値がプロパティに与えられた場合、JavaScript のコンソールに警告文が出力されます。 パフォーマンス上の理由から、`propTypes` のチェックは開発モードでのみ行われます。 +`PropTypes` は受け取ったデータが有効かどうかを確認するために使用できる種々のバリデーターをエクスポートしています。上記の例では、`PropTypes.string` を使用しています。 無効な値がプロパティに与えられた場合、JavaScript のコンソールに警告文が出力されます。 パフォーマンス上の理由から、`propTypes` のチェックは開発モードでのみ行われます。 ### PropTypes @@ -169,7 +168,7 @@ ReactDOM.render( ); ``` -もし、[transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) のような Babel 変換のプラグインを使用している場合、`defaultProps` をクラス内の static プロパティとして定義することができます。この記法はまだ tc39 によって確定されていないため、ブラウザ上で正しく表示させるには、 Babel 等で変換する必要があります。詳細は [class fields proposal](https://github.com/tc39/proposal-class-fields) を参照してください。 +もし、[transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) のような Babel 変換のプラグインを使用している場合、`defaultProps` をクラス内の static プロパティとして定義することができます。この記法はまだ TC39 によって確定されていないため、ブラウザ上で正しく表示させるには、Babel 等で変換する必要があります。詳細は [class fields proposal](https://github.com/tc39/proposal-class-fields) を参照してください。 ```javascript class Greeting extends React.Component { @@ -185,4 +184,4 @@ class Greeting extends React.Component { } ``` -`this.props.name` が親コンポーネントから値が指定されなかった場合でも `defaultProps` によって値が代入されます。 `propTypes` による型チェックは `defaultProps` が解決した後に行われるため、`defaultProps` にも型チェックが反映されます。 +`defaultProps` を使えば、`this.props.name` が親コンポーネントから値が指定されなかった場合でも値が代入されていることを保証できます。`propTypes` による型チェックは `defaultProps` が解決した後に行われるため、`defaultProps` にも型チェックが適用されます。 From 154908f774d692f2ede295dd91559ed0b1df2004 Mon Sep 17 00:00:00 2001 From: jesse Date: Wed, 13 Feb 2019 11:22:26 +0900 Subject: [PATCH 3/3] docs: apply text lint --- content/docs/typechecking-with-proptypes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 443393b63..f7b43a52d 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -12,7 +12,7 @@ redirect_from: > > コードを自動で変換するための [codemod スクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes)を提供しています。 -アプリケーションが成長するにつれて、型チェックによって多くの不具合を見つけられるようになります。 アプリケーションによっては、[Flow](https://flow.org/) もしくは [TypeScript](https://www.typescriptlang.org/) のような JavaScript 拡張を使ってアプリケーション全体の型チェックを行うことができるでしょう。 しかしそれらを使用せずとも、React は組み込みの型チェック機能を備えています。 コンポーネントの props に型チェックを行うために、特別な `propTypes` プロパティを割当てることがます。 +アプリケーションが成長するにつれて、型チェックによって多くの不具合を見つけられるようになります。アプリケーションによっては、[Flow](https://flow.org/) もしくは [TypeScript](https://www.typescriptlang.org/) のような JavaScript 拡張を使ってアプリケーション全体の型チェックを行うことができるでしょう。しかしそれらを使用せずとも、React は組み込みの型チェック機能を備えています。コンポーネントの props に型チェックを行うために、特別な `propTypes` プロパティを割当てることがます。 ```javascript import PropTypes from 'prop-types'; @@ -30,7 +30,7 @@ Greeting.propTypes = { }; ``` -`PropTypes` は受け取ったデータが有効かどうかを確認するために使用できる種々のバリデーターをエクスポートしています。上記の例では、`PropTypes.string` を使用しています。 無効な値がプロパティに与えられた場合、JavaScript のコンソールに警告文が出力されます。 パフォーマンス上の理由から、`propTypes` のチェックは開発モードでのみ行われます。 +`PropTypes` は受け取ったデータが有効かどうかを確認するために使用できる種々のバリデーターをエクスポートしています。上記の例では、`PropTypes.string` を使用しています。無効な値がプロパティに与えられた場合、JavaScript のコンソールに警告文が出力されます。パフォーマンス上の理由から、`propTypes` のチェックは開発モードでのみ行われます。 ### PropTypes {#proptypes}