「怠惰・短気・高慢」であれ、ChatGPTを使って業務効率化しよう(技術剪定・開発準備編)

ChatGPTで業務効率化してこう

基本的なWeb開発の流れに沿って、ChatGPTと共に０からWebアプリをつくることで、ChatGPTをどのように使うのか、どこまで効率化してくれるかを解説します。
記事が長いので、自分の興味のある項目だけ読み飛ばして読むことをお勧めします。

要件定義編はこちら

https://zenn.dev/yamadamadamada/articles/40d0594c1c6375

効率化度合いの評価まとめ

🌟...いまいち
🌟🌟...使える
🌟🌟🌟...ChatGPT最高！！

要件定義に関する項目	評価
技術選定	🌟🌟
デプロイ先選定	🌟
環境構築（PCに直接インストール）	素直に公式を見よう
環境構築（Docker）	🌟🌟🌟
API連携（サンプルコード）	🌟🌟🌟

評価が低い項目も質問内容によっては、最高の回答が返ってくることがあります。
本記事は１例としてください。

例として読書記録アプリをつくります！

要件定義編に引き続き、「読書記録アプリ」をつくります。
最低限の要件は、次のように設定しました。

デモアプリの要件（読み飛ばしてOK）

要件定義編で作成した機能要件を使用します。

読書記録アプリを作る目的
読書が苦手なエンジニアが読書記録をし、記録を共有することで、継続して技術本を読めるようになること

ターゲット
新人、中堅のWebエンジニア

要件
1.新規登録機能

• ユーザーは、アカウント作成時に、ユーザー名とパスワード、Eメールアドレスを登録することができる
• ユーザー名、パスワード、Eメールアドレスは、必須項目である
• ユーザーは、登録時にプロフィール画像をアップロードすることができる
  2.読書記録機能
• ユーザーは、読んでいる本の情報を登録することができる
• 登録する情報は、書籍名、ページ数、URL、読書状況（未読、読書中、読了）とする
• 読了状態に変更した場合は、読了日を自動的に登録する
• ユーザーは、読書中の本に対して、進捗状況を更新することができる。更新する情報は、読み終えたページ数である
• 読了済みの本はページ数を更新できない
• ユーザーは、読了済みの本を登録することができる。登録時には、感想や評価を入力することができる
  3.他の人の読書記録閲覧機能
• ユーザーは、他のユーザーの読書記録とユーザー情報を閲覧することができる
• 他のユーザーが登録した読書情報（書籍名、ページ数、URL、読書状況、感想、評価）を閲覧することができる
• 他のユーザーが登録したユーザー情報（プロフィール画像、ユーザー名）を閲覧することができる

質問する前に...

大前提として、ChatGPTの回答はあくまで一例です。
情報を精査し、正しい情報か確認することを意識してください。

また、ChatGPTに業務で使用するコードを渡す場合、環境キーやサービスを特定できる情報を送信しないでください。入力内容が他の人に渡ってしまう危険性があります。

「あなたはプロのWeb開発エンジニアとして回答してください。」

まず初めに、ChatGPTのロールを設定します。今回はプロのエンジニアになりきってもらうことで、より精度の高い提案をしてもらうようにします。

質問のテンプレート

https://logmi.jp/business/articles/328359

こちらの記事を参考にマークダウン形式で、ChatGPTに命令書として伝えてみました。

# 命令書
あなたはプロのWeb開発エンジニアです。
以下のサービス要件と技術選定の基準をもとに、最高の技術選定を出力してください

## サービス要件
〇〇アプリを次の要件で作成しようとしています。
<サービス概要>

## 〇〇の基準
- すごいこと
- はやってること
- なんかいいかんじなこと

技術選定

「最高の技術選定を出力してください」

質問文

# 命令書
あなたはプロのWeb開発エンジニアです。
以下のサービス要件と技術選定の基準をもとに、最高の技術選定を出力してください

# サービス要件
<省略>

## 技術選定の基準
- 将来性があること
- コミュニティが盛んであること
- 技術同士の相性がいいこと

ChatCPTさんの回答はこちら

• フロントエンド：React.js
• バックエンド：Node.js (Expressフレームワーク)
• データベース：MongoDB

ChatGPTの回答詳細

ほぉ〜
いいんじゃないでしょうか！

筆者はMongoDBを初めて知りましたが、Node.jsとの相性がいいらしいですね。

考慮が少し足りない

大まかな方針を決めてくれたのはいいですが、詰めが甘いところもあります。
Node.jsは開発時にJavaSciptとTypeSciptのどちらかを選ぶ必要がありますが、それについて触れていませんね。

また、バックエンドとフロントエンドのデータ連携をする技術が足りていません。
Node.jsをAPIとして使うなら、REST APIなのかGraphQLなのかなど、もう少し詰められそうです。

「Node.jsの開発では、JavaSciptとTypeSciptのどちらを選択すべきですか」

ChatGPTの回答

プロジェクトの要件や開発者の技術レベルによって選んでねということでした。
無難な回答ですね。
業務ならTypeScript一択ですが、今回は簡略化のためJavaScriptにします。

「最高のExpressとReactのデータ連携技術を出力してください」

REST APIがいいらしいです！
個人的にGraphQLが好きですが、Nodeは今回JavaScriptだし、GraphQLの型制約という強みは活かしにくいかもですね。

ChatGPTの回答

デプロイ先選定

技術が無事決まりましたが、リリースのことも考えなければなりません。
それぞれの適したデプロイ先を考えてもらいます。

「以下のサーバーの基準をもとに、各技術の最高のデプロイ先を出力してください」

# 命令書
あなたはプロのWeb開発エンジニアです。
以下のサーバー選定の基準をもとに、各技術の最高のデプロイ先を出力してください

# 技術
- フロントエンド：React.js
- バックエンド：Node.js (Expressフレームワーク)
- データベース：MongoDB

# サーバー選定の基準
- 多くの人に使われていること
- 無料枠があること
- なるべくデプロイ先は少なくする

ChatGPTの回答

• Heroku → Node.js,React
• MongoDB Atlas →MongoDB

...あーー...古い！！
Herokuの無料枠はなくなったんだよーーー😭😭😭

ひとまず、MongoDBのデプロイ先はMongoDB Atlasでよいですが、
Node.js,Reactは筆者がよく使うvercelとします。

ChatGPTの回答は2022年以前の情報をベースとしているため、しょうがないですが、回答もひと昔前のものになっていますね。
数年で流行が変わってしまうエンジニア業界恐ろしすぎ。。。と密かに思いました。

ローカル環境構築

サービスが動く、最低限の状態まで作成します。
先に結論をいうと、ChatGPTをつかってローカル環境構築をしてはいけません。
公式を見ましょう。

目標

• Node.jsサーバー立ち上げ
• MongoDBサーバー立ち上げ
• Reactで画面表示

「Node.jsサーバーを立ち上げる方法をインストールから」

ひとつずつやっていきましょう
「第一歩：Node.jsサーバー立ち上げ」部分に着手します。

# 命令書
あなたはプロのWeb開発エンジニアです。
以下の条件で、Node.jsインストールからサーバーを立ち上げまでの方法を教えてください

# 条件
- ローカル環境
- MacOS
- Node.jsは安定版
- フレームワークはExpress

ChatGPTの回答はこちら
Nodeインストールからサーバー立ち上げまで教えてくれました。
（順番違うし、ファイル足りてない）

環境構築できないじゃん

同じ手順を２回言う
3.Expressのインストールと4.サンプルアプリケーションの作成で同じコマンドを叩いています。

npm install express

存在しないファイルでサーバーを起動しようとする
「５.サーバーの起動」でサーバーを起動していますが、index.jsが存在しません。

node index.js

もはや公式サイトを見た方が早い

Expressでのサーバー起動は公式サイトを参考に行いました。

https://expressjs.com/en/starter/installing.html
（公式最高！公式最高！）

「MongoDBインストールからサーバーを立ち上げまでの方法を教えてください」

それっぽい回答ですが、バージョンが古いし、必要なツールをインストールできていません。

MongoDBの最新バージョンはv6.0です。
また、Homebrew には、Xcodeコマンドラインツールが必要です。

公式に正しい方法が書いてあるので、公式を参照してください。
https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x/

React環境構築の手順を教えて

# 命令書
あなたはプロのWeb開発エンジニアです。
以下の条件で、React環境構築の手順を教えてください

# 条件
-　Reactのバージョンは18
-　ビルドツールはvite
- JavaScriptを使用

まちがっています（３回目）
質問の仕方が悪いのかもしれないので、いい感じの言い回しをご存知の方、教えて下さい🙏

Viteを使いました。
公式サイトから環境構築しました。
https://vitejs.dev/guide/

$ npm create vite@latest
✔ Project name: … frontend
✔ Select a framework: › React
✔ Select a variant: › JavaScript + SWC

 $ cd frontend
 $ npm install
 $ npm run dev
 # React環境構築完了！！

環境構築は鮮度・正確性が命

環境構築はよく詰まるポイントですし、不正確な情報が出る可能性があるため、初めから頼ると非効率ですね。
やはり、公式サイトを見るのが一番性格で正しい情報が載っています。

Dockerで環境構築

Dockerでも環境構築できるため、MongoDBのDocker設定を頼んでみました。
なお、Node.jsとReactはDockerを使うと、PCが激重になるため割愛しました。

「MongeDBのdocker-compose.ymlを作成してください」

# 命令書
あなたはプロのWeb開発エンジニアです。
以下の条件で、MongeDBのdocker-compose.ymlを作成してください

# 条件
- 公式イメージを使用
-　GUIはmongo-expressを使用
- ダミーデータを１テーブル分作成

ChatGPTの回答

いい感じのを出してくれましたね！
コードベースの方が再現性が高いのか、精度がいいです。
ダミーデータは入りませんでした。

ChatGPT回答docker-compose

docker-compose

version: '3'

services:
  mongo:
    container_name: mongo
    image: mongo:latest
    ports:
      - '27017:27017'
    volumes:
      - ./data:/data/db
      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
    restart: always

  mongo-express:
    container_name: mongo-express
    image: mongo-express:latest
    ports:
      - '8081:8081'
    environment:
      - ME_CONFIG_MONGODB_SERVER=mongo
    restart: always

細かいところを修正してdocker-compose.yml完成です！

• mongoのバージョンを6に指定
• 設定ファイルを永続化（configdb）
• mongo-express起動時にdepends_onを追加
• ルートユーザーの名前とパスワードを明示する

修正版

docker-compose.yml

version: "3.9"

services:
  mongo:
    image: mongo:6
    container_name: mongo_db
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: password
    ports:
      - 27017:27017
    volumes:
      - ./mongodb_data:/data/db
      - ./configdb:/data/configdb

  mongo-express:
    image: mongo-express:latest
    container_name: mongo_express
    restart: always
    ports:
      - 8081:8081
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: password
      ME_CONFIG_MONGODB_SERVER: mongo
    depends_on:
      - mongo

データ連携

フロント、バック、DBの環境構築が終わったので、データ連携を行います。
最低限のデータ連携として、DBデータをReactで表示するところまで実装します。

目標

• Node.jsでREST API作成
• ReactからAPIを叩いて、画面に表示
• MongoDBとNode.jsを接続
• React画面にDBデータを表示

「Node.jsでREST APIのサンプルコードを出力してください」

GET・PUT・POST・DETAILの４種類のサンプルコードを出力してくれました。
そのままコピペしても、きちんと動きました。
すばらしい！

ChatGPTの回答コード

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

let todos = [
  { id: 1, title: 'Todo 1', completed: false },
  { id: 2, title: 'Todo 2', completed: true },
];

// GET /todos
app.get('/todos', (req, res) => {
  res.json(todos);
});

// GET /todos/:id
app.get('/todos/:id', (req, res) => {
  const id = Number(req.params.id);
  const todo = todos.find((todo) => todo.id === id);
  if (!todo) {
    res.status(404).send('Todo not found');
  } else {
    res.json(todo);
  }
});

// POST /todos
app.post('/todos', (req, res) => {
  const { title } = req.body;
  const todo = { id: todos.length + 1, title, completed: false };
  todos.push(todo);
  res.json(todo);
});

// PUT /todos/:id
app.put('/todos/:id', (req, res) => {
  const id = Number(req.params.id);
  const todo = todos.find((todo) => todo.id === id);
  if (!todo) {
    res.status(404).send('Todo not found');
  } else {
    const { title, completed } = req.body;
    todo.title = title || todo.title;
    todo.completed = completed || todo.completed;
    res.json(todo);
  }
});

// DELETE /todos/:id
app.delete('/todos/:id', (req, res) => {
  const id = Number(req.params.id);
  const todoIndex = todos.findIndex((todo) => todo.id === id);
  if (todoIndex === -1) {
    res.status(404).send('Todo not found');
  } else {
    const deletedTodo = todos.splice(todoIndex, 1)[0];
    res.json(deletedTodo);
  }
});

app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});

「ReactでaxiosをつかったAPIデータ取得サンプルコードを出力してください」

すばらしい！
こちらもほぼコピぺで動くコードを出力してくれました。

動作させるにはaxiosをインストールすることが必要なので、注意です。

npm install axios

「MongoDBからデータ取得するExpressのサンプルコードを出力してください」

はい、いい感じです！！
認証情報やテーブル名を微修正したらきちんと動作しました。

ChetGPTの回答コード

const express = require('express');
const mongoose = require('mongoose');

// MongoDBへの接続
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

// データモデルの定義
const MyModel = mongoose.model('MyModel', new mongoose.Schema({
  name: String,
  age: Number,
  email: String
}));

// Expressアプリケーションの作成
const app = express();

// 全てのデータを取得するAPIエンドポイントの作成
app.get('/api/mymodels', async (req, res) => {
  try {
    const mymodels = await MyModel.find();
    res.json(mymodels);
  } catch (err) {
    console.log(err);
    res.sendStatus(500);
  }
});

// サーバーの起動
const port = 3000;
app.listen(port, () => console.log(`Server listening on port ${port}`));

なお、こちらも動作させるのにパッケージのインストールが必要です。

npm install mongoose

Reactで表示できました！

サンプルコードの出力は強い

コード出力のような、再現性のある事象は精度が高いです。
調べる手間が省けるので、どんどん使っていきたいですね！

最後に

技術選定や環境構築は情報が古いと致命傷のため、参考程度にしかならないと感じました。
また、改めて公式の情報の正確さを実感しました。

コードに関して、簡単なコードはかなり正確に出力してくれます。
こちらはぜひ積極的につかっていただくことで、業務効率に繋げられると思います！

まぁ。。。結局、ChatGPTの出力から修正する力がいるので、自分で勉強することが一番の業務効率化ですね。

参考リンク

https://medium.com/geekculture/5-chatgpt-features-to-boost-your-daily-work-404478fd70ca

（スクレイピングで業務効率化もできるらしい）
https://www.codingthesmartway.com/how-to-use-chatgpt-to-fully-automate-web-scraping/