[React.js] - パート6: React Lists
Ace Lennox
Reactでは、リストをレンダリングする際にJavaScriptのmap()メソッドがよく使用されます。このガイドでは、Reactでのリスト処理を簡単な例とベストプラクティスを通して解説します。
Reactでリストをレンダリングする
map()メソッドは、配列の各要素をReactコンポーネントに変換するための一般的な方法です。
例：リストのレンダリング
以下の例では、車のブランド名のリストを表示します。
function Car(props) {
return <li>私は{props.brand}です</li>;
}
function Garage() {
const cars = ["トヨタ", "ホンダ", "フォード"];
return (
<div>
<h1>私のガレージにいる車:</h1>
<ul>
{cars.map((car, index) => (
<Car key={index} brand={car} />
))}
</ul>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Garage />);
仕組み:
配列のマッピング: 配列
carsをそれぞれの<Car />コンポーネントに変換します。動的な内容: 各
Carコンポーネントは、車のブランド名をbrandプロパティとして受け取ります。
なぜReactのリストにキーが必要なのか？
Reactでは、キーを使用してリスト内の要素を特定します。これにより、アイテムが更新または削除された場合でも、そのアイテムだけを再レンダリングし、リスト全体のパフォーマンスが向上します。
キーのルール:
キーは兄弟要素間で一意である必要があります。
異なるリスト間でキーを再利用することは可能です。
一意の識別子（例：
id）を使用するのが望ましいです。配列インデックスは最後の手段として使用しますが、動的なリストでは避けるべきです。
例：リストにキーを追加する
以下の例では、各リスト項目に一意のidを使用してキーを割り当てます。
function Car(props) {
return <li>私は{props.brand}です</li>;
}
function Garage() {
const cars = [
{ id: 1, brand: "トヨタ" },
{ id: 2, brand: "ホンダ" },
{ id: 3, brand: "フォード" }
];
return (
<div>
<h1>私のガレージにいる車:</h1>
<ul>
{cars.map((car) => (
<Car key={car.id} brand={car.brand} />
))}
</ul>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Garage />);
改善点:
リスト項目にキーを追加: 各
Carコンポーネントに車のidをキーとして割り当てています。効率的な更新: Reactは特定のアイテムのみを再レンダリングし、リスト全体のパフォーマンスを向上させます。
例：複数のプロパティを持つオブジェクトの使用
リスト内の項目が複数のプロパティを持つ場合、追加データをpropsとして渡すことができます。
function Car(props) {
return (
<li>
{props.brand} - モデル: {props.model}
</li>
);
}
function Garage() {
const cars = [
{ id: 1, brand: "トヨタ", model: "カローラ" },
{ id: 2, brand: "ホンダ", model: "シビック" },
{ id: 3, brand: "フォード", model: "フォーカス" }
];
return (
<div>
<h1>私のガレージにいる車:</h1>
<ul>
{cars.map((car) => (
<Car key={car.id} brand={car.brand} model={car.model} />
))}
</ul>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Garage />);
リストレンダリングのベストプラクティス
ユニークなキーを使用する: 各リスト項目に一意のキー（理想的には
id）を設定します。インデックスの使用を避ける: 配列インデックスはリストが静的で変更されない場合にのみ使用します。
コンポーネントを分割する: 複雑なリスト項目を扱う場合は、コンポーネントを分割して可読性を向上させましょう。
まとめ
Reactでのリストのレンダリングは、効率的なアプリケーション開発の基本です。キーを正しく使用することで、効率的な更新とパフォーマンスを実現できます。
これらの例を試して、Reactでのリストレンダリングのスキルを磨き、柔軟で効率的なアプリケーションを構築してみましょう！
ソースコード
このプロジェクトの完全なソースコードはGitHubで利用可能です。