MOSFET’s blog

学んだことの備忘録

Reactにおける `JSX.Element[]` の使い方と型定義のベストプラクティス

React

Reactアプリケーションを開発する際、コンポーネントや要素を配列で扱う場面は多くあります。その際、TypeScriptでは JSX.Element[] という型が使われますが、この型で十分な場合もあれば、より細かく定義したほうが良いケースもあります。本記事では、JSX.Element[] の基本的な使い方と、必要に応じた型の詳細な定義について紹介します。

JSX.Element[] とは？

まず、JSX.Element とは、ReactでJSXとして記述した要素（例えば <div> やカスタムコンポーネント）を表す型です。そして、JSX.Element[] はその要素の配列を表す型です。複数の要素を一括してレンダリングする際に使用します。

JSX.Element[] の基本的な使い方

例えば、複数のReact要素をリストとしてレンダリングする際に、JSX.Element[] を使います。以下はその簡単な例です。

const elements: JSX.Element[] = [
  <div key="1">Item 1</div>,
  <span key="2">Item 2</span>,
  <MyComponent key="3" />
];

return <div>{elements}</div>;

この場合、elements は複数のReact要素を格納した配列であり、その型は JSX.Element[] です。このように、React要素をまとめて扱う際に JSX.Element[] は非常に便利です。

JSX.Element[] で十分なケース

基本的に、複数の異なるJSX要素やコンポーネントを扱う際には、JSX.Element[] で十分です。たとえば、リストを map() でレンダリングしたり、複数のコンポーネントを一括して返す場合、特別に詳細な型を定義する必要はありません。

JSX.Element[] が十分な場合の例

const items = ["Item1", "Item2", "Item3"];

const elements: JSX.Element[] = items.map(item => (
  <li key={item}>{item}</li>
));

return <ul>{elements}</ul>;

この例では、JSX.Element[] という型で配列を定義するだけで、複数のリストアイテムが正しく扱われます。要素が複雑でなければ、これで十分な型の安全性を提供します。

より細かい型定義が必要なケース

場合によっては、JSX.Element[] ではなく、より細かい型定義が必要になることがあります。特に、配列内の要素が特定のコンポーネントやタグであることを保証したい場合です。

カスタムコンポーネントを扱う場合

カスタムコンポーネントが配列に含まれる場合、そのプロパティの型を定義することで、型の安全性をさらに高めることができます。例えば、特定の props を持つコンポーネントの配列を扱う場合です。

カスタムコンポーネントの例

interface MyComponentProps {
  title: string;
  id: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ title, id }) => {
  return <div>{title} - {id}</div>;
};

const myComponents: React.ReactElement<MyComponentProps>[] = [
  <MyComponent key="1" title="First" id={1} />,
  <MyComponent key="2" title="Second" id={2} />,
  <MyComponent key="3" title="Third" id={3} />
];

return <div>{myComponents}</div>;

ここでは、React.ReactElement<MyComponentProps> を使って、配列に含まれる要素が MyComponent であることを保証しています。このようにしておけば、間違って他の型の要素が配列に含まれることを防ぐことができます。

HTML要素を扱う場合

HTML要素についても、特定のタグだけを許可したい場合には、React.ReactElement<'li'> のように指定することができます。

HTMLタグの型指定例

const listItems: React.ReactElement<'li'>[] = [
  <li key="1">Item 1</li>,
  <li key="2">Item 2</li>,
  <li key="3">Item 3</li>
];

return <ul>{listItems}</ul>;

この例では、配列に li タグだけが含まれることを保証しています。特定のHTMLタグに限定することで、不要なタグが混入しないように制約を強化できます。

まとめ

  • JSX.Element[] が十分なケース: 複数のJSX要素を扱う際に、特に要素の種類に制約がない場合は JSX.Element[] で十分です。
  • より細かい型定義が必要なケース: 配列内の要素に特定の型（カスタムコンポーネントやHTMLタグ）を指定したい場合は、React.ReactElement<型> を使って型の安全性を高めることができます。

プロジェクトの規模や型の安全性の要求に応じて、JSX.Element[] をそのまま使うか、より細かく型を定義するかを選択しましょう。