ReactJSでネストされたオブジェクトのPropTypesをshapeを使って検証する方法
ReactJSでネストされたオブジェクトのPropTypesを検証する方法
従来のPropTypesによる検証
ネストされていないオブジェクトの場合、PropTypes.shapeを使ってオブジェクトの型を定義できます。例えば、以下のコードはPersonというオブジェクトの型を定義し、nameとageというプロパティを持つことを検証します。
const Person = PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
});
このコードは、Person型のオブジェクトがnameとageというプロパティを持ち、それぞれがstring型とnumber型であることを検証します。
ネストされたオブジェクトの検証
const Address = PropTypes.shape({
street: PropTypes.string.isRequired,
city: PropTypes.string.isRequired,
});
そして、Person型のオブジェクトのaddressプロパティがAddress型のオブジェクトであることを検証するには、以下のコードのようにPropTypes.shapeをネストさせます。
const Person = PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
address: Address,
});
より詳細な検証
さらに詳細な検証を行うには、PropTypes.oneOfTypeやPropTypes.arrayOfなどの型検証ライブラリを使うことができます。これらのライブラリを使うことで、オブジェクトの型だけでなく、値の範囲やフォーマットなどの検証を行うことができます。
import React, { Component } from 'react';
const Address = PropTypes.shape({
street: PropTypes.string.isRequired,
city: PropTypes.string.isRequired,
});
const Person = PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
address: Address,
});
class App extends Component {
render() {
return (
<div>
<h1>Person</h1>
<p>Name: {this.props.person.name}</p>
<p>Age: {this.props.person.age}</p>
<p>Address: {this.props.person.address.street}, {this.props.person.address.city}</p>
</div>
);
}
}
App.propTypes = {
person: Person,
};
export default App;
このコードは、Personというコンポーネントがあり、name、age、addressというプロパティを持つことを検証します。addressプロパティはAddress型のオブジェクトであることを検証します。
このコードを実行すると、以下のような画面が表示されます。
Person
Name: John Doe
Age: 30
Address: 123 Main Street, San Francisco, CA 94105
- より詳細な検証を行うには、
PropTypes.oneOfTypeやPropTypes.arrayOfなどの型検証ライブラリを使うことができます。
TypeScriptを使う
interface Person {
name: string;
age: number;
address: Address;
}
interface Address {
street: string;
city: string;
}
const App: React.FC<Person> = ({ person }) => {
return (
<div>
<h1>Person</h1>
<p>Name: {person.name}</p>
<p>Age: {person.age}</p>
<p>Address: {person.address.street}, {person.address.city}</p>
</div>
);
};
TypeScriptを使うと、コンパイル時に型のエラーをチェックすることができます。
型検証ライブラリを使う
prop-typesや@typescript-eslint/eslint-pluginなどの型検証ライブラリを使うと、より詳細な検証を行うことができます。
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const Address = PropTypes.shape({
street: PropTypes.string.isRequired,
city: PropTypes.string.isRequired,
});
const Person = PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
address: Address,
});
class App extends Component {
render() {
return (
<div>
<h1>Person</h1>
<p>Name: {this.props.person.name}</p>
<p>Age: {this.props.person.age}</p>
<p>Address: {this.props.person.address.street}, {this.props.person.address.city}</p>
</div>
);
}
}
App.propTypes = {
person: Person,
};
export default App;
// .eslintrc.json
{
"extends": "eslint:recommended",
"plugins": ["@typescript-eslint"],
"parser": "@typescript-eslint/parser",
"rules": {
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-unused-vars": "off",
}
}
これらのライブラリを使うと、オブジェクトの型だけでなく、値の範囲やフォーマットなどの検証を行うことができます。
ネストされたオブジェクトのPropTypesを検証するには、いくつかの方法があります。
PropTypes.shapeを使う
それぞれの方法にはメリットとデメリットがあります。
- 型検証ライブラリを使う方法は詳細な検証を行うことができますが、ライブラリの学習コストがかかります。
- TypeScriptを使う方法は詳細な検証を行うことができますが、コンパイルエラーが発生する可能性があります。
PropTypes.shapeを使う方法はシンプルですが、詳細な検証を行うことはできません。
reactjs
