1. ジェネリクスとは？

ジェネリクスとは「型を引数のように扱える仕組み」です。例えば<T>と書くことで、使うときに具体的な型を決められるようになります。これにより、同じコンポーネントを文字列でも数値でも使えるようになり、再利用性が高まります。

日常生活に例えると、透明な箱（ジェネリクス）を用意して、中に「りんご（string）」や「バナナ（number）」を入れて使えるようなイメージです。

2. ReactのPropsでジェネリクスを使う基本例

まずは基本的なジェネリクスを使ったPropsの定義を見てみましょう。


type ItemProps<T> = {
  value: T;
};

function Item<T>({ value }: ItemProps<T>) {
  return <div>{String(value)}</div>;
}

function App() {
  return (
    <div>
      <Item value="文字列です" />
      <Item value={123} />
    </div>
  );
}

（画面に「文字列です」と「123」が表示されます）

3. 複数の型を扱うジェネリクス

ジェネリクスは複数の型を受け取ることもできます。例えば「idは数値、nameは文字列」というPropsを作れます。


type PairProps<T, U> = {
  first: T;
  second: U;
};

function Pair<T, U>({ first, second }: PairProps<T, U>) {
  return (
    <div>
      {String(first)} - {String(second)}
    </div>
  );
}

function App() {
  return (
    <div>
      <Pair first={1} second="りんご" />
      <Pair first="ユーザー" second={true} />
    </div>
  );
}

（画面に「1 - りんご」と「ユーザー - true」が表示されます）

4. 配列とジェネリクスを組み合わせる

Propsで配列を受け取る場合にもジェネリクスを使うと便利です。どんな型の配列かを呼び出し側で決められるので、コードが使いやすくなります。


type ListProps<T> = {
  items: T[];
};

function List<T>({ items }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{String(item)}</li>
      ))}
    </ul>
  );
}

function App() {
  return (
    <div>
      <List items={["りんご", "バナナ", "ぶどう"]} />
      <List items={[1, 2, 3]} />
    </div>
  );
}

（画面に「りんご・バナナ・ぶどう」と「1・2・3」のリストが表示されます）

5. ジェネリクスに制約をつける

ジェネリクスには「この型は文字列である必要がある」といった制約をつけられます。これを「extends」を使って書きます。


type NameProps<T extends string> = {
  name: T;
};

function Greeting<T extends string>({ name }: NameProps<T>) {
  return <div>こんにちは、{name}さん！</div>;
}

function App() {
  return (
    <div>
      <Greeting name="太郎" />
      {/* <Greeting name={123} /> ← これはエラーになります */}
    </div>
  );
}

（画面に「こんにちは、太郎さん！」が表示されます）