Next.js-TypeScriptでTODOリスト(登録/更新/削除)作成

2021年12月29日

デモ

https://next-ts-memo.vercel.app/changeable

Next.js-TypeScriptでTODOリスト(登録/削除)作成　に更新機能、削除機能を加えたものです。

コード

import type { NextPage } from "next";
import Head from "next/head";
import { useState } from "react";

import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  /** TODOリスト */
  const [todos, setTodos] = useState<string[]>([]);
  /** AddのTODO内容 */
  const [tmpTodo, setTmpTodo] = useState("");
  /** 変更中のTODOインデックス */
  const [changeIndex, setChangeIndex] = useState<number>();

  const addTodo = () => {
    if (tmpTodo === "") {
      alert("文字を入力してください");
      return;
    }
    setTodos([...todos, tmpTodo]);
    setTmpTodo("");
  };

  const enableChange = (index: number) => {
    setChangeIndex(index);
  };

  const changeTodo = (index: number, value: string) => {
    const newTodos = [...todos];
    newTodos[index] = value;
    setTodos(newTodos);
  };

  const deleteTodo = (index: number) => {
    const newTodos = todos.filter((todo, todoIndex) => {
      return index !== todoIndex;
    });
    setTodos(newTodos);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>TODOリスト Next.js-TypeScript</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>TODOリスト</h1>
        <div className="form">
          <input
            type="text"
            name="todo"
            onChange={(e) => setTmpTodo(e.target.value)}
            value={tmpTodo}
          />
          <button onClick={addTodo}>Add</button>
        </div>
        <table>
          <tr>
            <td>TODO</td>
            <td>操作</td>
          </tr>
          {todos.map((todo, index: number) => {
            return (
              <tr key={index}>
                <td>
                  <input
                    type="text"
                    value={todo}
                    disabled={changeIndex !== index}
                    onChange={(e) => changeTodo(index, e.target.value)}
                  ></input>
                </td>
                <td>
                  <button onClick={() => enableChange(index)}>編集</button>
                  <button onClick={() => deleteTodo(index)}>削除</button>
                </td>
              </tr>
            );
          })}
        </table>
      </main>

      <footer className={styles.footer}></footer>
    </div>
  );
};

export default Home;

つまづいた箇所

usestateで配列の中身を変更するには？

最も苦戦したのは、29行目の書き方を見い出すまででした。

// 正解
const changeTodo = (index: number, value: string) => {
    const newTodos = [...todos];
    newTodos[index] = value;
    setTodos(newTodos);
  };

// 失敗例1
const changeTodo = (index: number, value: string) => {
    todos[index] = value;
    setTodos(todos);
  };

// 正解
const changeTodo = (index: number, value: string) => {
    const newTodos = todos;
    newTodos[index] = value;
    setTodos(newTodos);
  };

失敗例1のように、既存のtodosの値を直接変更しようとしていたのですが、これだと、値が変わってくれない＋他の行の編集ボタン押した時に1文字だけ変わるというバグ状態になってしまいました。

Vue.jsをやっていたので、おそらく配列のいじり方が悪いんだろな〜と検討はついたので、deleteTodoを見たらnewTodoに入れ替えていたので、それをやってみたのが失敗例2。

それでも同じ現象から抜け出せず、「useState array change」で検索して海外サイトを見つけてなんとか正解のコードに辿り着いたのでした。