はじめに

GPT-4はプロンプトの応答が遅かったのですが、GPT-4oになってだいぶ早くなったというのを目にしていました。出力の精度も確認したかったので、簡単なWebアプリを作成してみようと思いました。

アプリケーションの概要

Node.jsでTodo管理するWebアプリケーション
ユーザ登録、ログイン、トークン認証あり
プロジェクトと、プロジェクトごとのTodoの追加

　※あくまでサンプル的なものなのであまり期待せずでお願いします。

GPT-4o　プロンプト入力

プロンプトは以下で入力

GPT-4o　プロンプト応答

出力されたプロジェクト構造

my-todo-app/
│
├── node_modules/
├── app.js
├── config.js
├── database.js
├── routes/
│   ├── auth.js
│   ├── projects.js
│   └── todos.js
└── models/
    ├── user.js
    ├── project.js
    └── todo.js

その後にそれぞれのソースを出力してくれます。全てのソースを出力しますが、一部のみ記載します。

app.js

const express = require('express');
const bodyParser = require('body-parser');
const authRoutes = require('./routes/auth');
const projectRoutes = require('./routes/projects');
const todoRoutes = require('./routes/todos');

const app = express();
const PORT = process.env.PORT || 3000;

// ミドルウェア設定
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
.
.
.
(省略)

最後にプロジェクトの起動コマンドを出力して終わります。

npm install
npm start

アプリケーションの起動

npm start

Server is running on port 3000

起動してみたはよいのですが、画面がありません。追加してもらいましょう。

publicフォルダ下の3ファイルが追加されました。

my-todo-app/
│
├── node_modules/
├── public/
│   ├── index.html ・・・追加
│   ├── style.css  ・・・追加
│   └── app.js     ・・・追加
├── app.js
├── config.js
├── database.js
├── package.json
├── routes/
│   ├── auth.js
│   ├── projects.js
│   └── todos.js
└── models/
    ├── user.js
    ├── project.js
    └── todo.js

動かしてみましょう。
localhost:3000

プロジェクトを選択します。

Todoを追加します。表示されたTodoを削除します。

まとめ

GPT-4oを使ってみて、GPT-4と比べてプロンプトの応答が体感でもかなり早くなっていることが分かりました。出力されたファイルの精度は高く、いくつか不足しているソース、処理がありましたが、9割くらいはそのまま動かせるものでした。プログラムの初期作成はAIが中心になっていくでしょう。