クエスト10：Todo アプリを作ろう！

今回の課題

テキスト入力で Todo を追加・完了チェック・削除できる Todo アプリを完成させよう！

📖 解説を見る

🏆 React 総合問題

useState・イベント・リストレンダリング・条件レンダリングを組み合わせて Todo アプリを完成させよう！

ヒントを見る

addTodo: setTodos([...todos, {id: Date.now(), text: input, done: false}]) / toggleTodo: setTodos(todos.map(...)) / deleteTodo: setTodos(todos.filter(...))

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>li { margin: 8px 0; }</style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
const { useState } = React;

function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'React を学ぶ', done: false },
  ]);
  const [input, setInput] = useState('');

function addTodo() {
    if (!input.trim()) return;
    // ここに追加処理を書こう
    setInput('');
  }

function toggleTodo(id) {
    // ここに完了トグル処理を書こう
  }

function deleteTodo(id) {
    // ここに削除処理を書こう
  }

return (
    <div>
      <h2>Todo リスト</h2>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="やること"
      />
      <button onClick={addTodo}>追加</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => toggleTodo(todo.id)}
            />
            <span style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TodoApp />);
  </script>
</body>
</html>

あなたの出力

クエスト10：Todo アプリを作ろう！

クエスト10：Todo アプリを作ろう！

れんしゅうもんだい