怠惰エンジニアワイ、キャッチアップはchatGPTに任せる Next.js編

## 最初に
最近プロジェクトが変わるたびに微妙に技術スタックが変わることが多く、キャッチアップをすることが増えた。

各言語のチュートリアルを見ることも大事だが、実際に手を動かして何か作るのが簡単なキャッチアップになると思いchatGPTをフル活用してキャッチアップしている

## キャッチアップ流れ

試しにNext.jsでTodoアプリを作ることでキャッチアップを図ろうとしてみる

 - プロンプトの流れとしては
1.環境構築を含めたコマンドを聞く
2.実際にコードを編集してもらう
2+α.コードを解析する
3.UIを整えてもらう

以下が実際にやってみた流れになる

## 実際にGPTに投げてみた

#### 1.環境構築を含めたコマンドを聞く
→next.jsでTodoアプリを作りたいので環境構築のコマンドから教えてほしい

下記が帰ってきた返答

Node.jsのインストール
Next.jsを使用するには、Node.jsが必要です。以下の手順で確認またはインストールしてください。

Node.jsのバージョン確認
```bash
node -v
```

Next.jsプロジェクトの作成
```bash
npx create-next-app@latest todo-app
```
プロジェクトディレクトリに移動
```bash
cd todo-app
```
開発サーバーの起動
```bash
npm run dev
```
Todoアプリの構築準備
 - ページとコンポーネントの作成
pages/index.tsxまたはapp/page.tsxを編集してTodoアプリのUIを作成します。
 - 状態管理の導入
必要に応じてuseStateやzustandなどを使用して状態を管理します。
 - スタイリング
CSSやCSS-in-JS（例: Tailwind CSS, styled-components）を利用してデザインを追加します。

#### 2.実際にコードを編集してもらう
→環境構築ができたのでTodoアプリの作成のコードを教えてほしい

下記が帰ってきた返答

プロジェクト構造
以下のようなディレクトリ構造を想定しています
```bash
todo-app/
├── app/
│   └── page.tsx       # Todoアプリのメインページ
├── components/
│   ├── TodoForm.tsx   # 新しいTodoを追加するフォーム
│   └── TodoList.tsx   # Todo一覧を表示するリスト
```

Todoアプリの主要コンポーネント
app/page.tsx (メインページ)
```typescript/page.tsx
import React, { useState } from 'react';
import TodoForm from '../components/TodoForm';
import TodoList from '../components/TodoList';

const TodoPage = () => {
  const [todos, setTodos] = useState<string[]>([]);

  const addTodo = (todo: string) => {
    setTodos((prevTodos) => [...prevTodos, todo]);
  };

  const removeTodo = (index: number) => {
    setTodos((prevTodos) => prevTodos.filter((_, i) => i !== index));
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Todoアプリ</h1>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} removeTodo={removeTodo} />
    </div>
  );
};

export default TodoPage;

```


components/TodoList.tsx (Todo一覧を表示するリスト)
```typescript/TodoList.tsx
'use client';

import React from 'react';

type TodoListProps = {
  todos: string[];
  removeTodo: (index: number) => void;
};

const TodoList: React.FC<TodoListProps> = ({ todos, removeTodo }) => {
  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {todos.map((todo, index) => (
        <li
          key={index}
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '10px',
            padding: '10px',
            border: '1px solid #ccc',
            borderRadius: '5px',
          }}
        >
          <span>{todo}</span>
          <button
            onClick={() => removeTodo(index)}
            style={{
              backgroundColor: '#f44336',
              color: 'white',
              border: 'none',
              borderRadius: '3px',
              padding: '5px 10px',
              cursor: 'pointer',
            }}
          >
            削除
          </button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;
```

アプリの実行
開発サーバーを起動し、ブラウザで確認します：
```bash
npm run dev
```

#### 2+α.コードを解析する
ざっくりと聞いてみる
→内容の説明を詳しくしてほしい。あんまりコードの意味がわかっていない

下記が帰ってきた返答

#### page.tsx（TodoPage コンポーネント）
このファイルは、Todoアプリ全体の管理を行うメインのコンポーネントです。

 - 1.useState の使用
```tsx
const [todos, setTodos] = useState<Todo[]>([]);
```
todos は現在のタスク（Todo）のリストを管理する状態変数です。
setTodos はこの状態を更新するための関数です。
初期値として空の配列 [] を設定しています。

 - 2.addTodo 関数
 ```tsx
const addTodo = (text: string) => {
    setTodos((prevTodos) => [...prevTodos, { id: crypto.randomUUID(), text }]);
};
```
新しいタスクを追加する処理。
prevTodos には現在のタスクリストが渡されます。
crypto.randomUUID() を使ってユニークなIDを生成し、新しいタスク（{ id, text }）をリストの末尾に追加します。

 - 3.removeTodo 関数
 ```tsx
const removeTodo = (id: string) => {
    setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
};
```
指定したタスク（IDで判別）を削除する処理。
配列の filter メソッドを使って、削除対象以外のタスクだけを残します。

 - 4.TodoForm と TodoList の使用
 ```tsx
<TodoForm addTodo={addTodo} />
<TodoList todos={todos} removeTodo={removeTodo} />
```
TodoForm コンポーネントに addTodo 関数を渡して、新しいタスクを追加できるようにします。
TodoList コンポーネントには現在のタスクリスト（todos）とタスク削除関数（removeTodo）を渡します。

#### TodoList.tsx（タスクリストの描画）
このファイルは、タスクリストを描画するためのコンポーネントです。

 - 1.プロパティ（Props）の定義
 ```tsx
type TodoListProps = {
    todos: { id: string; text: string }[];
    removeTodo: (id: string) => void;
};
```
todos: Todoオブジェクト（id と text を持つ）の配列。
removeTodo: タスクを削除するための関数。

 - 2.リストの描画
 ```tsx
{todos.map((todo) => (
    <li key={todo.id}>
        <span>{todo.text}</span>
        <button onClick={() => removeTodo(todo.id)}>削除</button>
    </li>
))}
```
todos.map を使用して、各タスク（todo）をリストアイテム（<li>）として描画します。
key={todo.id} はReactの効率的なレンダリングのために必須です（ユニークな値を指定）。
各タスクのテキストを表示し、削除ボタンを追加します。

 - 3.削除ボタン
 ```tsx
<button onClick={() => removeTodo(todo.id)}>削除</button>
```
ボタンがクリックされたときに removeTodo 関数を呼び出し、対応するタスクを削除します。

### 3.UIに関しては省略

## 最後に

chatGPTに投げることでここまでわかるようになったとは、、
手を動かしながら、そしてコードも自分でも読んでわからないところは分析してもらって、公式ドキュメントと照らし合わせながら進めてみてもいいかもしれません。