Skip to content

Commit 558bc13

Browse files
Naturalclarpotato4d
authored andcommitted
Translate typechecking-with-proptypes.md (#67)
* doc: translate typechecking with proptypes * docs: delete extra space and modify wording * docs: apply text lint
1 parent e5fe12e commit 558bc13

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

content/docs/typechecking-with-proptypes.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ redirect_from:
66
- "docs/react-api.html#typechecking-with-proptypes"
77
---
88

9-
> Note:
9+
> 注意:
1010
>
11-
> `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).
11+
> React.PropTypesReact v15.5 において別パッケージに移動しました。代わりに [`prop-types` ライブラリ](https://www.npmjs.com/package/prop-types)を利用するようにしてください。
1212
>
13-
>We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) to automate the conversion.
13+
> コードを自動で変換するための [codemod スクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes)を提供しています。
1414
15-
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:
15+
アプリケーションが成長するにつれて、型チェックによって多くの不具合を見つけられるようになります。アプリケーションによっては、[Flow](https://flow.org/) もしくは [TypeScript](https://www.typescriptlang.org/) のような JavaScript 拡張を使ってアプリケーション全体の型チェックを行うことができるでしょう。しかしそれらを使用せずとも、React は組み込みの型チェック機能を備えています。コンポーネントの props に型チェックを行うために、特別な `propTypes` プロパティを割当てることがます。
1616

1717
```javascript
1818
import PropTypes from 'prop-types';
@@ -30,11 +30,11 @@ Greeting.propTypes = {
3030
};
3131
```
3232

33-
`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.
33+
`PropTypes` は受け取ったデータが有効かどうかを確認するために使用できる種々のバリデーターをエクスポートしています。上記の例では、`PropTypes.string` を使用しています。無効な値がプロパティに与えられた場合、JavaScript のコンソールに警告文が出力されます。パフォーマンス上の理由から、`propTypes` のチェックは開発モードでのみ行われます。
3434

3535
### PropTypes {#proptypes}
3636

37-
Here is an example documenting the different validators provided:
37+
PropTypes によって提供されている様々なバリデーターの実例を紹介します。
3838

3939
```javascript
4040
import PropTypes from 'prop-types';
@@ -119,9 +119,9 @@ MyComponent.propTypes = {
119119
};
120120
```
121121

122-
### Requiring Single Child {#requiring-single-child}
122+
### 単一の子要素を要求する {#requiring-single-child}
123123

124-
With `PropTypes.element` you can specify that only a single child can be passed to a component as children.
124+
`PropTypes.element` を使うことで、コンポーネントに単一の子要素しか渡せないことを指定することができます。
125125

126126
```javascript
127127
import PropTypes from 'prop-types';
@@ -143,9 +143,9 @@ MyComponent.propTypes = {
143143
};
144144
```
145145

146-
### Default Prop Values {#default-prop-values}
146+
### props のデフォルト値 {#default-prop-values}
147147

148-
You can define default values for your `props` by assigning to the special `defaultProps` property:
148+
`defaultProps` というプロパティを割り当てることで、`props` に値が渡されなかった際のデフォルト値を定義することができます。
149149

150150
```javascript
151151
class Greeting extends React.Component {
@@ -168,7 +168,7 @@ ReactDOM.render(
168168
);
169169
```
170170

171-
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).
171+
もし、[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) を参照してください。
172172

173173
```javascript
174174
class Greeting extends React.Component {
@@ -184,4 +184,4 @@ class Greeting extends React.Component {
184184
}
185185
```
186186

187-
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`.
187+
`defaultProps` を使えば、`this.props.name` が親コンポーネントから値が指定されなかった場合でも値が代入されていることを保証できます。`propTypes` による型チェックは `defaultProps` が解決した後に行われるため、`defaultProps` にも型チェックが適用されます。

0 commit comments

Comments
 (0)