1. 配列型Propsとは？

配列型Propsとは、複数のデータをひとつにまとめてコンポーネントに渡す方法です。配列は「順番付きの箱」のようなもので、1番目、2番目といった形で複数のデータを整理できます。現実でいえば「買い物かご」に似ていて、同じ種類のアイテムをまとめて入れておけます。

2. 基本的な配列型Propsの使い方

まずは文字列の配列を渡して表示する例です。複数の名前をリストとして表示してみましょう。


type NameListProps = {
  names: string[];
};

function NameList({ names }: NameListProps) {
  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

function App() {
  const users = ["太郎", "花子", "次郎"];

  return (
    <div>
      <NameList names={users} />
    </div>
  );
}

（画面に「太郎」「花子」「次郎」と箇条書きで表示されます）

3. 数値の配列をPropsで扱う

配列型Propsは文字列だけでなく、数値のリストにも使えます。例えば点数の一覧を表示するときです。


type ScoreListProps = {
  scores: number[];
};

function ScoreList({ scores }: ScoreListProps) {
  return (
    <div>
      {scores.map((score, index) => (
        <p key={index}>{score}点</p>
      ))}
    </div>
  );
}

function App() {
  const testScores = [80, 90, 75];

  return (
    <div>
      <ScoreList scores={testScores} />
    </div>
  );
}

（画面に「80点」「90点」「75点」と表示されます）

4. オブジェクトの配列をPropsで扱う

配列にはオブジェクトを入れることもできます。例えばユーザーの名前と年齢をまとめて表示する場合です。


type User = {
  name: string;
  age: number;
};

type UserListProps = {
  users: User[];
};

function UserList({ users }: UserListProps) {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>
          {user.name}（{user.age}歳）
        </li>
      ))}
    </ul>
  );
}

function App() {
  const members = [
    { name: "太郎", age: 20 },
    { name: "花子", age: 25 },
    { name: "次郎", age: 22 }
  ];

  return (
    <div>
      <UserList users={members} />
    </div>
  );
}

（画面に「太郎（20歳）」「花子（25歳）」「次郎（22歳）」と表示されます）