リストと条件付きレンダリングで動的なデータ表示（第6回）

リストレンダリングの基本

Reactでは、JavaScriptの配列メソッド（特にmap）を活用して、リストデータをJSX要素に変換し表示します。リストレンダリングでは、各要素に一意のkey属性を付けることが重要です。keyはReactが要素を効率的に更新・再レンダリングするために使用され、パフォーマンスの向上と予期しない動作の防止に役立ちます。以下は、簡単なリストレンダリングの例です。

const items = ['りんご', 'バナナ', 'オレンジ'];    
return (    
  <ul>    
    {items.map((item, index) => (    
      <li key={index}>{item}</li>    
    ))}    
  </ul>    
);    

このコードでは、items配列をmapでループし、各要素を<li>としてレンダリングします。key属性にindexを使用することで、各要素を識別しています。

ハンズオン：タスクリストの作成

リストレンダリングの実践として、シンプルなタスクリストアプリケーションを作成します。第1回で作成したプロジェクト（my-react-app）のsrc/App.jsを以下のように編集します。

import React, { useState } from 'react';    
import './App.css';    
    
function App() {    
  const [tasks, setTasks] = useState([    
    { id: 1, text: '本を読む' },    
    { id: 2, text: 'コードを書く' },    
    { id: 3, text: '会議に出席する' },    
  ]);    
    
  return (    
    <div className="app-container">    
      <h1>タスクリスト</h1>    
      <ul>    
        {tasks.map((task) => (    
          <li key={task.id}>{task.text}</li>    
        ))}    
      </ul>    
    </div>    
  );    
}    
    
export default App;    

このコードでは、tasks状態にタスクの配列を保持し、mapメソッドで各タスクをリスト項目としてレンダリングします。各タスクに一意のidをkeyとして使用しています。src/App.cssに以下のスタイルを追加して、リストを見やすくします。

.app-container {    
  text-align: center;    
  padding: 20px;    
  font-family: Arial, sans-serif;    
}    
    
ul {    
  list-style: none;    
  padding: 0;    
}    
    
li {    
  margin: 10px 0;    
  padding: 10px;    
  background-color: #f0f0f0;    
  border-radius: 5px;    
  max-width: 300px;    
  margin-left: auto;    
  margin-right: auto;    
}    

開発サーバー（npm start）が起動している状態で保存すると、ブラウザにタスクのリストが表示されます。各タスクが個別のリスト項目として、整ったスタイルで表示されていることを確認できます。

条件付きレンダリングの実装

条件付きレンダリングは、特定の条件に基づいてUIの一部を表示または非表示にする技術です。JavaScriptの論理演算子（&&や三項演算子）を使用することで、簡単に実現できます。タスクリストに、リストが空の場合にメッセージを表示する機能を追加します。App.jsを以下のように変更します。

import React, { useState } from 'react';    
import './App.css';    
    
function App() {    
  const [tasks, setTasks] = useState([    
    { id: 1, text: '本を読む' },    
    { id: 2, text: 'コードを書く' },    
    { id: 3, text: '会議に出席する' },    
  ]);    
    
  return (    
    <div className="app-container">    
      <h1>タスクリスト</h1>    
      {tasks.length > 0 ? (    
        <ul>    
          {tasks.map((task) => (    
            <li key={task.id}>{task.text}</li>    
          ))}    
        </ul>    
      ) : (    
        <p>タスクがありません。</p>    
      )}    
    </div>    
  );    
}    
    
export default App;    

このコードでは、tasks.length > 0を条件に、リストまたは空メッセージを表示します。動作を確認するため、setTasks([])を呼び出してタスクを空にしてみます。以下のボタンを追加して、タスクをクリアする機能を試します。

import React, { useState } from 'react';    
import './App.css';    
    
function App() {    
  const [tasks, setTasks] = useState([    
    { id: 1, text: '本を読む' },    
    { id: 2, text: 'コードを書く' },    
    { id: 3, text: '会議に出席する' },    
  ]);    
    
  const clearTasks = () => {    
    setTasks([]);    
  };    
    
  return (    
    <div className="app-container">    
      <h1>タスクリスト</h1>    
      {tasks.length > 0 ? (    
        <ul>    
          {tasks.map((task) => (    
            <li key={task.id}>{task.text}</li>    
          ))}    
        </ul>    
      ) : (    
        <p>タスクがありません。</p>    
      )}    
      <button onClick={clearTasks}>タスクをクリア</button>    
    </div>    
  );    
}    
    
export default App;    

App.cssにボタンのスタイルを追加します。

button {    
  margin: 10px;    
  padding: 10px 20px;    
  font-size: 16px;    
  cursor: pointer;    
}    

ブラウザで確認すると、「タスクをクリア」ボタンをクリックするとリストが消え、「タスクがありません。」というメッセージが表示されます。この動作は、条件付きレンダリングが状態に応じて適切にUIを切り替えていることを示しています。

ハンズオン：動的なリストの拡張

リストと条件付きレンダリングの可能性を探るため、読者自身で機能を追加します。以下の課題を試してください。App.jsを編集し、新しいタスクを追加する入力フォームを実装します。以下は一例です。

import React, { useState } from 'react';    
import './App.css';    
    
function App() {    
  const [tasks, setTasks] = useState([    
    { id: 1, text: '本を読む' },    
    { id: 2, text: 'コードを書く' },    
    { id: 3, text: '会議に出席する' },    
  ]);    
  const [newTask, setNewTask] = useState('');    
    
  const addTask = () => {    
    if (newTask.trim() !== '') {    
      setTasks([...tasks, { id: tasks.length + 1, text: newTask }]);    
      setNewTask('');    
    }    
  };    
    
  return (    
    <div className="app-container">    
      <h1>タスクリスト</h1>    
      <div>    
        <input    
          type="text"    
          value={newTask}    
          onChange={(e) => setNewTask(e.target.value)}    
          placeholder="新しいタスク"    
        />    
        <button onClick={addTask}>追加</button>    
      </div>    
      {tasks.length > 0 ? (    
        <ul>    
          {tasks.map((task) => (    
            <li key={task.id}>{task.text}</li>    
          ))}    
        </ul>    
      ) : (    
        <p>タスクがありません。</p>    
      )}    
    </div>    
  );    
}    
    
export default App;    

このコードでは、newTask状態で入力値を管理し、「追加」ボタンで新しいタスクをtasksに追加します。idは簡易的にtasks.length + 1で生成しています。ブラウザで確認すると、テキストを入力して「追加」をクリックするとリストに新しいタスクが追加されます。自分でタスクの削除機能や入力検証（例：空文字の防止）を追加し、動的なリスト操作を試してください。

次のステップに向けて

本記事では、リストレンダリングと条件付きレンダリングを学び、動的なデータ表示と状態に応じたUIの切り替えを実装しました。これらの技術は、データ駆動型のUI構築に不可欠です。第7回では、useEffectフックを活用してコンポーネントの副作用を管理し、APIからデータを取得する方法を学びます。これにより、外部データを取り込んだリアルなアプリケーション開発に進みます。