[React][L5] リストの項目をボタンで削除・出力する

Last updated at 2025-01-06Posted at 2025-01-06

実施条件

[React][L4] リストの項目をボタンで削除するを理解していること

環境

MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

ソースコードの前に

フォルダ構成

folda_structure

├── package.json
├── public/
│   └── index.html
├── src/
│   ├── index.jsx
│   ├── Todo.jsx
│   └── styles.css
│

index.html

<!DOCTYPE html>
<html lang="en">
  <head> </head>

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

index.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import { Todo } from "./Todo";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Todo />
  </StrictMode>
);

ソースコード

Todo.jsx(旧)

Todo.jsx

import { useState } from "react";
import "./styles.css";

export const Todo = () => {
  const [todoText, setTodoText] = useState("");
  const [incompleteTodos, setIncompleteTodos] = useState([
    "TODOです1",
    "TODOです2",
  ]);
  const [completeTodos, setCompleteTodos] = useState([
    "TODOでした1",
    "TODOでした2",
  ]);

  const onChangeTodoText = (event) => setTodoText(event.target.value);

  const onClickAdd = () => {
    if (todoText === "") {
      return;
    } else {
      const newTodos = [...incompleteTodos, todoText];
      setIncompleteTodos(newTodos);
      setTodoText("");
    }
  };
   const onClickDelete = (index) => {
    const newTodos = [...incompleteTodos];
    newTodos.splice(index, 1);
    setIncompleteTodos(newTodos);
  };

  return (
    <>
      <div className="input-area">
        <input
          placeholder="TODOを入力"
          value={todoText}
          onChange={onChangeTodoText}
        ></input>
        <button onClick={onClickAdd}>追加</button>
      </div>
      <div className="incomplete-area">
        <p className="title">未完了のTODO</p>
        <ul>     
          {incompleteTodos.map((todo, index) => {
            return (
              <li key={todo}>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>完了</button>
                  <button onClick={() => onClickDelete(index)}>削除</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="complete-area">
        <p className="title">完了のTODO</p>
        <ul>
          {completeTodos.map((todo) => {
            return (
              <li>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>戻す</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
};

Todo.jsx

import { useState } from "react";
import "./styles.css";

export const Todo = () => {
  const [todoText, setTodoText] = useState("");
  const [incompleteTodos, setIncompleteTodos] = useState([
    "TODOです1",
    "TODOです2",
  ]);
  const [completeTodos, setCompleteTodos] = useState([
    "TODOでした1",
    "TODOでした2",
  ]);

  const onChangeTodoText = (event) => setTodoText(event.target.value);

  const onClickAdd = () => {
    if (todoText === "") {
      return;
    } else {
      const newTodos = [...incompleteTodos, todoText];
      setIncompleteTodos(newTodos);
      setTodoText("");
    }
  };
   const onClickDelete = (index) => {
    const newTodos = [...incompleteTodos];
    newTodos.splice(index, 1);
    setIncompleteTodos(newTodos);
  };

+ const onClickComplete = () => {
+   const newIncompleteTodos = [...incompleteTodos];
+   newIncompleteTodos.splice(index, 1);
+
+   const newCompleteTodos = [...completeTodos, incompleteTodos[index]];
+
+   setIncompleteTodos(newIncompleteTodos);
+   setCompleteTodos(newCompleteTodos);
+ };

  return (
    <>
      <div className="input-area">
        <input
          placeholder="TODOを入力"
          value={todoText}
          onChange={onChangeTodoText}
        ></input>
        <button onClick={onClickAdd}>追加</button>
      </div>
      <div className="incomplete-area">
        <p className="title">未完了のTODO</p>
        <ul>    
          {incompleteTodos.map((todo, index) => {
            return (
              <li key={todo}>
                <div className="list-row">
                  <p>{todo}</p>
-                 <button>完了</button>
+                 <button onClick={() => onClickComplete(index)}>完了</button>
                  <button onClick={() => onClickDelete(index)}>削除</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="complete-area">
        <p className="title">完了のTODO</p>
        <ul>
          {completeTodos.map((todo) => {
            return (
              <li>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>戻す</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
};

解説

目的

buttonタグ(完了)を押下した時に、配列incompleteTodosの任意の要素を削除する
buttonタグ(完了)を押下した時に、配列completeTodosの任意の要素を追加する

コーディング

buttonタグ(完了)を押下した際に発火する、onClickイベントを設定する

Todo.jsx

-                 <button>完了</button>
+                 <button onClick={() => onClickComplete(index)}>完了</button>

onClickイベントで呼び出される関数をonClickCompleteとして設定する
Todo.jsx
```
+  const onClickComplete = () => {
+ };
```
配列incompleteTodosの任意の項目を指定するには、配列incompleteTodos内の何番目の配列かを見分けられれば良い
=配列のindexを取得する
Todo.jsx
```
-         {incompleteTodos.map((todo) => {        
+         {incompleteTodos.map((todo, index) => {
```
onClickCompleteにindexを関数の引数として設定する
Todo.jsx
```
+  const onClickComplete = (index) => {
+ };
```
onCkickにindexを関数の引数として設定する
なぜ、onClick={onClickComplete(index)と記載せずに、onClick={() => onClickComplete(index)と記載するかはこちらを参照
Todo.jsx
```
-                 <button>完了</button>
+                 <button onClick={() => onClickComplete(index))}>完了</button>
```
最新の未完了の配列incompleteTodosをnewIncompleteTodosとして定義する（コピーする）
Todo.jsx
```
  const onClickComplete = () => {
+   const newIncompleteTodos = [...incompleteTodos];
```

spliceメソッドを使って、渡ってきた第一引数indexから第二引数1番目を削除する

Todo.jsx

  const onClickComplete = () => {
    const newIncompleteTodos = [...incompleteTodos];
+   newIncompleteTodos.splice(index, 1);

最新の完了の配列completeTodosをnewCompleteTodosとして定義する（コピーする）

Todo.jsx

  const onClickComplete = () => {
    const newIncompleteTodos = [...incompleteTodos];
    newIncompleteTodos.splice(index, 1);
 
+   const newCompleteTodos = [...completeTodos];

配列newCompleteTodosにincompleteTodos内の任意の(index)の要素を追加する

Todo.jsx

  const onClickComplete = () => {
    const newIncompleteTodos = [...incompleteTodos];
    newIncompleteTodos.splice(index, 1);
 
+   const newCompleteTodos = [...completeTodos, incompleteTodos[index]];

配列newIncompleteTodosを、配列incompleteTodosの更新関数であるsetIncompleteTodosに引数として渡す
=配列incompleteTodosを更新する

Todo.jsx

  const onClickComplete = () => {
    const newIncompleteTodos = [...incompleteTodos];
    newIncompleteTodos.splice(index, 1);
 
    const newCompleteTodos = [...completeTodos, incompleteTodos[index]];
 
+   setIncompleteTodos(newIncompleteTodos);

配列newIncompleteTodosを、配列completeTodosの更新関数であるsetCompleteTodosに引数として渡す
=配列completeTodosを更新する

Todo.jsx

  const onClickComplete = () => {
    const newIncompleteTodos = [...incompleteTodos];
    newIncompleteTodos.splice(index, 1);
 
    const newCompleteTodos = [...completeTodos, incompleteTodos[index]];
 
    setIncompleteTodos(newIncompleteTodos);
+   setCompleteTodos(newCompleteTodos);
  };

処理

incompleteTodosに登録されている未完了のTODOがリストとして表示されている
ユーザーが完了ボタンを押下する
onClickイベントが発火する
{incompleteTodos.map((todo, index) => {...}}によってindexが各li要素に渡されているので、該当の要素がわかる
() => onClickComplete(index)が実行される
該当のindexがonClickCompleteに渡る
最新の配列incompleteTodosをnewIncompleteTodosに渡す（コピーする）
spliceメソッドを使って、newIncompleteTodosの第一引数indexから第二引数1番目を削除する
最新の配列completeTodosをnewCompleteTodosに渡し（コピーし）、該当のindexを配列incompleteTodos内の要素を追加する
newIncompleteTodosを更新関数setIncompleteTodosに渡す
incompleteTodosが更新される
Reactの再レンダリングがトリガーされる
newCompleteTodosを更新関数setCompleteTodosに渡す
completeTodosが更新される
Reactの再レンダリングがトリガーされる
buttonタグ(完了)を押下した時に、配列incompleteTodosの任意の要素が削除・出力される

[React][L5] リストの項目をボタンで削除・出力する

実施条件

環境

ソースコードの前に

フォルダ構成

index.html

index.jsx

ソースコード

Todo.jsx(旧)

Todo.jsx

解説

目的

コーディング

処理

イメージ

Todo.jsx(旧)

Todo.jsx

参考リンク