リストを描画する ― map

導入

一覧表示は UI の基本です。配列を JSX の一覧に変換するには、JavaScript の map を使います。

説明

配列 fruits を map で <li> の配列に変換しています。

function App() {
  const fruits = ["りんご", "みかん", "ぶどう"];
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

• {fruits.map(...)} … 配列を JSX 要素の配列に変換して埋め込みます。
• key={...} … React が「どの項目がどれか」を見分けるための目印。一覧の各要素には一意な key を付けます（付けないと警告が出ます）。
• key には、重複しない値（idや、なければ index）を使います。

やってみよう

fruits に果物を2つ追加してみましょう。さらに、オブジェクトの配列（例 [{id:1, name:"りんご"}]）にして、key={item.id}・{item.name} で表示してみてください。