小さな学習リストを完成し、Next.jsへ進む

import { useRef, useState } from 'react';

export default function App() {
  const [items, setItems] = useState([
    { id: 1, title: 'Reactの部品を説明する', done: false },
    { id: 2, title: '四択問題で復習する', done: false },
  ]);
  const [title, setTitle] = useState('');
  const [onlyTodo, setOnlyTodo] = useState(false);
  const [error, setError] = useState('');
  const nextId = useRef(3);
  const remaining = items.filter(item => !item.done).length;
  const visible = onlyTodo ? items.filter(item => !item.done) : items;

  function addItem(event) {
    event.preventDefault();
    const value = title.trim();
    if (!value) { setError('テーマを入力してください。'); return; }
    const newItem = { id: nextId.current++, title: value, done: false };
    setItems(current => [...current, newItem]);
    setTitle('');
    setError('');
  }

  function toggleItem(id) {
    setItems(current => current.map(item =>
      item.id === id ? { ...item, done: !item.done } : item
    ));
  }

  return (
    <main>
      <h1>今日の学習リスト</h1>
      <p>この練習では、再読み込みすると最初の状態に戻ります。</p>
      <form onSubmit={addItem} noValidate>
        <label htmlFor="new-topic">追加するテーマ</label>
        <input id="new-topic" value={title}
          onChange={event => { setTitle(event.target.value); setError(''); }}
          aria-invalid={Boolean(error)}
          aria-describedby={error ? 'add-error' : undefined} />
        <button type="submit">追加する</button>
        {error && <p id="add-error" role="alert">{error}</p>}
      </form>
      <label>
        <input type="checkbox" checked={onlyTodo}
          onChange={event => setOnlyTodo(event.target.checked)} />
        未完了だけ表示
      </label>
      <p role="status">残り{remaining}件 / 全{items.length}件</p>
      <ul>
        {visible.map(item => (
          <li key={item.id}>
            <label>
              <input type="checkbox" checked={item.done}
                onChange={() => toggleItem(item.id)} />
              {item.title}（{item.done ? '完了' : '未完了'}）
            </label>
          </li>
        ))}
      </ul>
      {visible.length === 0 && <p>表示するテーマはありません。</p>}
    </main>
  );
}