ReactJSでネストされたオブジェクトのPropTypesをshapeを使って検証する方法

2024-04-02

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などの型検証ライブラリを使うことができます。これらのライブラリを使うことで、オブジェクトの型だけでなく、値の範囲やフォーマットなどの検証を行うことができます。

ReactJSでネストされたオブジェクトのPropTypesを検証するには、PropTypes.shapeを使ってネストされたオブジェクトの型を定義することができます。さらに詳細な検証を行うには、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: John Doe
Age: 30
Address: 123 Main Street, San Francisco, CA 94105

このコードはあくまでもサンプルコードであり、実際の使用例に合わせて変更する必要があります。
より詳細な検証を行うには、PropTypes.oneOfTypeやPropTypes.arrayOfなどの型検証ライブラリを使うことができます。

ネストされたオブジェクトのPropTypesを検証する他の方法

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",
  }
}