React の形状を持つ proptype 配列

PropTypes.arrayOf(PropTypes.shape(...)) は、指定したフィールドを持つオブジェクトの配列を表します。prop-types パッケージは開発時にコンポーネントのこの契約をチェックし、渡された props が一致しない場合に警告を出します。

PropTypes が検証するもの

PropTypes は、コンポーネントが想定する props の型とオブジェクトの構造を宣言します。コンポーネントのインターフェイスを説明するのに役立ち、開発中に不一致を見つけやすくします。このチェックはコンソールに警告を出すもので、コンポーネントのレンダリングを止めるものではなく、本番環境でのデータ検証にもなりません。

PropTypes でオブジェクトの配列を検証する

React プロジェクトに prop-types パッケージをインストールします。コンポーネントのモジュールで import PropTypes from 'prop-types' として読み込み、items: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string.isRequired, value: PropTypes.number.isRequired })).isRequired を宣言します。これにより、配列の各項目に同じオブジェクトの形状が適用されます。以下の短い JavaScript の例では、同じデータをリストのレンダラーに渡します。この例は単独で実行でき、PropTypes の宣言は React コンポーネントのモジュールに記述します。

const items = [
  { name: 'Ada', value: 7 },
  { name: 'Lin', value: 9 },
];

function renderItems(items) {
  return `<ul>${items.map((item) => `<li>${item.name}: ${item.value}</li>`).join('')}</ul>`;
}

console.log(renderItems(items));

<ul><li>Ada: 7</li><li>Lin: 9</li></ul>

React コンポーネントでは同じ配列を items prop として受け取り、items.map(...) で各項目を描画します。描画する各要素には安定した key を指定してください。サンプルの値は宣言したフィールドに一致しているため、期待されるリストの内容を示しています。

フィールドを必須にして警告を理解する

宣言で items に付けた .isRequired は、この prop の指定が必須であることを意味します。同じ修飾子を name と value に付けると、各オブジェクトに宣言した型のこれらのフィールドが含まれることを期待します。省略可能なフィールドでは .isRequired を外してください。その場合も、ほかに宣言したフィールドのチェックは続きます。数値ではなく value: '7' を持つオブジェクトは形状に一致しないため、React の開発時チェックはコンソールに警告を出します。この警告によって文字列が数値に変換されたり、prop が拒否されたり、レンダリングが止まったりすることはありません。アプリケーションで外部データや本番データの正しさが必要な場合は、別途検証してください。

よくある質問

PropTypes は配列のすべての項目を検証しますか？

はい。PropTypes.arrayOf は各項目に対してバリデーターを適用します。PropTypes.shape と組み合わせると、各オブジェクトの指定したフィールドをチェックできます。

PropTypes.shape だけで配列を検証できますか？

いいえ。PropTypes.shape は1つのオブジェクトのフィールドを表します。オブジェクトの配列には PropTypes.arrayOf(PropTypes.shape(...)) を使います。

React で PropTypes は必須ですか？

いいえ。PropTypes は任意の実行時チェックで、props の説明や開発時の警告に使えます。静的型付けや、アプリケーションの境界で行うデータ検証の代わりにはなりません。