propsとmap：自己紹介カードをたくさん並べよう

たける 名まえカード、1枚は作れました！クラスのみんなのぶんも作りたいです。

りこ じゃあ2つの技を覚えよう。「props（外から情報をわたす）」と「map（データをならべる）」。これでミニ図鑑が作れる。

props ＝ 外からわたす情報

前回のカードは、名前が「山田たける」で固定でした。でも、名前や趣味を外からわたせるようにすると、1つの部品でいろんな人のカードが作れます。

この「外からわたす情報」を props（プロップス） といいます。カードに書きこむメモのようなものです。

function NameCard({ name, hobby }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>趣味：{hobby}</p>
    </div>
  )
}

{ name, hobby } の部分が「受け取る情報」です。使うときは、こう書きます。

export default function App() {
  return (
    <div>
      <NameCard name="山田たける" hobby="サッカー" />
      <NameCard name="田中はるか" hobby="ダンス" />
      <NameCard name="鈴木ゆな" hobby="読書" />
    </div>
  )
}

name="..." や hobby="..." で、それぞれのカードにちがう情報をわたしています。画面にはこう出ます。

1つの NameCard から、中身のちがう3枚のカードができました。これがpropsの便利さです。

たける でも、30人ぶん書くとなると、`<NameCard ... />` を30回書くんですか…？

りこ そこで map。データのリストから、自動でカードをならべてくれる技だよ。

map ＝ データからならべる

まず、みんなの情報を**リスト（配列）**にまとめます。

const friends = [
  { id: 'takeru', name: '山田たける', hobby: 'サッカー' },
  { id: 'haruka', name: '田中はるか', hobby: 'ダンス' },
  { id: 'yuna', name: '鈴木ゆな', hobby: '読書' },
]

そして map を使うと、このリストから自動でカードをならべられます。

export default function App() {
  return (
    <div>
      {friends.map((f) => (
        <NameCard key={f.id} name={f.name} hobby={f.hobby} />
      ))}
    </div>
  )
}

friends.map(...) は「リストの1つずつについて、カードを作ってね」という意味です。key={f.id} は「ならべるときの目印」です。同じ名前の人がいても、idは重ならないようにします。Appの例は2つを同時に貼らず、後の例で前のAppを置き換えます。NameCardとfriendsは同じファイルに置きます。

これで、friends にデータを足すだけで、カードが自動でふえます。

データに「佐藤けんと」を1人足したら、カードも1枚ふえました。これが「自己紹介カード集（ミニ図鑑）」です！

やってみよう

friends のリストに、自分と友だちを足してみましょう。hobby を food（好きな食べ物）に変えたり、項目をふやしたりしてもおもしろいです。好きな動物やキャラクターの「ミニ図鑑」も作れますよ。

まとめ

• props … コンポーネントに外から情報をわたすしくみ（name="..." のように書く）
• 1つの部品でも、propsを変えれば中身のちがうカードが何枚でも作れる
• map … データのリストから、自動で部品をならべる技
• key … ならべるときの目印（つけるお約束）
• データを足すだけでカードがふえる → これがミニ図鑑・自己紹介カード集

次の第9回では、ボタンをおすと画面が変わるしくみ（stateとイベント）を学びます。いよいよ「動く」アプリに近づきます。

確認してみる

同じ名前で違うidのカードを2枚作る。項目をfoodへ変える場合は、データ・渡すprops・受け取る側の3箇所をそろえる。

仕様・手順の参照先