LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@N-i-ke(N-i -ke)

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

Posted at

最初に

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

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

キャッチアップ流れ

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

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

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

実際にGPTに投げてみた

1.環境構築を含めたコマンドを聞く

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

下記が帰ってきた返答

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

Node.jsのバージョン確認

node -v

Next.jsプロジェクトの作成

npx create-next-app@latest todo-app

プロジェクトディレクトリに移動

cd todo-app

開発サーバーの起動

npm run dev

Todoアプリの構築準備

  • ページとコンポーネントの作成
    pages/index.tsxまたはapp/page.tsxを編集してTodoアプリのUIを作成します。
  • 状態管理の導入
    必要に応じてuseStateやzustandなどを使用して状態を管理します。
  • スタイリング
    CSSやCSS-in-JS（例: Tailwind CSS, styled-components）を利用してデザインを追加します。

2.実際にコードを編集してもらう

→環境構築ができたのでTodoアプリの作成のコードを教えてほしい

下記が帰ってきた返答

プロジェクト構造
以下のようなディレクトリ構造を想定しています

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;

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

npm run dev

2+α.コードを解析する

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

下記が帰ってきた返答

page.tsx（TodoPage コンポーネント）

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

  • 1.useState の使用
const [todos, setTodos] = useState<Todo[]>([]);

todos は現在のタスク（Todo）のリストを管理する状態変数です。
setTodos はこの状態を更新するための関数です。
初期値として空の配列 [] を設定しています。

  • 2.addTodo 関数
const addTodo = (text: string) => {
   setTodos((prevTodos) => [...prevTodos, { id: crypto.randomUUID(), text }]);
};

新しいタスクを追加する処理。
prevTodos には現在のタスクリストが渡されます。
crypto.randomUUID() を使ってユニークなIDを生成し、新しいタスク（{ id, text }）をリストの末尾に追加します。

  • 3.removeTodo 関数
const removeTodo = (id: string) => {
   setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
};

指定したタスク（IDで判別）を削除する処理。
配列の filter メソッドを使って、削除対象以外のタスクだけを残します。

  • 4.TodoForm と TodoList の使用
<TodoForm addTodo={addTodo} />
<TodoList todos={todos} removeTodo={removeTodo} />

TodoForm コンポーネントに addTodo 関数を渡して、新しいタスクを追加できるようにします。
TodoList コンポーネントには現在のタスクリスト（todos）とタスク削除関数（removeTodo）を渡します。

TodoList.tsx（タスクリストの描画）

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

  • 1.プロパティ（Props）の定義
type TodoListProps = {
   todos: { id: string; text: string }[];
   removeTodo: (id: string) => void;
};

todos: Todoオブジェクト（id と text を持つ）の配列。
removeTodo: タスクを削除するための関数。

  • 2.リストの描画
{todos.map((todo) => (
   <li key={todo.id}>
       <span>{todo.text}</span>
       <button onClick={() => removeTodo(todo.id)}>削除</button>
   </li>
))}

todos.map を使用して、各タスク（todo）をリストアイテム（

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

ボタンがクリックされたときに removeTodo 関数を呼び出し、対応するタスクを削除します。

3.UIに関しては省略

最後に

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?