この記事では、React、Typescript、そしてNext.jsを使用して、Todoアプリを作成する方法について解説します。

はじめに

Todoアプリは、日々のタスクを管理するために便利なツールです。この記事では、Next.jsを使用してTodoアプリを作成する手順を紹介します。

プロジェクトのセットアップ

まずは、プロジェクトをセットアップしましょう。以下のコマンドを実行して、新しいNext.jsプロジェクトを作成します。

npx create-next-app todo-app

次に、必要なパッケージをインストールします。

cd todo-app
npm install react react-dom next typescript

TodoアプリのUIコンポーネントを作成する

TodoアプリのUIコンポーネントを作成する前に、必要なファイルを作成しましょう。

components
- TodoItem.tsx
- TodoList.tsx
- TodoForm.tsx
pages
- index.tsx

TodoItemは、Todoアイテムを表示するためのコンポーネントです。TodoListは、Todoアイテムのリストを表示するためのコンポーネントです。TodoFormは、新しいTodoアイテムを追加するためのフォームを表示するためのコンポーネントです。indexは、アプリのホームページとして機能します。

まずは、TodoItemコンポーネントを作成しましょう。

import React from "react";

type TodoItemProps = {
  id: string;
  text: string;
  completed: boolean;
  onComplete: (id: string) => void;
  onDelete: (id: string) => void;
};

export const TodoItem: React.FC<TodoItemProps> = ({
  id,
  text,
  completed,
  onComplete,
  onDelete,
}) => {
  const handleComplete = () => {
    onComplete(id);
  };

  const handleDelete = () => {
    onDelete(id);
  };

  return (
    <div>
      <input type="checkbox" checked={completed} onChange={handleComplete} />
      <span>{text}</span>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
};

TodoItemコンポーネントは、Todoアイテムを表示するために必要な要素を描画します。onCompleteプロパティとonDeleteプロパティを使用して、完了したTodoアイテムをマークすることや、Todoアイテムを削除することができます。

次に、TodoListコンポーネントを作成しましょう。

import React from "react";
import { TodoItem } from "./TodoItem";

type TodoListProps = {
    items: {
        id: string;
        text: string;
        completed: boolean;
    }[];
    onComplete: (id: string) => void;
    onDelete: (id: string) => void;
};

export const TodoList: React.FC<TodoListProps> = ({
    items,
    onComplete,
    onDelete,
}) => {
    return (
        <div>
            {items.map((item) => (
                <TodoItem
                    key={item.id}
                    id={item.id}
                    text={item.text}
                    completed={item.completed}
                    onComplete={onComplete}
                    onDelete={onDelete}
                />
            ))}
        </div>
    );
};

TodoListコンポーネントは、Todoアイテムのリストを表示するために必要な要素を描画します。itemsプロパティを使用して、表示するTodoアイテムのリストを受け取ります。onCompleteプロパティとonDeleteプロパティを使用して、完了したTodoアイテムをマークすることや、Todoアイテムを削除することができます。

最後に、TodoFormコンポーネントを作成しましょう。

import React, { useState } from "react";

type TodoFormProps = {
  onSubmit: (text: string) => void;
};

export const TodoForm: React.FC<TodoFormProps> = ({ onSubmit }) => {
  const [text, setText] = useState("");

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSubmit(text);
    setText("");
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={handleChange} />
      <button type="submit">Add</button>
    </form>
  );
};

TodoFormコンポーネントは、新しいTodoアイテムを追加するために必要なフォームを描画します。onSubmitプロパティを使用して、新しいTodoアイテムを追加することができます。

データの管理

Todoアプリで管理するデータは、以下のような形式で表現されます。

type TodoItem = {
  id: string;
  text: string;
  completed: boolean;
};

type TodoList = TodoItem[];

このデータを管理するために、useStateフックを使用しましょう。

import React, { useState } from "react";
import { TodoList } from "../components/TodoList";
import { TodoForm } from "../components/TodoForm";

type HomeProps = {};

type TodoItem = {
  id: string;
  text: string;
  completed: boolean;
};

type TodoList = TodoItem[];

const Home: React.FC<HomeProps> = () => {
  const [todos, setTodos] = useState<TodoList>([]);

  const handleAddTodo = (text: string) => {
    const newTodo: TodoItem = {
      id: Math.random().toString(36).substring(7),
      text: text,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

  const handleCompleteTodo = (id: string) => {
    const updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        return { ...todo, completed: !todo.completed };
      } else {
        return todo;
      }
    });
    setTodos(updatedTodos);
  };

  const handleDeleteTodo = (id: string) => {
    const updatedTodos = todos.filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo App</h1>
      <TodoList
        items={todos}
        onComplete={handleCompleteTodo}
        onDelete={handleDeleteTodo}
      />
      <TodoForm onSubmit={handleAddTodo} />
    </div>
  );
};

export default Home;

useStateフックを使用して、初期値として空のTodoリストを設定しています。handleAddTodo関数を使用して、新しいTodoアイテムを追加します。新しいTodoアイテムを作成し、setTodos関数を使用してTodoリストに追加します。handleCompleteTodo関数とhandleDeleteTodo関数を使用して、Todoアイテムを完了したり、削除したりします。

これでTodoアプリが完成しました！次はアプリをビルドして、ブラウザで実行してみましょう。

まとめ

今回は、Next.jsを使用してTodoアプリを作成する方法について学びました。React、TypeScript、Next.jsを使用して、TodoアプリのUIコンポーネントを作成し、データを管理しました。Next.jsを使用することで、SSRや静的サイト生成などの機能を利用することができ、高速でSEOに優れたアプリを開発することができます。これを参考にして、自分なりのTodoアプリを作成してみてください！

最後に

最後までご覧いただきありがとうございました。ところでこの記事の違和感にお気づきの方はいましたでしょうか。

そうです。この記事は「まとめ」の項目までChatGPTが書いたものです。内容の精査など細かいところの修正はありますが、ほとんどはChatGPTからのアンサーをそのまま貼り付けています。

アプリのビルド、動作確認でも問題がなく、ここまで質の高い記事を生成できるのは驚きですね。 ChatGPTの台頭で今までに無い世界が見られそうで楽しみです。

今回の記事生成に使用しましたプロンプトを以下に記載します。ご参考までに。

次で与えられたテーマ、技術、目次で記事を書いてください。
フォーマットはマークダウンで記載してください。

テーマ
- Next.jsでTodoアプリの作り方

技術
- React
- Typescript
- Next.js

目次
- はじめに
- プロジェクトのセットアップ
- TodoアプリのUIコンポーネントを作成する
- データの管理
- Todoアイテムの追加
- Todoアイテムの完了処理
- Todoアイテムの削除
- まとめ

Next.jsでTodoアプリの作り方.

はじめに

プロジェクトのセットアップ

TodoアプリのUIコンポーネントを作成する

データの管理

まとめ

最後に

Loading Giscus Discussion