npm create vite@latest todo -- --template react --no-interactive
cd todo
npm install
npm run dev

{
  "name": "todo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "oxlint",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.3.1",
    "react-dom": "^19.3.1"
  },
  "devDependencies": {
    "@types/react": "^19.3.0",
    "@types/react-dom": "^19.3.0",
    "@vitejs/plugin-react": "^6.1.2",
    "oxlint": "^1.90.0",
    "vite": "^8.3.6"
  }
}

  VITE v8.3.6  ready in 145 ms

  ➜  Local:   http://localhost:5173/

src/
├── App.css
├── App.jsx
├── assets/
├── index.css
└── main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <li className={todo.done ? 'done' : ''}>
      <label>
        <input
          type="checkbox"
          checked={todo.done}
          onChange={() => onToggle(todo.id)}
        />
        {todo.title}
      </label>
      <button onClick={() => onDelete(todo.id)}>削除</button>
    </li>
  )
}

export default TodoItem

import { useState } from 'react'
import TodoForm from './TodoForm.jsx'
import TodoItem from './TodoItem.jsx'
import './App.css'

const initialTodos = [
  { id: 1, title: 'Reactの公式チュートリアルを読む', done: true },
  { id: 2, title: 'ToDoアプリを作る', done: false },
]

function App() {
  const [todos, setTodos] = useState(initialTodos)

  function addTodo(title) {
    setTodos([...todos, { id: Date.now(), title, done: false }])
  }

  function toggleTodo(id) {
    setTodos(
      todos.map((todo) => (todo.id === id ? { ...todo, done: !todo.done } : todo)),
    )
  }

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

  const remaining = todos.filter((todo) => !todo.done).length

  return (
    <main>
      <h1>ToDoリスト</h1>
      <TodoForm onAdd={addTodo} />
      {todos.length === 0 ? (
        <p>やることはありません</p>
      ) : (
        <ul>
          {todos.map((todo) => (
            <TodoItem
              key={todo.id}
              todo={todo}
              onToggle={toggleTodo}
              onDelete={deleteTodo}
            />
          ))}
        </ul>
      )}
      <p>残り {remaining} 件</p>
    </main>
  )
}

export default App

Each child in a list should have a unique "key" prop.

Check the render method of `App`.

import { useState } from 'react'

function TodoForm({ onAdd }) {
  const [title, setTitle] = useState('')

  function handleSubmit(e) {
    e.preventDefault()
    if (title.trim() === '') return
    onAdd(title.trim())
    setTitle('')
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="やることを入力"
        aria-label="やること"
      />
      <button type="submit">追加</button>
    </form>
  )
}

export default TodoForm

main {
  max-width: 480px;
  margin: 40px auto;
  font-family: sans-serif;
}

form {
  display: flex;
  gap: 8px;
}

form input {
  flex: 1;
  padding: 8px;
  font-size: 16px;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}

li.done label {
  color: #999;
  text-decoration: line-through;
}

button {
  padding: 6px 12px;
  font-size: 14px;
}

npm install -D vitest jsdom @testing-library/react @testing-library/user-event @testing-library/jest-dom

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: './src/setupTests.js',
  },
})

import '@testing-library/jest-dom/vitest'
import { cleanup } from '@testing-library/react'
import { afterEach } from 'vitest'

// テストごとに描画したものを片付ける
afterEach(() => {
  cleanup()
})

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, expect, test } from 'vitest'
import App from './App.jsx'

describe('ToDoリスト', () => {
  test('最初は2件あり、残りは1件', () => {
    render(<App />)
    expect(screen.getAllByRole('listitem')).toHaveLength(2)
    expect(screen.getByText('残り 1 件')).toBeInTheDocument()
  })

  test('入力して追加すると、一覧に増えて入力欄が空になる', async () => {
    const user = userEvent.setup()
    render(<App />)
    await user.type(screen.getByRole('textbox', { name: 'やること' }), '牛乳を買う')
    await user.click(screen.getByRole('button', { name: '追加' }))
    expect(screen.getByText('牛乳を買う')).toBeInTheDocument()
    expect(screen.getAllByRole('listitem')).toHaveLength(3)
    expect(screen.getByRole('textbox', { name: 'やること' })).toHaveValue('')
    expect(screen.getByText('残り 2 件')).toBeInTheDocument()
  })

  test('空白だけでは追加されない', async () => {
    const user = userEvent.setup()
    render(<App />)
    await user.type(screen.getByRole('textbox', { name: 'やること' }), '   ')
    await user.click(screen.getByRole('button', { name: '追加' }))
    expect(screen.getAllByRole('listitem')).toHaveLength(2)
  })

  test('チェックを入れると残りの件数が減る', async () => {
    const user = userEvent.setup()
    render(<App />)
    await user.click(screen.getByRole('checkbox', { name: 'ToDoアプリを作る' }))
    expect(screen.getByRole('checkbox', { name: 'ToDoアプリを作る' })).toBeChecked()
    expect(screen.getByText('残り 0 件')).toBeInTheDocument()
  })

  test('全部削除すると「やることはありません」が出る', async () => {
    const user = userEvent.setup()
    render(<App />)
    for (const button of screen.getAllByRole('button', { name: '削除' })) {
      await user.click(button)
    }
    expect(screen.queryAllByRole('listitem')).toHaveLength(0)
    expect(screen.getByText('やることはありません')).toBeInTheDocument()
  })
})

npx vitest run --reporter=verbose

 RUN  v5.1.0 /work/todo

 ✓ src/App.test.jsx > ToDoリスト > 最初は2件あり、残りは1件 39ms
 ✓ src/App.test.jsx > ToDoリスト > 入力して追加すると、一覧に増えて入力欄が空になる 52ms
 ✓ src/App.test.jsx > ToDoリスト > 空白だけでは追加されない 32ms
 ✓ src/App.test.jsx > ToDoリスト > チェックを入れると残りの件数が減る 15ms
 ✓ src/App.test.jsx > ToDoリスト > 全部削除すると「やることはありません」が出る 26ms

 Test Files  1 passed (1)
      Tests  5 passed (5)

 ❯ src/App.test.jsx (5 tests | 1 failed) 163ms
   ❯ ToDoリスト (5)
     ✓ 最初は2件あり、残りは1件 41ms
     × 入力して追加すると、一覧に増えて入力欄が空になる 56ms
     ✓ 空白だけでは追加されない 30ms
     ✓ チェックを入れると残りの件数が減る 13ms
     ✓ 全部削除すると「やることはありません」が出る 22ms

 FAIL  src/App.test.jsx > ToDoリスト > 入力して追加すると、一覧に増えて入力欄が空になる
Error: expect(element).toHaveValue()

Expected the element to have value:

Received:
  牛乳を買う

npm run build

dist/index.html                   0.45 kB │ gzip:  0.29 kB
dist/assets/index-CQZC4i8B.css    0.37 kB │ gzip:  0.26 kB
dist/assets/index-B1FyU_Z1.js   220.79 kB │ gzip: 69.25 kB

✓ built in 91ms

  <body>
    <div id="root"></div>
  </body>