React入門 練習問題 10：リストレンダリングとkeyプロパティ
Reactでリストを表示する次のコードについて、最も適切な説明はどれですか？
```javascript
function FruitList() {
const fruits = ['りんご', 'バナナ', 'オレンジ'];
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);
}
```
- mapメソッドを使って配列からリスト要素を生成している
- forループを使って配列からリスト要素を生成している
- useEffectフックを使ってリストを表示している
- コンポーネントが再レンダリングするたびにリストが変わる
- filterメソッドを使って条件に合う要素だけを表示している
Qraftユーザーの成績：正答率 89%（24/27回正解）
正解と解説を見る
正解：mapメソッドを使って配列からリスト要素を生成している
このコードは`map`メソッド（＝配列の各要素を変換して新しい配列を作るメソッド）を使って、`fruits`配列から`<li>`要素のリストを生成しています。
【正解の理由】
`fruits.map((fruit, index) => (...))`という記述は、配列の各要素に対して`<li>`要素を生成し、その結果をJSXとして返しています。
【不正解の理由】
• forループを使って配列からリスト要素を生成している：コード中には`for`文が使われておらず、`map`メソッドが使われている。
• useEffectフックを使ってリストを表示している：`useEffect`は副作用処理（＝レンダリング後に実行される処理）のためのフックで、このコードでは使われていない。
• コンポーネントが再レンダリングするたびにリストが変わる：`fruits`配列は固定値であり、再レンダリングされても内容は変わらない。
• filterメソッドを使って条件に合う要素だけを表示している：コード中に`filter`は使われておらず、`fruits`配列の全要素がそのまま表示される。