1. 動的にリストを操作するとは

動的にリストを操作するとは、画面を読み直さなくても、データの追加や削除に合わせて表示が変わることを指します。

現実の例で言うと、紙のメモに書いた買い物リストを、鉛筆で書き足したり消したりするようなものです。

Reactでは、この仕組みを「状態」という考え方で実現します。状態とは、今の画面の元になる情報のことです。

2. useStateでリストを管理する基本

Reactでデータを変化させるときは、useStateという仕組みを使います。 useStateは「今の値」と「変更するための道具」をセットで持ちます。


import React, { useState } from "react";

function App() {
  const [items, setItems] = useState(["りんご", "みかん"]);

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

（画面に「りんご」「みかん」が表示されます）

このitemsがリストの元になります。この中身を変えると、画面の表示も一緒に変わります。

3. リストに項目を追加する方法

次は、ボタンを押したらリストに項目を追加する方法です。新しいデータを、今の配列に足してあげます。


import React, { useState } from "react";

function App() {
  const [items, setItems] = useState(["りんご", "みかん"]);

  const addItem = () => {
    setItems([...items, "バナナ"]);
  };

  return (
    <div>
      <button onClick={addItem}>追加する</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（ボタンを押すと「バナナ」がリストに追加されます）

「...」は、今あるデータをそのままコピーするための書き方です。元のリストを壊さずに、新しいリストを作るために使います。

4. リストから項目を削除する方法

次に、リストから特定の項目を削除してみましょう。 filterという仕組みを使うと、残したいものだけを選べます。


import React, { useState } from "react";

function App() {
  const [items, setItems] = useState(["りんご", "みかん", "バナナ"]);

  const deleteItem = (target) => {
    setItems(items.filter(item => item !== target));
  };

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          {item}
          <button onClick={() => deleteItem(item)}>削除</button>
        </li>
      ))}
    </ul>
  );
}

export default App;

（削除ボタンを押すと、その項目が消えます）

filterは「条件に合うものだけを残す」仕組みです。消したいもの以外を集め直すことで、結果的に削除できます。