迷いはもう不要！Reactの型検証、objectOfとshapeを使いこなして安心・安全なコードへ

React PropTypes: objectOf vs shape の分かりやすい解説

PropTypesには、様々な型検証方法がありますが、その中でもよく使用されるのがobjectOfとshapeです。一見似ているように見えますが、それぞれの役割と使い分けが異なります。

objectOf

objectOfは、プロパティの型のみを検証します。つまり、オブジェクト内のプロパティ名が何であっても、指定された型であるかどうかだけをチェックします。

import PropTypes from 'prop-types';

const MyComponent = ({ colors }) => {
  return <div style={{ backgroundColor: colors.primary }}>
    {colors.secondary}
  </div>;
};

MyComponent.propTypes = {
  colors: PropTypes.objectOf(PropTypes.string),
};

上記の例では、colorsプロパティはオブジェクトであること、そしてその中のすべてのプロパティが文字列であることが検証されます。プロパティ名がprimaryであってもsecondaryであっても、問題ありません。

shape

一方、shapeは、オブジェクトの構造を検証します。つまり、オブジェクト内のプロパティ名とその型を個別に定義することができます。

import PropTypes from 'prop-types';

const MyComponent = ({ user }) => {
  return (
    <div>
      {user.name} - {user.age}
    </div>
  );
};

MyComponent.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
  }),
};

上記の例では、userプロパティはオブジェクトであること、そしてその中にnameとageというプロパティが存在し、それぞれが文字列と数値であることが検証されます。プロパティ名の順序は重要ではありません。

使い分け

objectOfとshapeの使い分けは以下の通りです。

• プロパティの型のみを検証したい場合: objectOfを使用します。
• オブジェクトの構造を検証したい場合: shapeを使用します。
• プロパティ名の順序が重要でない場合: shapeを使用します。

一般的には、プロパティの構造を明確に定義したい場合はshapeを使用するのがおすすめです。一方、プロパティ名の自由度が必要な場合や、単純にプロパティの型だけを検証したい場合はobjectOfを使用します。

objectOfとshapeは、Reactの開発においてプロパティの型検証に欠かせないツールです。それぞれの役割と使い分けを理解し、適切に使い分けることで、より堅牢で保守性の高いコードを書くことができます。

objectOf を使用したサンプルコード

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ colors }) => {
  return (
    <div style={{ backgroundColor: colors.primary }}>
      {colors.secondary}
    </div>
  );
};

MyComponent.propTypes = {
  colors: PropTypes.objectOf(PropTypes.string),
};

export default MyComponent;

shape を使用したサンプルコード

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ user }) => {
  return (
    <div>
      {user.name} - {user.age}
    </div>
  );
};

MyComponent.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
  }),
};

export default MyComponent;

補足

上記のサンプルコードはあくまで基本的な例です。実際の開発では、状況に応じて様々な型検証を組み合わせることもできます。

また、React 16.8以降では、prop-typesパッケージではなく、@types/prop-typesパッケージを使用することを推奨されています。

詳細は、Reactの公式ドキュメントを参照してください。

• Using Flow or TypeScript: Flow and TypeScript are static type checking languages that can be used to check the types of props at compile time. This can provide even more rigorous type checking than PropTypes, and can also help to catch errors early in the development process.

// Flow
import React from 'react';

type Props = {
  name: string,
  age: number,
};

const MyComponent: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      {name} - {age}
    </div>
  );
};

// TypeScript
import React from 'react';

interface Props {
  name: string;
  age: number;
}

const MyComponent: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      {name} - {age}
    </div>
  );
};

• Using a custom validation function: You can also write your own custom validation functions to validate props. This can be useful for more complex validation scenarios, or for validating props that are not supported by PropTypes.

import React from 'react';

const validateUser = (user) => {
  if (!user.name || !user.age) {
    return new Error('Invalid user object');
  }

  return null;
};

const MyComponent = ({ user }) => {
  const error = validateUser(user);
  if (error) {
    return <div>{error.message}</div>;
  }

  return (
    <div>
      {user.name} - {user.age}
    </div>
  );
};

• Using a third-party library: There are a number of third-party libraries available for validating props in React. These libraries can provide additional features, such as support for custom validation rules and integration with linting tools.

// Using prop-types-validator
import React from 'react';
import PropTypes from 'prop-types-validator';

const MyComponent = ({ user }) => {
  const isValidUser = PropTypes.shape({
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
  })(user);

  if (!isValidUser) {
    return <div>Invalid user object</div>;
  }

  return (
    <div>
      {user.name} - {user.age}
    </div>
  );
};

The best way to validate props in React will depend on your specific needs and preferences. If you are just starting out, PropTypes is a good option to get started with. If you need more rigorous type checking, Flow or TypeScript can be a good choice. And if you need to validate props in a more complex way, you can write your own custom validation function or use a third-party library.

I hope this helps!