小さなTODOアプリ

導入

ここまでの useState・map・イベント・条件表示を組み合わせると、もう小さなアプリが作れます。入力を追加していく TODO リストを作ってみましょう。

説明

入力欄・追加ボタン・一覧を組み合わせています。

function App() {
  const [items, setItems] = React.useState(["牛乳を買う", "React を学ぶ"]);
  const [text, setText] = React.useState("");

  function add() {
    if (text.trim() === "") return;
    setItems([...items, text]);
    setText("");
  }

  return (
    <div style={{ fontFamily: "system-ui", maxWidth: 320 }}>
      <h2>やることリスト</h2>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="やることを入力" />
      <button onClick={add}>追加</button>
      <ul>
        {items.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
      <p>残り {items.length} 件</p>
    </div>
  );
}

• setItems([...items, text]) … 元の配列をコピーして末尾に追加した新しい配列を渡します（元の配列を直接 push しないのがReact流）。
• 追加後に setText("") で入力欄を空に戻しています。
• items.length で件数を表示。state が変わるたびに全部が最新の表示に更新されます。

やってみよう

各項目の横に「削除」ボタンを付けてみましょう（ヒント: setItems(items.filter((_, idx) => idx !== i))）。