React と TypeScript のベストプラクティス：PropTypes をマスターしてコードの信頼性を向上させる

2024-04-02

TypeScript React アプリケーションにおける PropTypes

React アプリケーションで TypeScript を使用する場合、PropTypes はコンポーネントのプロパティの型チェックに役立ちます。PropTypes は、コンポーネントが期待するプロパティの型と形状を定義するのに役立ち、開発時のエラーを防ぎ、コードの信頼性を向上させます。

利点

型安全性: コンポーネントのプロパティの型を定義することで、開発時に誤った型を受け渡すのを防ぎ、コードの堅牢性を向上させます。
コード補完: IDE でコード補完機能が利用可能になり、開発効率が向上します。
エラー検出: プロパティの型や形状が間違っている場合、開発時にエラーが検出され、デバッグが容易になります。

使い方

prop-types パッケージをインストールします。

yarn add prop-types

コンポーネントで PropTypes をインポートします。

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

// ...

export const MyComponent: React.FC<MyComponentProps> = ({
  prop1,
  prop2,
}) => {
  // ...
};

MyComponent.propTypes = {
  prop1: PropTypes.string.isRequired,
  prop2: PropTypes.number,
};

interface MyComponentProps {
  prop1: string;
  prop2?: number;
}

propTypes オブジェクトで、各プロパティの型とオプションの要件を定義します。

例

prop1: 必須の文字列型
prop2: オプションの数字型

詳細

PropTypes は様々な型チェック機能を提供します。

代替案

TypeScript の型システムのみを使用して、プロパティの型チェックを行うこともできます。

PropTypes は、TypeScript React アプリケーションでコンポーネントのプロパティの型チェックを行うための便利なツールです。開発時のエラーを防ぎ、コードの信頼性を向上させるために役立ちます。

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

// コンポーネント
const MyComponent: React.FC<MyComponentProps> = ({
  prop1,
  prop2,
}) => {
  // ...

  return (
    <div>
      <h1>{prop1}</h1>
      <p>{prop2}</p>
    </div>
  );
};

// 型定義
interface MyComponentProps {
  prop1: string; // 必須の文字列型
  prop2?: number; // オプションの数字型
}

// PropTypes の設定
MyComponent.propTypes = {
  prop1: PropTypes.string.isRequired,
  prop2: PropTypes.number,
};

// 使用例
const App: React.FC = () => {
  return (
    <div>
      <MyComponent prop1="Hello" prop2={10} />
      <MyComponent prop1="World" />
    </div>
  );
};

export default App;

MyComponent は、prop1 と prop2 という 2 つのプロパティを受け取ります。

App コンポーネントは、MyComponent を 2 回使用します。

最初の呼び出しでは、prop1 と prop2 の両方のプロパティを渡します。
2 番目の呼び出しでは、prop1 プロパティのみを渡します。

2 番目の呼び出しでは、prop2 プロパティが渡されていないため、コンポーネントはデフォルト値を使用します。

実行結果

Hello
10

World

このサンプルコードは、PropTypes を使用して TypeScript React アプリケーションでコンポーネントのプロパティの型チェックを行う方法を示しています。

PropTypes の代わりに TypeScript の型システムを使用する

import React from 'react';

// コンポーネント
const MyComponent: React.FC<MyComponentProps> = ({
  prop1,
  prop2,
}) => {
  // ...

  return (
    <div>
      <h1>{prop1}</h1>
      <p>{prop2}</p>
    </div>
  );
};

// 型定義
interface MyComponentProps {
  prop1: string; // 必須の文字列型
  prop2?: number; // オプションの数字型
}

// 使用例
const App: React.FC = () => {
  return (
    <div>
      <MyComponent prop1="Hello" prop2={10} />
      <MyComponent prop1="World" />
    </div>
  );
};

export default App;

このコードは、前のサンプルコードとほぼ同じですが、PropTypes を使用していません。

代わりに、MyComponentProps インターフェースを使用して、コンポーネントのプロパティの型を定義しています。