- はじめに このセクションでは、Reactのリストとキーについて学びます。リストは、ページ上に複数のアイテムを表示するために欠かせないものであり、キーはReactがどのアイテムが変更されたり追加されたり削除されたりしたかを識別するのに役立ちます。GeekとGalの会話を通して、リストとキーについてより理解を深めましょう！
Reactでは、ユーザーや製品のリストなど、アイテムのリストを表示することがよくあります。
Reactでアイテムのリストを作成するにはどうすればいいの？
JavaScriptのmap()関数を使って、アイテムの配列をループして、コンポーネント内に要素のリストを作成することができるよ！
- Reactでのリストの作成
Reactのコンポーネントでmap()を使ってアイテムのリストを作成する方法の例を見てね：
function ListItems({ items }) {
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
なるほど！map()関数を使ってアイテムをループし、各アイテムにリスト要素を作成するんだね。
その通り！でも、リスト内の各要素に一意の"キー"を割り当てる必要があるのよ。
- リストでのキーの使用
キーって何で、なんで重要なの？
キーは、リスト内の各要素に割り当てられる一意の識別子だよ。Reactがどのアイテムが変更されたり追加されたり削除されたりしたかを把握し、レンダリングプロセスをより効率的にするのに役立つの！
- おかしな例
キーを使った面白い例を教えてもらえる？
もちろん！map()とキーを使って、笑いが止まらないダジャレのリストを作ってみよう！
const puns = [
{ id: 1, text: "Why don't scientists trust atoms? Because they make up everything!" },
{ id: 2, text: "Did you hear about the mathematician who’s afraid of negative numbers? He'll stop at nothing to avoid them!" },
{ id: 3, text: "Why do we never tell secrets on a farm? Because the potatoes have eyes and the corn has ears!" },
];
function PunList() {
return (
<ul>
{puns.map((pun) => (
<li key={pun.id}>{pun.text} 😂</li>
))}
</ul>
);
}
ハハ、おかしすぎる！map()を使ってダジャレのリストを作成し、各リストアイテムに一意のキーを割り当てたんだね。
そうなの！Reactでリストを作成するときは、常に一意のキーを使用して、アプリを効率的でサクサク動くようにしましょう！
- おわりに
リストとキーはReactで重要な概念です。map()関数を使って要素のリストを作成し、各要素に一意のキーを割り当てることで、Reactのレンダリングパフォーマンスを最適化することができます。リストとキーを使ってダイナミックで効率的なユーザーインターフェースを作成するために、引き続き実験してみましょう！😄