問題一覧に戻る
上級高度なパターンと型
問題94: ジェネリックコンポーネント

最大の型安全性と再利用性のためのジェネリックコンポーネントの作成方法を学びます。ジェネリックパラメータにより、コンポーネントは型チェックを維持しながらあらゆるデータ型で動作できます。このパターンは柔軟なUIライブラリの構築に不可欠です。リストコンポーネント、フォームビルダー、データ可視化コンポーネントで一般的です。

import React from 'react';

{/* ジェネリックインターフェース定義 */}
interface ListProps<> {
  items: T[];
  renderItem: (item: ) => React.ReactNode;
}

{/* ジェネリックコンポーネント */}
function List<T>({ items, renderItem }: ListProps<>) {
  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

{/* 異なる型での使用 */}
function App() {
  const numbers = [1, 2, 3];
  const users = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
  
  return (
    <>
      <List items={numbers} renderItem={(n) => <>{n * 2}</>} />
      <List 
        items={users} 
        renderItem={(u) => <>{u.}</>} 
      />
    </>
  );
}

export default App;