生成AI使ってみた。claude-3.5-sonnet, bolt.new, gemini-1.5 pro

コード生成して欲しいです。
TODO アプリ、 Remix shadcn/ui 使用したいです。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

コード生成して欲しいです。
TODO アプリ、Remix shadcn/ui 使用したいです。

項目は、下記を追加したい。
title: INPUTタグ type=text
content: INPUTタグ type=text
public(公開、非公開) INPUTタグ type=radio
food_orange: INPUTタグ type=checkbox
food_apple: INPUTタグ type=checkbox
food_banana:  INPUTタグ type=checkbox
pub_date: INPUTタグ type=date
qty1: INPUTタグ type=text
qty2: INPUTタグ type=text
qty3: INPUTタグ type=text

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。


・Remix action 関数で
バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい

検証内容は、下記です。
title: １文字以下は。エラー
content: 未入力は。エラー
qty1: 未入力は。エラー
qty2: 未入力は。エラー
qty3: 未入力は。エラー

コード生成して欲しいです。
chat アプリ、 React , shadcn/ui 使用したいです。

・投稿データ、ダイアログ入力したい。
・投稿データ、削除したい。
・スレッド(返信) 表示を。ダイアログ表示したいです。
・スレッド(返信) 登録を。ダイアログ追加したいです。
・スレッド(返信) 削除機能を追加したい。

コード生成して欲しいです。
TODO アプリ、React , shadcn/ui 使用したいです。

項目は、下記を追加したい。
title: INPUTタグ type=text
content: textarea
form_type: INPUTタグ type=text
public(公開、非公開) INPUTタグ type=radio
food_orange: INPUTタグ type=checkbox
food_apple: INPUTタグ type=checkbox
food_banana:  INPUTタグ type=checkbox
food_melon:  INPUTタグ type=checkbox
food_grape:  INPUTタグ type=checkbox
date_publish: INPUTタグ type=date
date_update1: INPUTタグ type=date
date_update2: INPUTタグ type=date
date_update3: INPUTタグ type=date
option_text_1: textarea
option_text_2: textarea
option_text_3: textarea
category_ict:  INPUTタグ type=checkbox
category_sport:  INPUTタグ type=checkbox
category_food:  INPUTタグ type=checkbox
category_drink:  INPUTタグ type=checkbox
qty1: INPUTタグ type=text
qty2: INPUTタグ type=text
qty3: INPUTタグ type=text


・TODOの追加機能、。ダイアログで編集したいです。
・TODOの編集機能。ダイアログで編集したいです。
・TODOの削除、追加したいです。
・TODOの検索を、追加したいです。

コード生成して欲しいです。
上記の、
バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい

項目は、下記になります。
title: １文字以下は。エラー
content: 未入力は。エラー
form_type: 未入力は。エラー
qty1: 未入力は。エラー
qty2: 未入力は。エラー
qty3: 未入力は。エラー

コード生成して欲しいです。
上記の、
リストを、tanstack/react-table 使用したいです。

コード生成して欲しいです。
TODO アプリ、Remix shadcn/ui 使用したいです。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

コード生成して欲しいです。
上記、
Remix action 関数で
バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい

検証内容は、下記です。
TODOデータ: 未入力は、エラー

上記、
データベースと、連携してほしい。
sqlite に、データを保存したい。

npm install @prisma/client
npm install -D prisma
#
npx prisma generate
npx prisma migrate dev --name init

$ sqlite3  prisma/dev.db
SQLite version 3.37.2 2022-01-06 13:25:41
Enter ".help" for usage hints.
sqlite> SELECT * FROM Todo;
2|t2bbb|0|1731970144688|1731970208561
4|t3|0|1731975578321|1731975578321
5|t4|0|1731975581914|1731975581914
sqlite>

コード生成して欲しいです。
CRUD アプリ、Express.js, React,  shadcn/ui 使用したいです。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

・バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい。
検証内容は、下記です。
TODOデータ: 未入力は、エラー

データベースと、連携してほしい。
sqlite に、データを保存したい。

上記、
sqlite 接続は、 prismaを使用したい。

npm install @prisma/client
npm install prisma --save-dev

npx prisma init
npx prisma migrate dev --name init
npx prisma generate

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

bunx prisma init
bunx prisma migrate dev --name init
bunx prisma generate

user1# SELECT * FROM "Todo";
 id | title | completed |        createdAt        |        updatedAt
----+-------+-----------+-------------------------+-------------------------
  1 | t1    | f         | 2024-11-19 23:25:14.085 | 2024-11-19 23:25:14.085
  2 | t2    | f         | 2024-11-19 23:25:16.91  | 2024-11-19 23:25:16.91
  3 | t3bb  | f         | 2024-11-19 23:25:20.551 | 2024-11-19 23:25:24.752
(3 rows)

コード生成して欲しいです。
ユーザー作成画面
Express.js, React,  shadcn/ui 使用したいです。

・入力項目は、下記にして欲しい。
名前: INPUT タグ　type=text
メールアドレス: INPUT タグ　type=text
パスワード: INPUT タグ　type=password

・パスワード暗号化は、bcrypt を使用したい。

・データベースと、連携してほしい。
sqlite に、データを保存したい。
sqlite 接続は、 prismaを使用したい。

bunx prisma init
bunx prisma migrate dev --name init
bunx prisma generate

コード生成して欲しいです。
CRUD アプリ、Express.js, React,  shadcn/ui 使用したいです。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

・バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい。
検証内容は、下記です。
TODOデータ: 未入力は、エラー

データベースと、連携してほしい。
sqlite に、データを保存したい。
ORMは、 drizzleを使用したい。

コード生成して欲しいです。
CRUD アプリ、
バックエンド: cloudflare workers , D1 database
フロントエンド: React,  shadcn/ui 使用したいです。

・バックエンドのみ、生成してほしい。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

上記、
フロントエンドのみ、生成してほしい。

・バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい。
検証内容は、下記です。
TODOデータ: 未入力は、エラー

コード生成して欲しいです。
CRUD アプリ、
バックエンド: Cloudflare workers , D1 database
フロントエンド: Remix,  shadcn/ui 使用したいです。

・バックエンドのみ、生成してほしい。

TODOの追加機能を、ダイアログで編集したいです。
TODOの編集機能を、ダイアログで編集したいです。
TODOの削除機能を、追加したいです。
TODOの検索機能を、追加したいです。

上記、
フロントエンドのみ、生成してほしい。

・バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい。
検証内容は、下記です。
TODOデータ: 未入力は、エラー

コード生成して欲しいです。
CRUD アプリ、
Remix ,  tailwindcss 使用したいです。
Remix loader, action関数で、Cloudflare D1 database 連携したい。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

コード生成して欲しいです。
CRUD アプリ、
バックエンド: hono , Cloudflare D1 database 連携したい。
フロントエンド: React,  tailwindcss 使用したいです。

・バックエンドのみ、生成してほしい。
・CREATE TABLE 作成して欲しい。

TODOの追加機能を、ダイアログで編集したいです。
TODOの編集機能を、ダイアログで編集したいです。
TODOの削除機能を、追加したいです。
TODOの検索機能を、追加したいです。

上記、
フロントエンドのみ、生成してほしい。
・React ,  tailwindcss 使用したいです。

・バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい。
検証内容は、下記です。
TODOデータ: 未入力は、エラー

bun run build
bun run deploy

コード生成して欲しいです。
CRUD アプリ、
バックエンド: Express.js
フロントエンド : Svelte, tailwindCSS 使用したいです。
データベース、sqlite 連携してほしい。
ORMは、 drizzleを使用したい。

・バックエンドのみ、生成して欲しい。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

上記、
フロントエンドのみ生成して欲しい。

・バリデーション追加したい。
npmは zod 使用したい。

検証内容は、下記です。
TODOデータ: 未入力は、エラー

npx drizzle-kit generate
npx drizzle-kit migrate

コード生成して欲しいです。
CRUD アプリ、
バックエンド: Express.js
フロントエンド : Vue.js , tailwindCSS 使用したいです。
データベース、sqlite 連携してほしい。
ORMは、 drizzleを使用したい。

・バックエンドのみ、生成して欲しい。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

上記、
フロントエンドのみ生成して欲しい。
Vue.js , tailwindCSS 使用したいです。

・バリデーション追加したい。
npmは zod 使用したい。

検証内容は、下記です。
TODOデータ: 未入力は、エラー

npx drizzle-kit generate
npx drizzle-kit migrate

コード生成して欲しいです。
CRUD アプリ、
バックエンド: Express.js
フロントエンド : Svelte , tailwindCSS 使用したいです。
データベース、sqlite 連携してほしい。
ORMは、 drizzleを使用したい。

・バックエンドのみ、生成して欲しい。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

上記、
フロントエンドのみ生成して欲しい。
Svelte , tailwindCSS 使用したいです。

・バリデーション追加したい。
npmは zod 使用したい。

検証内容は、下記です。
TODOデータ: 未入力は、エラー

/backend
├── db/
│   ├── schema.js
│   ├── drizzle.config.js
│   └── index.js
├── routes/
│   └── todos.js
├── app.js
└── package.json


/frontend
├── src/
│   ├── components/
│   │   ├── TodoDialog.js
│   │   ├── TodoItem.js
│   │   ├── TodoList.js
│   └── App.js
├── index.js
├── tailwind.config.js
└── styles.css

npx drizzle-kit generate
npx drizzle-kit migrate

コード生成して欲しいです。
CRUD アプリ、
バックエンド: Express.js
フロントエンド : React , tailwindCSS 使用したいです。
データベース、Sqlite 連携してほしい。
ORMは、 drizzleを使用したい。

・バックエンドのみ、生成して欲しい。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

上記、
フロントエンドのみ生成して欲しい。
React , tailwindCSS 使用したいです。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。


・バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい。

検証内容は、下記です。
TODOデータ: 未入力は、エラー

npx drizzle-kit generate
npx drizzle-kit migrate

/backend
├── db/
│   ├── schema.js
│   ├── drizzle.config.js
│   └── index.js
├── routes/
│   └── todos.js
├── app.js
└── package.json


/frontend
├── src/
│   ├── components/
│   │   ├── TodoDialog.js
│   │   ├── TodoItem.js
│   │   ├── TodoList.js
│   └── App.js
├── index.js
├── tailwind.config.js
└── styles.css

コード生成して欲しいです。
CRUD アプリ、
バックエンド: Express.js
フロントエンド : React , tailwindCSS 使用したいです。
データベース、Sqlite 連携してほしい。
ORMは、 drizzleを使用したい。

・バックエンドのみ、生成して欲しい。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

上記、
フロントエンドのみ生成して欲しい。
React , tailwindCSS 使用したいです。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。


・バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい。

検証内容は、下記です。
TODOデータ: 未入力は、エラー

todo-app-backend/
├── node_modules/
├── src/
│   ├── db/
│   │   └── schema.ts
│   ├── routes/
│   │   └── todos.ts
│   └── index.ts
├── package.json
├── package-lock.json
└── tsconfig.json

todo-app-frontend/
├── public/
├── src/
│   ├── components/
│   │   ├── TodoList.tsx
│   │   ├── TodoItem.tsx
│   │   ├── AddTodoDialog.tsx
│   │   └── EditTodoDialog.tsx
│   ├── types/
│   │   └── index.ts
│   ├── utils/
│   │   └── api.ts
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   └── setupTests.ts
├── package.json
├── package-lock.json
├── tailwind.config.js
└── tsconfig.json

npx drizzle-kit generate
npx drizzle-kit migrate

コード生成して欲しいです。
CRUD アプリ、
バックエンド: Express.js
フロントエンド : Svelte , tailwindCSS 使用したいです。
データベース、Sqlite 連携してほしい。
ORMは、 drizzleを使用したい。

・バックエンドのみ、生成して欲しい。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

上記、
フロントエンドのみ生成して欲しい。
Svelte , tailwindCSS 使用したいです。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

・バリデーション追加したい。
npmは zod 使用したい。
検証内容は、下記です。
TODOデータ: 未入力は、エラー

todo-app/
├── src/
│   ├── db/
│   │   ├── schema.ts
│   │   └── index.ts
│   ├── routes/
│   │   └── todo.routes.ts
│   ├── index.ts
├── package.json
├── tsconfig.json
└── drizzle.config.ts

frontend/
├── src/
│   ├── components/
│   │   ├── TodoList.svelte
│   │   ├── TodoModal.svelte
│   │   └── SearchBar.svelte
│   ├── lib/
│   │   └── api.ts
│   │   └── types.ts
│   │   └── utils.ts
│   ├── routes/
│   │   └── +page.svelte
│   ├── App.svelte
│   └── main.ts
├── package.json
├── tailwind.config.cjs
├── postcss.config.cjs
└── vite.config.ts

npx drizzle-kit generate
npx drizzle-kit migrate

コード生成して欲しいです。
CRUD アプリ、
バックエンド: Express.js
フロントエンド : Vue.js , tailwindCSS 使用したいです。
データベース、 Sqlite 連携してほしい。
ORMは、 drizzleを使用したい。

・バックエンドのみ、生成して欲しい。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

上記、
フロントエンドのみ生成して欲しい。
Vue.js , tailwindCSS 使用したいです。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

・バリデーション追加したい。
npmは zod 使用したい。

検証内容は、下記です。
TODOデータ: 未入力は、エラー

backend/
├── src/
│   ├── db/
│   │   ├── index.ts
│   │   └── schema.ts
│   ├── routes/
│   │   └── todos.ts
│   ├── index.ts
├── package.json
└── tsconfig.json

todo-frontend/
├── public/
├── src/
│   ├── api/
│   │   └── index.ts
│   ├── components/
│   │   ├── TodoList.vue
│   │   ├── TodoItem.vue
│   │   ├── TodoForm.vue
│   │   └── SearchBar.vue
│   ├── composables/
│   │   └── useValidation.ts
│   ├── stores/
│   │   └── todo.ts
│   ├── App.vue
│   ├── main.ts
│   └── router.ts
├── index.html
├── package.json
└── ...

bunx drizzle-kit generate
bunx drizzle-kit migrate

コード生成して欲しいです。
CRUD アプリ、
バックエンド: cloudflare workers , D1 database
フロントエンド: React,  tailwindCSS 使用したいです。

・バックエンドのみ、生成してほしい。

・項目は、下記を追加したい。
title: INPUTタグ type=text
content: INPUTタグ textarea
public_type (公開、非公開) INPUTタグ type=radio
food_orange: INPUTタグ type=checkbox
food_apple: INPUTタグ type=checkbox
food_banana:  INPUTタグ type=checkbox
pub_date1: INPUTタグ type=date
pub_date2: INPUTタグ type=date
pub_date3: INPUTタグ type=date
qty1: INPUTタグ type=text
qty2: INPUTタグ type=text
qty3: INPUTタグ type=text

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。