最近、基本を疎かにしているせいで、コードがうまく書けないと悩み始めてきたナオさんです。

と思っていたら、そもそもReactでTodoリストを作ったことがないので今日はその体験談を語っていこうと思います。

タスクを登録したら、進行中のタスクが表示される。

タスクが登録された順番が記載される。（ID）

タスクが完了したら完了リストに入れられる。

という感じで作り始めたんですけど・・・

TypeScriptの罠に次々ハマってしまって型定義に悩みに悩みました。

配列オブジェクトの型定義に苦しむ

import React, {useState} from "react";

  //型定義する
  type Todo = {
    id: number;
    task: string;
    isDone: boolean;
  };

const App = () => {
  // タスクの状態を管理する
  const [todos, setTodos] = useState&lt;Todo&gt;[]([]);
};

最終的にはこれでなんとかなりました。

jsxフラグが指定されていないとエラーコードになってしまう。

 jsxを使用するときに、tsconfing.jsonの設定で

という指定がないと怒られるんですよね。

とにかくエラーで怒られまくる。

真っ赤なエラー画面は恐怖そのものですが、コードの方でエラーがなくてもレンダリングしすぎると怒られたりもうとにかく怒られまくっては解決を模索しました。

そしてそういう時は大抵凡ミスです。

とそんなこんなで出来上がったコードはこんな感じです。

import React, { useState } from 'react';
import './App.css';

const App = () =&gt; {
  //型定義する
  type Todo = {
    id: number;
    task: string;
    isDone: boolean;
  };

  // タスクの状態を管理する
  const [title, setTitle] = useState('');
  const [todos, setTodos] = useState&lt;Todo[]&gt;([]);

  // 新規でタスクを登録するときの関数
  const handleCreateTask = (tasks: Todo) =&gt; {
    setTodos(() =&gt; {
      return [
        ...todos,
        { id: tasks.id, task: tasks.task, isDone: tasks.isDone },
      ];
    });
  };

  // タスクを更新させる時の関数
  const handleUpdateTask = (tasks: Todo) =&gt; {
    todos[tasks.id].isDone = tasks.isDone;
    setTodos(() =&gt; {
      return [...todos];
    });
  };

  //　タスクを削除させる時の関数
  const handleDelateTask = (tasks: Todo) =&gt; {
    // 配列から削除したいIDを指定して削除
    todos.splice(tasks.id, 1);

    //新しい配列を作成してIDを上書きする。
    const setTodoArray: Todo[] = [];

    todos.map((todo, index) =&gt; {
      setTodoArray.push({
        id: index,
        task: todo.task,
        isDone: todo.isDone,
      });
    });

    setTodos(() =&gt; {
      return [...setTodoArray];
    });
  };

  return (
    &lt;div className="todo"&gt;
      &lt;h1&gt;TodoApp&lt;/h1&gt;
      {/* タスクがない時の処理 */}
      {todos.length === 0 && &lt;p&gt;登録済みのタスクはないと思うのだ！&lt;/p&gt;}

      {/* タスクがある時の処理 */}
      {todos.length &gt; 0 && (
        &lt;div&gt;
          &lt;p&gt;未達成のタスクなのだ&lt;/p&gt;
          {todos.map((todo, index) =&gt; {
            if (todo.isDone === false) {
              return (
                &lt;div key={index} className="task"&gt;
                  &lt;p&gt;タスクID：{todo.id}&lt;/p&gt;
                  &lt;p&gt;タスク名：{todo.task}&lt;/p&gt;
                  &lt;input
                    type="button"
                    onClick={(e) =&gt;
                      handleUpdateTask({
                        id: todo.id,
                        task: todo.task,
                        isDone: true,
                      })
                    }
                    value="完了したいのだ"
                  /&gt;
                  &lt;input
                    type="button"
                    onClick={(e) =&gt;
                      handleDelateTask({
                        id: todo.id,
                        task: todo.task,
                        isDone: false,
                      })
                    }
                    value="削除したいのだ"
                  /&gt;
                &lt;/div&gt;
              );
            }
          })}
          &lt;p&gt;完了させたタスクは下に入れとくのだ&lt;/p&gt;
          {todos.map((todo, index) =&gt; {
            if (todo.isDone === true) {
              return (
                &lt;div key={index} className="task"&gt;
                  &lt;p&gt;タスクID：{todo.id}&lt;/p&gt;
                  &lt;p&gt;タスク名：{todo.task}&lt;/p&gt;
                  &lt;input
                    type="button"
                    onClick={(e) =&gt;
                      handleUpdateTask({
                        id: todo.id,
                        task: todo.task,
                        isDone: false,
                      })
                    }
                    value="やっぱり進行中のタスクに戻しておきたいのだ"
                  /&gt;
                  &lt;input
                    type="button"
                    onClick={(e) =&gt;
                      handleDelateTask({
                        id: todo.id,
                        task: todo.task,
                        isDone: false,
                      })
                    }
                    value="削除したいのだ"
                  /&gt;
                &lt;/div&gt;
              );
            }
          })}
        &lt;/div&gt;
      )}

      {/* タスクを追加する */}
      &lt;div&gt;
        &lt;p&gt;タスクを追加したいのだ&lt;/p&gt;
        &lt;input
          type="text"
          name="task"
          className="mr"
          onChange={(e) =&gt; setTitle(e.target.value)}
          value={title}
        /&gt;
        &lt;button
          type="button"
          onClick={() =&gt;
            handleCreateTask({
              id: todos.length,
              task: title,
              isDone: false,
            })
          }
        &gt;
          タスクを登録する
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default App;

多分初心者が書くコードなので、修正点色々あるでしょう。

またスキルを磨いた時に挑戦してみたいです。

Reactでtodoリストが作ったことがなかったので基礎勉強を固めるために作ってみることにしたのだ

TodoリストをReactで0から作ってみてみたのだ。

 YoutubeのURLから自動的に文字起こしして議事録をいい感じにしたかったです。

でYoutubeの文字起こしを実装してみた。(訂正）

初心者でも簡単に作れそうなタイピングゲームを作ってみました。

JSで作る簡単なタイピングゲーム

 CSS装飾用HTMLのサンプルリストです。

それっぽいことを書いてるただのHTMLテスト

そろそろ名刺を作っても良い頃合いかなと思いました。

VSCodeからNotionを操作できたらいいなと思っていたので早速作成して見ました！

VSCodeでNotionを操作できる拡張機能公開しました！

NotionをCMSにしてNext.jsとTypeScriptでテックブログを作成してみた。

 NotionをCMSにしてNext.jsとTSでブログを作成した。

フロントエンド開発で注目を集めているUIライブラリ「Storybook」の記事をまとめていきます。

無料のライブラリ「StoryBook」が万能すぎる件について

TodoリストをReactで0から作ってみてみたのだ。

この記事を書いた人

ナオ

この記事の目次