【初心者向け】TypeScript で React ステートレスコンポーネントのオプションデフォルトプロップを使いこなす

2024-05-14

TypeScript でステートレス・ファンクショナル React コンポーネントのオプションデフォルトプロップを指定する方法について説明します。

デフォルトプロップは、コンポーネントにプロップが渡されなかった場合に使用する値を定義するものです。コンポーネントの柔軟性を高め、プロップが渡されなかった場合の動作を明確にするために役立ちます。

オプションデフォルトプロップは、デフォルトプロップにオプションの型を指定するものです。コンポーネントにプロップが渡されなかった場合、デフォルト値が使用されます。ただし、プロップが渡された場合は、その値が使用されます。

TypeScript でオプションデフォルトプロップを指定するには、以下の手順に従います。

コンポーネントの型を定義します。
defaultProps プロパティを定義します。
オプションの型を指定するには、? 演算子を使用します。

例

interface MyComponentProps {
  name?: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name = 'John Doe', age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
};

この例では、MyComponent コンポーネントには name と age という 2 つのプロップがあります。name プロップはオプションで、デフォルト値は 'John Doe' です。age プロップは必須です。

オプションデフォルトプロップを使用する利点は次のとおりです。

コンポーネントの柔軟性を高めることができます。
プロップが渡されなかった場合の動作を明確にすることができます。
コードをより読みやすくすることができます。

オプションデフォルトプロップを使用する際には、以下の点に注意する必要があります。

オプションの型を指定しないと、コンポーネントが正しく動作しない可能性があります。
デフォルト値がコンポーネントの動作に影響を与える可能性があることに注意する必要があります。

TypeScript でステートレス・ファンクショナル React コンポーネントのオプションデフォルトプロップを指定する方法について説明しました。オプションデフォルトプロップを使用すると、コンポーネントの柔軟性を高め、プロップが渡されなかった場合の動作を明確にすることができます。

interface MyComponentProps {
  name?: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name = 'John Doe', age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
};

export default MyComponent;

このコードは、以下のことを行います。

MyComponent コンポーネントを定義します。このコンポーネントは、name と age プロップを受け取ります。name プロップが渡されなかった場合、デフォルト値が使用されます。age プロップが渡されなかった場合、エラーが発生します。
コンポーネントのレンダリングロジックを定義します。このロジックは、name プロップと age プロップを使用して、<h1> タグと <p> タグをレンダリングします。
MyComponent コンポーネントをデフォルトエクスポートします。

このコードを実行すると、以下の結果が表示されます。

<h1>John Doe</h1>
<p>Age: 30</p>

interface MyComponentProps {
  name?: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name = 'John Doe', age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
};

ステートレス・ファンクショナル React コンポーネントのオプションデフォルトプロップを指定するその他の方法

defaultProps オブジェクトを使用する

interface MyComponentProps {
  name?: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <h1>{name || 'John Doe'}</h1>
      <p>Age: {age}</p>
    </div>
  );
};

const defaultProps: MyComponentProps = {
  name: 'John Doe',
};

MyComponent.defaultProps = defaultProps;

この例では、defaultProps オブジェクトを使用して、name プロップのデフォルト値を 'John Doe' に設定しています。defaultProps オブジェクトは、コンポーネントの定義の外で定義する必要があります。

|| 演算子を使用する

interface MyComponentProps {
  name?: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name = 'John Doe', age }) => {
  return (
    <div>
      <h1>{name || 'John Doe'}</h1>
      <p>Age: {age}</p>
    </div>
  );
};

この例では、|| 演算子を使用して、name プロップが渡されなかった場合に 'John Doe' を使用するようにしています。|| 演算子は、左側の値が null または undefined の場合は右側の値を返します。

テンプレートリテラルを使用する

interface MyComponentProps {
  name?: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name = 'John Doe', age }) => {
  return (
    <div>
      <h1>{name || 'John Doe'}</h1>
      <p>Age: {age}</p>
    </div>
  );
};