Reactでアプリケーションを開発していると、配列の内容や長さに応じてUIを動的に変化させたい場面に出くわすことがよくあります。たとえば、配列が空の場合には「データがありません」と表示し、一定数以上の要素がある場合にはスクロール可能なリストをレンダリングするなどのシナリオが考えられます。条件付きレンダリングは、ユーザーエクスペリエンスを向上させるだけでなく、効率的なUI設計にも役立つ重要な技術です。本記事では、Reactで配列の長さに基づいて条件付きレンダリングを実現する方法について、基礎から応用まで具体例を交えながら解説していきます。
条件付きレンダリングの基本概念
条件付きレンダリングとは、特定の条件に応じて異なるUIを動的に表示するための手法です。Reactでは、この機能を活用してユーザーにとって最適な画面を提供することができます。
Reactにおける条件付きレンダリングの仕組み
Reactでは、条件付きレンダリングを実現するためにJavaScriptの論理演算子や三項演算子を利用します。コンポーネントは関数のように振る舞うため、条件に基づいて異なるJSXを返すことが可能です。
function ExampleComponent({ items }) {
return (
<div>
{items.length > 0 ? (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No items found.</p>
)}
</div>
);
}主な条件式の使用例
- 三項演算子
条件がtrueの場合とfalseの場合で異なるUIを切り替えます。
{condition ? <ComponentA /> : <ComponentB />}- AND演算子（&&）
条件がtrueの場合のみ特定のUIを表示します。
{condition && <Component />}- if文の使用
より複雑な条件付きレンダリングが必要な場合には、if文を使ってJSXを選択的に返すこともできます。
if (condition) {
return <ComponentA />;
}
return <ComponentB />;Reactの特徴を活かした柔軟性
Reactでは、UIの部分的な更新が可能な仮想DOMが採用されているため、条件付きレンダリングを効率的に実行できます。この特性により、必要な箇所だけを更新することでパフォーマンスを保ちながら、動的なインタラクションを実現できます。
条件付きレンダリングの基本を理解することで、配列の長さに応じた高度なレンダリングへとステップアップする準備が整います。次のセクションでは、配列操作の基本について説明します。
配列操作の基本
Reactで配列を操作する際には、JavaScriptの基本的な配列操作メソッドを理解しておくことが重要です。これらのメソッドを活用することで、配列の長さに応じた条件付きレンダリングをスムーズに実装できます。
配列の長さを取得する
配列の長さを取得するには、lengthプロパティを使用します。このプロパティは、配列の要素数を返します。
const items = ['apple', 'banana', 'cherry'];
console.log(items.length); // 出力: 3Reactコンポーネント内でこれを利用し、条件付きレンダリングの条件として組み込むことができます。
配列の基本操作
以下は、配列を操作するための代表的なメソッドとその例です。
1. `map`
配列の各要素に対して関数を適用し、新しい配列を生成します。Reactでは、mapを利用してリストをレンダリングすることが一般的です。
const items = ['apple', 'banana', 'cherry'];
const listItems = items.map((item, index) => <li key={index}>{item}</li>);2. `filter`
条件に一致する要素を抽出した新しい配列を生成します。
const items = ['apple', 'banana', 'cherry'];
const filteredItems = items.filter(item => item.startsWith('a')); // ['apple']3. `reduce`
配列を1つの値に変換します。合計値や平均値の計算などに利用されます。
const numbers = [10, 20, 30];
const sum = numbers.reduce((total, num) => total + num, 0); // 604. `forEach`
各要素に対して関数を実行しますが、新しい配列は生成しません。
const items = ['apple', 'banana', 'cherry'];
items.forEach(item => console.log(item));Reactでの配列の状態管理
Reactで配列を動的に操作する場合は、useStateフックを使用して状態を管理します。
import React, { useState } from 'react';
function Example() {
const [items, setItems] = useState(['apple', 'banana', 'cherry']);
const addItem = () => {
setItems([...items, 'newItem']);
};
return (
<div>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
<button onClick={addItem}>Add Item</button>
</div>
);
}配列操作を理解する重要性
配列操作の基本を正確に理解することで、配列の長さに基づいた条件付きレンダリングや、複雑なデータ操作を効率的に実現できます。次のセクションでは、これを応用して配列長による条件付きレンダリングの具体例を見ていきます。
配列長による条件付きレンダリングの実装例
Reactで配列の長さを基に条件付きレンダリングを行うのは、リストやデータテーブルなどの動的コンポーネントを扱う際に非常に重要な技術です。ここでは具体的な実装例を紹介します。
基本的な実装例
配列が空の場合と要素がある場合で異なるUIを表示する例です。
import React from 'react';
function ArrayRenderingExample({ items }) {
return (
<div>
{items.length > 0 ? (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No items available.</p>
)}
</div>
);
}
// 使用例
const sampleItems = ['Apple', 'Banana', 'Cherry'];
export default function App() {
return <ArrayRenderingExample items={sampleItems} />;
}この例では、配列itemsのlengthを条件にしてレンダリング内容を切り替えています。
特定の配列長を条件とする例
配列の長さが一定以上の場合に追加のUIを表示する例です。
function ConditionalRendering({ items }) {
return (
<div>
<p>Total items: {items.length}</p>
{items.length > 5 ? (
<p>You have a lot of items!</p>
) : (
<p>Keep adding more items!</p>
)}
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
// 使用例
const sampleItems = ['Apple', 'Banana', 'Cherry', 'Date', 'Fig', 'Grape'];
export default function App() {
return <ConditionalRendering items={sampleItems} />;
}この例では、配列の長さが5より大きい場合に「You have a lot of items!」というメッセージを表示します。
配列が空の場合にフォールバックUIを表示する
フォールバックUIは、配列が空の際やデータ取得中の場合にユーザーに適切なメッセージやローディング状態を通知するために使用されます。
function FallbackUI({ items, isLoading }) {
if (isLoading) {
return <p>Loading...</p>;
}
return (
<div>
{items.length === 0 ? (
<p>No data available. Please try again later.</p>
) : (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
)}
</div>
);
}
// 使用例
const sampleItems = [];
export default function App() {
return <FallbackUI items={sampleItems} isLoading={false} />;
}この例では、データのロード中には「Loading…」を表示し、ロード完了後にデータがない場合には「No data available.」を表示します。
実用例: ショッピングカート
ショッピングカートで商品の数によって異なるメッセージを表示する例です。
function ShoppingCart({ items }) {
return (
<div>
<h2>Your Shopping Cart</h2>
{items.length === 0 ? (
<p>Your cart is empty. Start shopping now!</p>
) : (
<div>
<p>You have {items.length} items in your cart.</p>
<ul>
{items.map((item, index) => (
<li key={index}>{item.name} - ${item.price}</li>
))}
</ul>
</div>
)}
</div>
);
}
// 使用例
const cartItems = [
{ name: 'Laptop', price: 999 },
{ name: 'Mouse', price: 49 },
];
export default function App() {
return <ShoppingCart items={cartItems} />;
}この例では、カートが空の場合とアイテムがある場合で異なるメッセージやリストを表示します。
まとめ
配列長による条件付きレンダリングは、配列の状態を直接UIに反映するための基本的な技術です。これにより、ユーザーにとってわかりやすく動的な画面を作成できます。次のセクションでは、複数条件を組み合わせたより高度なレンダリング制御について解説します。
複数条件でのレンダリング制御
Reactでは、単純な配列の長さだけでなく、他の条件を組み合わせてレンダリング内容を制御することで、より柔軟で直感的なUIを構築できます。ここでは、複数条件を使用した条件付きレンダリングの実装方法を紹介します。
基本的な複数条件の組み合わせ
複数条件を使用するには、JavaScriptの論理演算子を活用します。以下の例では、配列の長さと他のプロパティを組み合わせた条件付きレンダリングを実装しています。
function MultiConditionRendering({ items, userLoggedIn }) {
return (
<div>
{userLoggedIn ? (
items.length > 0 ? (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>Your list is empty. Start adding items!</p>
)
) : (
<p>Please log in to view your items.</p>
)}
</div>
);
}
// 使用例
const sampleItems = ['Item 1', 'Item 2'];
export default function App() {
return <MultiConditionRendering items={sampleItems} userLoggedIn={true} />;
}この例では、ユーザーがログインしているかどうかと、配列が空であるかを条件にレンダリング内容を切り替えています。
複数条件をわかりやすく管理する方法
複雑な条件が増えると、JSXが見づらくなる可能性があります。その場合は、条件を変数に分割することで、コードを簡潔かつ可読性の高いものにできます。
function EnhancedConditionRendering({ items, userLoggedIn }) {
const isLoggedIn = userLoggedIn;
const hasItems = items.length > 0;
return (
<div>
{isLoggedIn && hasItems && (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
)}
{isLoggedIn && !hasItems && <p>Your list is empty. Start adding items!</p>}
{!isLoggedIn && <p>Please log in to view your items.</p>}
</div>
);
}この方法では、各条件を変数として定義することで、JSX部分が簡潔になり、条件の意図をより明確に伝えることができます。
高度な条件付きレンダリング：複数のUIパターン
さらに複雑な条件が必要な場合は、関数を利用して条件ごとに異なるUIパターンを生成します。
function renderContent(items, userLoggedIn) {
if (!userLoggedIn) {
return <p>Please log in to view your items.</p>;
}
if (items.length === 0) {
return <p>Your list is empty. Start adding items!</p>;
}
if (items.length > 5) {
return <p>Too many items to display. Refine your selection!</p>;
}
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
function MultiPatternRendering({ items, userLoggedIn }) {
return <div>{renderContent(items, userLoggedIn)}</div>;
}この方法では、renderContent関数を利用して条件ごとのUIを分割して定義しているため、メインのコンポーネントが非常に簡潔になります。
状態と条件を組み合わせた応用例
ユーザーの操作や状態変化に応じて動的に条件付きレンダリングを変更する例です。
import React, { useState } from 'react';
function InteractiveRendering({ initialItems }) {
const [items, setItems] = useState(initialItems);
const [userLoggedIn, setUserLoggedIn] = useState(true);
const toggleLogin = () => setUserLoggedIn(!userLoggedIn);
const clearItems = () => setItems([]);
return (
<div>
<button onClick={toggleLogin}>
{userLoggedIn ? 'Log Out' : 'Log In'}
</button>
<button onClick={clearItems}>Clear Items</button>
{userLoggedIn ? (
items.length > 0 ? (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>Your list is empty. Add some items.</p>
)
) : (
<p>Please log in to view your list.</p>
)}
</div>
);
}
// 使用例
const initialItems = ['Item 1', 'Item 2'];
export default function App() {
return <InteractiveRendering initialItems={initialItems} />;
}この例では、状態管理を組み合わせることで、ユーザー操作に応じて動的にUIを切り替えています。
まとめ
複数条件を組み合わせることで、より多彩で直感的なUIを構築することが可能です。条件を変数や関数に分けることで、コードの可読性と再利用性も向上します。次のセクションでは、フォールバックUIを使用したより堅牢なデザインパターンについて解説します。
フォールバックUIの設定
アプリケーションのユーザー体験を向上させるためには、配列が空の場合やエラー時などに適切なフォールバックUIを表示することが重要です。フォールバックUIを設計することで、ユーザーに安心感を与え、システムの状態を正確に伝えることができます。
フォールバックUIの重要性
フォールバックUIは、以下のような場面で有用です：
- 配列が空の場合に代替メッセージを表示。
- データの読み込み中にローディングスピナーを表示。
- データ取得が失敗した場合にエラーメッセージを表示。
これにより、アプリケーションがエラーや不完全な状態でもユーザーに適切な情報を提供できます。
フォールバックUIの基本的な実装
配列が空の場合に代替メッセージを表示する簡単な例です。
function FallbackExample({ items }) {
return (
<div>
{items.length > 0 ? (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No items available. Add some items to get started.</p>
)}
</div>
);
}
// 使用例
const sampleItems = [];
export default function App() {
return <FallbackExample items={sampleItems} />;
}この例では、配列が空の場合に「No items available.」というメッセージを表示します。
ローディングUIの表示
データの取得中にローディング状態を表示する例です。
function LoadingExample({ items, isLoading }) {
return (
<div>
{isLoading ? (
<p>Loading...</p>
) : items.length > 0 ? (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No items available.</p>
)}
</div>
);
}
// 使用例
export default function App() {
return <LoadingExample items={[]} isLoading={true} />;
}ここでは、isLoadingがtrueの場合には「Loading…」を表示し、ロード完了後に配列の状態に応じてUIを切り替えます。
エラーUIの追加
データの取得が失敗した場合にエラーメッセージを表示する例です。
function ErrorExample({ items, isLoading, error }) {
if (error) {
return <p>Error: {error.message}</p>;
}
if (isLoading) {
return <p>Loading...</p>;
}
return (
<div>
{items.length > 0 ? (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No items available.</p>
)}
</div>
);
}
// 使用例
export default function App() {
return <ErrorExample items={[]} isLoading={false} error={{ message: "Failed to fetch data" }} />;
}この例では、errorが存在する場合にエラーメッセージを表示します。それ以外の場合はローディング状態やフォールバックUIを切り替えます。
状態を組み合わせたフォールバックUIの設計
実際のアプリケーションでは、エラー、ローディング、データ状態を組み合わせた複雑なフォールバックUIが必要です。
function ComplexFallbackExample({ items, isLoading, error }) {
return (
<div>
{error && <p>Error: {error.message}</p>}
{isLoading && !error && <p>Loading...</p>}
{!isLoading && !error && items.length === 0 && <p>No items available.</p>}
{!isLoading && !error && items.length > 0 && (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
)}
</div>
);
}
// 使用例
export default function App() {
return (
<ComplexFallbackExample
items={[]}
isLoading={false}
error={null}
/>
);
}この例では、isLoading、error、およびitems.lengthの状態を組み合わせて適切なUIを切り替えています。
まとめ
フォールバックUIを設計することで、アプリケーションの状態に応じて柔軟に対応でき、ユーザー体験を向上させることができます。エラー処理、ローディング表示、データなしの場合の代替表示を適切に組み合わせることで、堅牢で使いやすいUIを構築しましょう。次のセクションでは、React Hooksを活用した動的レンダリングについて解説します。
React Hooksを用いた動的レンダリングの活用
Reactでは、useStateやuseEffectといったHooksを使用することで、配列の状態を動的に操作し、リアルタイムにレンダリングを切り替えることが可能です。ここでは、React Hooksを活用した条件付きレンダリングの方法を具体例を交えて解説します。
useStateを利用した配列状態の管理
配列の状態を動的に管理するには、useStateフックを使用します。以下は、配列を更新する操作と、それに伴う動的レンダリングの例です。
import React, { useState } from 'react';
function DynamicRenderingWithState() {
const [items, setItems] = useState([]);
const addItem = () => {
const newItem = `Item ${items.length + 1}`;
setItems([...items, newItem]);
};
const clearItems = () => {
setItems([]);
};
return (
<div>
<button onClick={addItem}>Add Item</button>
<button onClick={clearItems}>Clear Items</button>
{items.length > 0 ? (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
) : (
<p>No items available.</p>
)}
</div>
);
}
export default DynamicRenderingWithState;この例では、setItemsを使用して配列を動的に更新し、それに応じてレンダリング内容をリアルタイムに切り替えています。
useEffectを利用した外部データの取得
useEffectを活用すると、外部APIからデータを取得して状態を更新し、それに基づいた条件付きレンダリングが可能になります。
import React, { useState, useEffect } from 'react';
function FetchDataExample() {
const [items, setItems] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => {
setItems(data.slice(0, 10)); // 最初の10項目を取得
setIsLoading(false);
})
.catch((err) => {
setError(err);
setIsLoading(false);
});
}, []);
if (error) {
return <p>Error: {error.message}</p>;
}
if (isLoading) {
return <p>Loading...</p>;
}
return (
<div>
{items.length > 0 ? (
<ul>
{items.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
) : (
<p>No items available.</p>
)}
</div>
);
}
export default FetchDataExample;この例では、データ取得中にはローディング表示、取得完了後にデータの内容をレンダリングします。
useStateとuseEffectを組み合わせた高度な動的レンダリング
状態と副作用を組み合わせることで、ユーザー操作や外部データの変化に柔軟に対応できます。以下は、検索ボックスとAPIデータの組み合わせ例です。
import React, { useState, useEffect } from 'react';
function SearchableList() {
const [items, setItems] = useState([]);
const [searchQuery, setSearchQuery] = useState('');
const [filteredItems, setFilteredItems] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => setItems(data.slice(0, 20)));
}, []);
useEffect(() => {
setFilteredItems(
items.filter((item) =>
item.title.toLowerCase().includes(searchQuery.toLowerCase())
)
);
}, [searchQuery, items]);
return (
<div>
<input
type="text"
placeholder="Search..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
{filteredItems.length > 0 ? (
<ul>
{filteredItems.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
) : (
<p>No matching items found.</p>
)}
</div>
);
}
export default SearchableList;この例では、検索キーワードに基づいてリストを動的にフィルタリングし、検索結果をリアルタイムにレンダリングします。
まとめ
React HooksであるuseStateやuseEffectを活用することで、状態や副作用に基づいた動的レンダリングを実現できます。これにより、ユーザー操作やデータ変化に対応した直感的で柔軟なUIを構築できます。次のセクションでは、効率的な再レンダリングのポイントについて解説します。
効率的な再レンダリングのポイント
Reactで効率的な再レンダリングを実現することは、パフォーマンスの最適化に直結します。不必要な再レンダリングを防ぐことで、アプリケーションの動作をスムーズに保つことが可能です。ここでは、効率的に再レンダリングを管理するためのポイントを具体例とともに解説します。
1. コンポーネントのメモ化
ReactのReact.memoを使用すると、コンポーネントをメモ化することができ、プロパティが変更されない場合に再レンダリングを防ぐことができます。
import React from 'react';
const ListItem = React.memo(({ item }) => {
console.log(`Rendering item: ${item}`);
return <li>{item}</li>;
});
function ItemList({ items }) {
return (
<ul>
{items.map((item, index) => (
<ListItem key={index} item={item} />
))}
</ul>
);
}
// 使用例
const items = ['Apple', 'Banana', 'Cherry'];
export default function App() {
return <ItemList items={items} />;
}この例では、ListItemがメモ化され、itemsに変更がない限り再レンダリングが発生しません。
2. `useCallback`で関数をメモ化
関数を子コンポーネントに渡す場合、useCallbackを使って関数をメモ化することで、不必要な再生成を防ぐことができます。
import React, { useState, useCallback } from 'react';
function Button({ onClick, label }) {
console.log(`Rendering button: ${label}`);
return <button onClick={onClick}>{label}</button>;
}
const MemoizedButton = React.memo(Button);
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount((prev) => prev + 1);
}, []);
return (
<div>
<p>Count: {count}</p>
<MemoizedButton onClick={increment} label="Increment" />
</div>
);
}
export default App;この例では、useCallbackでincrement関数をメモ化し、MemoizedButtonが不必要に再レンダリングされないようにしています。
3. `useMemo`で値をメモ化
計算コストの高い値を再計算しないように、useMemoを使用してメモ化します。
import React, { useState, useMemo } from 'react';
function ExpensiveCalculation({ num }) {
const result = useMemo(() => {
console.log('Calculating...');
return num ** 2;
}, [num]);
return <p>Result: {result}</p>;
}
function App() {
const [num, setNum] = useState(0);
return (
<div>
<button onClick={() => setNum((prev) => prev + 1)}>Increment</button>
<ExpensiveCalculation num={num} />
</div>
);
}
export default App;この例では、useMemoを使用して計算結果をメモ化し、numが変化したときのみ再計算が行われます。
4. 不必要な再レンダリングのデバッグ
React Developer Toolsを使用して、どのコンポーネントが再レンダリングされているのかを確認できます。特に「Highlight Updates」オプションを有効にすると、再レンダリングされた部分が視覚的に強調表示されます。
5. 親コンポーネントから渡すプロパティを最小化
子コンポーネントに渡すプロパティを最小限に抑えることで、再レンダリングのトリガーを減らすことができます。プロパティが複雑なオブジェクトや配列の場合は、メモ化を検討してください。
6. リストレンダリングの最適化
リストをレンダリングする際、keyプロパティを適切に設定することで、Reactが効率的に再レンダリングを管理できます。
function ItemList({ items }) {
return (
<ul>
{items.map((item, index) => (
<li key={item.id || index}>{item.name}</li>
))}
</ul>
);
}keyがユニークで変更されない場合、Reactは差分を効率的に計算します。
7. コンテキストの適切な使用
React.Contextを使用する際、プロバイダの値が変更されると、すべての消費者コンポーネントが再レンダリングされます。値をメモ化することでこれを防ぐことができます。
import React, { createContext, useContext, useState, useMemo } from 'react';
const CountContext = createContext();
function Provider({ children }) {
const [count, setCount] = useState(0);
const value = useMemo(() => ({ count, setCount }), [count]);
return (
<CountContext.Provider value={value}>
{children}
</CountContext.Provider>
);
}
function Counter() {
const { count, setCount } = useContext(CountContext);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
</div>
);
}
function App() {
return (
<Provider>
<Counter />
</Provider>
);
}ここでは、useMemoを使用してコンテキスト値をメモ化し、不必要な再レンダリングを防いでいます。
まとめ
効率的な再レンダリングを実現するためには、Reactのメモ化機能や状態管理のベストプラクティスを活用することが重要です。不必要な再レンダリングを防ぐことで、アプリケーションのパフォーマンスを大幅に向上させることができます。次のセクションでは、条件付きレンダリングの応用例として、Todoリストの作成方法を紹介します。
応用例：Todoリストの作成
配列の長さに応じた条件付きレンダリングの応用として、シンプルなTodoリストを構築する例を紹介します。この例では、タスクを動的に追加、削除、状態変更できるインタラクティブなUIを実現します。
Todoリストの基本構造
以下は、Todoリストアプリの基本構造です。
import React, { useState } from 'react';
function TodoApp() {
const [todos, setTodos] = useState([]);
const [task, setTask] = useState('');
const addTodo = () => {
if (task.trim() === '') return;
setTodos([...todos, { id: Date.now(), text: task, completed: false }]);
setTask('');
};
const toggleCompletion = (id) => {
setTodos(
todos.map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};
const deleteTodo = (id) => {
setTodos(todos.filter((todo) => todo.id !== id));
};
return (
<div>
<h1>Todo List</h1>
<input
type="text"
placeholder="Enter a task"
value={task}
onChange={(e) => setTask(e.target.value)}
/>
<button onClick={addTodo}>Add Task</button>
{todos.length > 0 ? (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<span
onClick={() => toggleCompletion(todo.id)}
style={{
textDecoration: todo.completed ? 'line-through' : 'none',
cursor: 'pointer',
}}
>
{todo.text}
</span>
<button onClick={() => deleteTodo(todo.id)}>Delete</button>
</li>
))}
</ul>
) : (
<p>No tasks available. Add a task to get started!</p>
)}
</div>
);
}
export default TodoApp;機能詳細
- タスクの追加
ユーザーが入力したテキストをTodoリストに追加します。タスクの追加後、入力欄をクリアします。
const addTodo = () => {
if (task.trim() === '') return;
setTodos([...todos, { id: Date.now(), text: task, completed: false }]);
setTask('');
};- タスクの削除
idをキーとして指定し、対象のタスクを削除します。
const deleteTodo = (id) => {
setTodos(todos.filter((todo) => todo.id !== id));
};- タスクの完了状態の切り替え
タスクをクリックすると完了状態がトグルされ、完了済みのタスクには取り消し線が表示されます。
const toggleCompletion = (id) => {
setTodos(
todos.map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};フォールバックUIの設定
タスクがない場合には、ユーザーに新しいタスクを追加するよう促すフォールバックメッセージを表示します。
{todos.length > 0 ? (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<span
onClick={() => toggleCompletion(todo.id)}
style={{
textDecoration: todo.completed ? 'line-through' : 'none',
cursor: 'pointer',
}}
>
{todo.text}
</span>
<button onClick={() => deleteTodo(todo.id)}>Delete</button>
</li>
))}
</ul>
) : (
<p>No tasks available. Add a task to get started!</p>
)}配列長に応じたUIの変化
Todoリストの長さが一定以上の場合、スクロール可能なリストとして表示するように設定できます。
const listStyle = {
maxHeight: '200px',
overflowY: todos.length > 5 ? 'scroll' : 'visible',
};
<ul style={listStyle}>
{todos.map((todo) => (
<li key={todo.id}>
<span>{todo.text}</span>
</li>
))}
</ul>さらに進んだ機能の追加
- タスクの編集
編集ボタンを追加して、既存のタスクを編集できるようにする。 - カテゴリー分け
タスクをカテゴリーごとに分類し、異なるビューで表示。 - タスクの保存
localStorageやAPIを使用して、タスクを永続化する。
まとめ
Todoリストは、配列の操作や条件付きレンダリングを学ぶ上で最適なプロジェクトです。タスクの追加や削除、完了状態の管理といった基本機能を通じて、配列長に応じた動的なUIの設計を体験できます。この応用例をベースにさらに複雑な機能を追加することで、Reactでのスキルを一層向上させることができます。次のセクションでは、記事全体のまとめを行います。
まとめ
本記事では、Reactを使用して配列の長さに応じた条件付きレンダリングを実現する方法について解説しました。条件付きレンダリングの基本概念から、配列操作、React Hooksの活用、パフォーマンスを意識した再レンダリングの最適化まで、幅広い内容を取り上げました。
また、Todoリストの作成という応用例を通じて、配列操作と条件付きレンダリングの実践的な使い方を学びました。これにより、配列の状態を反映した動的なUIを構築するスキルが身に付いたはずです。
条件付きレンダリングは、Reactでユーザーに直感的で効果的なインターフェースを提供するための重要な技術です。基本を押さえた上で、さらなる応用や最適化を目指してみてください。Reactの強力な機能を活用して、より優れたアプリケーションを構築することができるでしょう。
コメント