問題一覧に戻る
中級高度なパターン
問題60: リストの高度な操作

フィルタリングやソート機能を含むリストの高度な操作を学びます。配列のメソッドを活用して、動的にリストを変更します。filterメソッドで条件に一致する要素のみを抽出し、ユーザーの選択に応じた表示を実現します。このパターンはTodoアプリ、商品一覧、検索結果など、多くのアプリケーションで使用されます。元の配列を変更せず新しい配列を作成するイミュータブルな操作が重要です。

import React, { useState } from 'react';

function TodoList() {
  const [todos] = useState([
    { id: 1, text: "買い物", done: false },
    { id: 2, text: "掃除", done: true },
    { id: 3, text: "勉強", done: false }
  ]);
  const [filter, setFilter] = useState("all");

  {/* フィルターロジック */}
  const filtered = todos.((todo) => 
    filter === "all" || (filter === "active" ? !todo.done : todo.done)
  );

  return (
    <div>
      {/* フィルターボタン */}
      <button onClick={() => ("all")}>全て</button>
      <button onClick={() => setFilter("active")}>未完了</button>
      {filtered.map(todo => <p key={todo.id}>{todo.text}</p>)}
    </div>
  );
}

export default TodoList;
···