Zenn
🤖

話題のChatGPTで生成されたアプリを作ってみた(TypeScriptを使ったToDoリストアプリ制作)

2024/05/16に公開
JavaScript
React
TypeScript
tech

はじめに

こちらの記事は、プログラミング初学者が書いています。内容の保証性は確立していません。
また、ChatGPTで作成したコードを TypeScript 初学者がアウトプットするためのものです。

この記事ではなくChatGPTを見つつ学びたい場合

以下の2つをChatGPTに質問し、返答を元に実行してください。

  1. TypeScriptの学習のために簡単なアプリを作りたいのですが、どんな案がありますか？
  2. ToDoリストアプリの作り方を教えてください。

ChatGPTに従ってTo Doアプリの作成 〜制作編〜

0.このチュートリアルに必要なもの

以下の4つが必要になります。もしご利用のPCにインストールされていなければ、
それぞれ調べてインストールをしてください。

  • Node.js (今回はv20.12.2で動作確認しています)
  • NPM
  • VS CodeやWebStormなどのエディター

1.環境構築

ディレクトリの作成

どこでも良いので、ディレクトリを作成してください。

React・Typescriptを実行可能に

1.作成したディレクトリをVSコードで開く

2.ターミナルを開く

ターミナル
#Windowsの場合
調べてください。
#macの場合
command + J

3.作成したディレクトリまでターミナルから移動

調べてください。

4.React・Typescriptが動作する環境を構築

ターミナル
npx create-react-app todo-app --template typescript

5.作成したディレクトリへ移動

ターミナル
cd todo-app

ディレクトリ構造の同期

以下のようなディレクトリ構造になるように同期をとってください。
(他のディレクトリが存在していても問題ありません。)

ディレクトリ構造 src
src/
├── components/
│   ├── TodoItem.tsx
│   └── TodoList.tsx
├── App.tsx
├── index.tsx
├── App.css
├── types.ts

2.コードを記述

Typescriptで型を定義

src/types.tsに以下のコードをコピペしてください。

src/types.ts
export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

ToDo項目のコンポーネント作成

src/components/TodoItem.tsxに以下のコードをコピペしてください。

src/components/TodoItem.tsx
import React from 'react';
import { Todo } from '../types';

interface Props {
  todo: Todo;
  toggleTodo: (id: number) => void;
  deleteTodo: (id: number) => void;
}

const TodoItem: React.FC<Props> = ({ todo, toggleTodo, deleteTodo }) => {
  return (
    <div>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => toggleTodo(todo.id)}
      />
      <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
        {todo.text}
      </span>
      <button onClick={() => deleteTodo(todo.id)}>Delete</button>
    </div>
  );
};

export default TodoItem;

ToDoリストのコンポーネント

src/components/TodoList.tsxに以下のコードをコピペしてください。

src/components/TodoList.tsx
import React from 'react';
import { Todo } from '../types';
import TodoItem from './TodoItem';

interface Props {
  todos: Todo[];
  toggleTodo: (id: number) => void;
  deleteTodo: (id: number) => void;
}

const TodoList: React.FC<Props> = ({ todos, toggleTodo, deleteTodo }) => {
  return (
    <div>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          toggleTodo={toggleTodo}
          deleteTodo={deleteTodo}
        />
      ))}
    </div>
  );
};

export default TodoList;

アプリの主要なロジックを実装

src/App.tsxの中身をすべて以下のコードで上書きしてください。

src/App.tsx
import React, { useState } from 'react';
import TodoList from './components/TodoList';
import { Todo } from './types';
import './App.css';

const App: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState<string>('');

  const addTodo = () => {
    if (newTodo.trim() === '') return;
    const newTodoItem: Todo = {
      id: Date.now(),
      text: newTodo,
      completed: false,
    };
    setTodos([...todos, newTodoItem]);
    setNewTodo('');
  };

  const toggleTodo = (id: number) => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id: number) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div className="App">
      <h1>ToDo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="New todo"
      />
      <button onClick={addTodo}>Add Todo</button>
      <TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />
    </div>
  );
};

export default App;

おまけ.スタイルの設定

src/App.cssの一番下に以下をコピペしてください。

src/App.css
.App {
  text-align: center;
}
input {
  margin-right: 10px;
}
button {
  margin-left: 10px;
}

ChatGPTに従ってTo Doアプリの作成 〜起動編〜

下記コードを実行しTo Doリストが完成していることを確認してください。

ターミナル
npm start

ChatGPTに従ってTo Doアプリの作成 〜解説編〜

各行を解説します。

GitHubで編集を提案

Discussion