ChatGPTでvueを使いToDoリストを作成する

ChatGPTを使用してVue 3、Vue Router、Vuexを使用したToDoリストアプリを作りました

やりたいこと

vue3
Vue Router
Vuex
でtodoリストを作る

chatGPTに質問

vue3でtodoリストを作りたいです
routerとvuexを入れています
ほしい機能は
・todoの登録
・todoの完了
・todoの削除
・todoの編集です

返ってきた答え

Vuexストアをセットアップします。store/index.jsファイルを作成し、以下のようにコードを追加します。

import { createStore } from 'vuex';

export default createStore({
  state: {
    todos: [],
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    completeTodo(state, id) {
      const todo = state.todos.find(todo => todo.id === id);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
    deleteTodo(state, id) {
      state.todos = state.todos.filter(todo => todo.id !== id);
    },
    editTodo(state, payload) {
      const todo = state.todos.find(todo => todo.id === payload.id);
      if (todo) {
        todo.text = payload.text;
      }
    },
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('addTodo', todo);
    },
    completeTodo({ commit }, id) {
      commit('completeTodo', id);
    },
    deleteTodo({ commit }, id) {
      commit('deleteTodo', id);
    },
    editTodo({ commit }, payload) {
      commit('editTodo', payload);
    },
  },
  getters: {
    getTodos: state => state.todos,
  },
});

Vue Routerをセットアップします。router/index.jsファイルを作成し、以下のようにコードを追加します。
// router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import TodoList from '../views/TodoList.vue';

const routes = [
  {
    path: '/',
    name: 'TodoList',
    component: TodoList,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

ToDoリストのコンポーネントを作成します。views/TodoList.vueファイルを作成し、以下のようにコードを追加します。

<template>
  <div>
    <h1>ToDoリスト</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="新しいToDoを追加">
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="toggleComplete(todo.id)">{{ todo.completed ? '未完了' : '完了' }}</button>
        <button @click="edit(todo.id)">編集</button>
        <button @click="remove(todo.id)">削除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
    };
  },
  computed: {
    todos() {
      return this.$store.getters.getTodos;
    },
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') return;
      this.$store.dispatch('addTodo', { id: Date.now(), text: this.newTodo, completed: false });
      this.newTodo = '';
    },
    toggleComplete(id) {
      this.$store.dispatch('completeTodo', id);
    },
    edit(id) {
      const text = prompt('ToDoを編集', this.todos.find(todo => todo.id === id).text);
      if (text !== null) {
        this.$store.dispatch('editTodo', { id, text });
      }
    },
    remove(id) {
      if (confirm('ToDoを削除しますか？')) {
        this.$store.dispatch('deleteTodo', id);
      }
    },
  },
};
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>

これで、Vue 3でToDoリストアプリケーションがセットアップされ、以下の機能が実装されています。

ToDoの登録
ToDoの完了/未完了の切り替え
ToDoの削除
ToDoの編集
このコードをベースにして、さらにカスタマイズや追加の機能を実装できます。

と帰ってきました

1発でちゃんとうごきました

次にcssも書いてもらいます

css

テキストボックスをおしゃれにしてください

と質問しました
返ってきたのが↓

<style>
/* ... 既存のスタイル ... */

/* テキストボックスのスタイル */
input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 10px;
  border: none;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* テキストボックスのフォーカス時のスタイル */
input[type="text"]:focus {
  border-color: #007bff;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.5);
  outline: none;
}

/* ... 既存のスタイル ... */
</style>

cssではinput[type="text"]を言われていますが実際のHTMLを見ると

<input v-model="newTodo" @keyup.enter="addTodo" placeholder="新しいToDoを追加" class="custom-input">

です
type="text"ではないので

そのcssは
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="新しいToDoを追加">
にききますか

のように返しました

すると
クラスを付けたコードで帰ってきました

<input v-model="newTodo" @keyup.enter="addTodo" placeholder="新しいToDoを追加" class="custom-input">

cssも同じようにクラス名に代わって完成です！

完了、編集、削除もできてます！