「prop-types」でPropsのデータ型を担保する

基礎からはじめるReact入門 第7回

propTypesプロパティの2つの書き方

　propTypesプロパティには、2通りの書き方があります。オブジェクトのプロパティとして記述する記法と、クラスと併用する場合のみ使用可能なstaticプロパティとして記述する記法です。

オブジェクトのプロパティとして記述する

　ここまで、本記事の中で紹介してきた書き方はこちらでした。コンポーネントを定義したオブジェクトに対して、propTypesをプロパティとして継ぎ足すことで、定義を実現します。

　記法としては次の形になります。

リスト10　propTypesをプロパティとして記述した例

class Hoge extends React.Component {
  render() { ... }
}

Hoge.propTypes = {
  aaaa: PropsTypes.xxxxxx,
  bbb: PropTypes.xxxxxx
}

　また、関数宣言のみで定義したステートレスなコンポーネントに対しても、同じ記法でpropTypesプロパティを定義できます。

リスト11　ステートレスなコンポーネントにpropTypesプロパティを定義する

function Hoge(props) {
  // コンポーネントの定義
}

Hoge.propTypes = {
  aaaa: PropsTypes.xxxxxx,
  bbb: PropTypes.xxxxxx
}

　どちらの場合にも共通で定義できるので、基本的にはこちらの記法で書いてしまったほうが混乱が少ないかもしれません。

staticプロパティとして記述する

　staticキーワードはES2015で導入された比較的新しい記法です。クラス内に記述することで、クラス定義に対して唯一のプロパティを定義することができます。staticキーワードを使って定義したプロパティのことを、staticプロパティと呼びます。

　staticプロパティを用いてpropTypesを定義した場合は、次の書き方になります。

リスト12　staticプロパティとしてpropTypesを定義する

class Hoge extends React.Component {
  static propsTypes = {
    aaaa: PropsTypes.xxxxxx,
    bbb: PropTypes.xxxxxx
  }

  render() { ... }
}

　こちらのほうがクラス内に記述できる分、コンポーネントの特性を定義している感覚をより強く持つことができるといった効果は期待できますが、挙動としてはオブジェクトのプロパティとして記述した場合とまったく同じです。好みによってどちらの書き方を使うか選んでください。

まとめ

　今回はPropsの型を定義する方法について紹介しました。material-uiを初めとした多くのReactコンポーネントライブラリにはpropTypesプロパティが定義されているので、ソースコードを読んで参考にするといいでしょう。

　次回はReactと組み合わせて状態管理に使われることが多い、Reduxについて紹介します。複雑な状態を管理できると、本格的にアプリケーションを作っていく上で大きな助けになります。お楽しみに。