1. リストレンダリングとは何か

リストレンダリングとは、複数のデータをまとめて画面に表示する仕組みです。

買い物メモや、出席番号の一覧を紙に書くイメージをすると分かりやすいです。一つ一つ同じ形で並べます。

Reactでは、配列と呼ばれる箱の集まりを使い、それを画面に並べて表示します。

2. リスト表示にkeyが必要な理由

Reactでリストを表示するときは、 keyという目印を付けます。

keyは、人の名札のような役割を持ち、どの行がどのデータなのかを Reactに教えています。

このkeyがあるからこそ、アニメーションを付けても正しく動きを判断できます。

3. シンプルなリスト表示の基本例


function App() {
  const fruits = ["りんご", "みかん", "ぶどう"];

  return (
    <ul>
      {fruits.map(fruit => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

（果物の名前が縦に並んで表示されます）

このように、同じ形の表示を繰り返し作るのがリストレンダリングです。

4. アニメーションとは何か

アニメーションとは、表示が変わるときになめらかに動かす演出のことです。

いきなり表示されるより、ふわっと現れた方が見ていて分かりやすくなります。

Reactでは、表示の切り替わりに動きを加えることで、使いやすい画面を作れます。

5. CSSだけでできる簡単なアニメーション

まずは難しい道具を使わず、 CSSだけでアニメーションを付けてみます。


function App() {
  const items = ["A", "B", "C"];

  return (
    <ul>
      {items.map(item => (
        <li key={item} className="fade-item">
          {item}
        </li>
      ))}
    </ul>
  );
}

（リストがふわっと表示されるような動きになります）

表示されたときに少しずつ現れるだけでも、印象が大きく変わります。

6. 追加と削除にアニメーションを付ける考え方

リストに要素を追加したり、消したりする場面では、アニメーションが特に役立ちます。

急に消えるより、ゆっくり消えた方が何が起きたか分かりやすいです。


import React, { useState } from "react";

function App() {
  const [items, setItems] = useState(["ねこ", "いぬ"]);

  return (
    <div>
      <button onClick={() => setItems([...items, "うさぎ"])}>
        追加
      </button>
      <ul>
        {items.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（ボタンを押すとリストが増えて表示されます）