ReactでTodoアプリを作る #3 フィルタリング

const [filter, setFilter] = useState('all');  // 'all' | 'active' | 'completed'

const filteredTodos = todos.filter(todo => {
  if (filter === 'active') return !todo.completed;
  if (filter === 'completed') return todo.completed;
  return true;
});

const FILTERS = [
  { value: 'all', label: '全体' },
  { value: 'active', label: '未完了' },
  { value: 'completed', label: '完了' },
];

function TodoFilter({ filter, onChange }) {
  return (
    <div style={{ display: 'flex', gap: '4px', marginBottom: '12px' }}>
      {FILTERS.map(item => (
        <button
          key={item.value}
          onClick={() => onChange(item.value)}
          style={{
            padding: '4px 12px',
            border: '1px solid #ccc',
            background: filter === item.value ? '#333' : '#fff',
            color: filter === item.value ? '#fff' : '#333',
            cursor: 'pointer',
          }}
        >
          {item.label}
        </button>
      ))}
    </div>
  );
}

export default TodoFilter;

function TodoStats({ todos, onClearCompleted }) {
  const total = todos.length;
  const remaining = todos.filter(todo => !todo.completed).length;
  const completed = total - remaining;

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '8px 0',
      fontSize: '14px',
      color: '#555',
      borderBottom: '1px solid #eee',
    }}>
      <span>全体 {total} · 残り {remaining} · 完了 {completed}</span>
      {completed > 0 && (
        <button onClick={onClearCompleted} style={{ fontSize: '12px' }}>
          完了項目をすべて削除
        </button>
      )}
    </div>
  );
}

export default TodoStats;

import { useState } from 'react';
import TodoForm from './TodoForm';
import TodoFilter from './TodoFilter';
import TodoStats from './TodoStats';
import TodoList from './TodoList';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [filter, setFilter] = useState('all');

  function addTodo(text) {
    const newTodo = {
      id: crypto.randomUUID(),
      text,
      completed: false,
    };
    setTodos(prev => [newTodo, ...prev]);
  }

  function deleteTodo(id) {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  }

  function toggleTodo(id) {
    setTodos(prev => prev.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  }

  function clearCompleted() {
    setTodos(prev => prev.filter(todo => !todo.completed));
  }

  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed;
    if (filter === 'completed') return todo.completed;
    return true;
  });

  return (
    <div style={{ maxWidth: '500px', margin: '0 auto', padding: '24px' }}>
      <h1>Todo</h1>
      <TodoForm onAdd={addTodo} />
      <TodoFilter filter={filter} onChange={setFilter} />
      <TodoStats todos={todos} onClearCompleted={clearCompleted} />
      <TodoList
        todos={filteredTodos}
        filter={filter}
        totalCount={todos.length}
        onToggle={toggleTodo}
        onDelete={deleteTodo}
      />
    </div>
  );
}

export default TodoApp;

import TodoItem from './TodoItem';

const FILTER_LABEL = {
  all: 'タスク',
  active: '未完了の項目',
  completed: '完了した項目',
};

function TodoList({ todos, filter, totalCount, onToggle, onDelete }) {
  if (todos.length === 0) {
    if (totalCount === 0) {
      return <p style={{ color: '#888' }}>タスクがありません。新しく追加してみてください。</p>;
    }
    return <p style={{ color: '#888' }}>{FILTER_LABEL[filter]}がありません。</p>;
  }

  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onToggle={onToggle}
          onDelete={onDelete}
        />
      ))}
    </ul>
  );
}

export default TodoList;