【ChatGPTとペアプロ】 #1 アイデア出しから設計検討まで

## 概要

ChatGPTとペアプロでアプリを作るのが流行っているのでやってみました。

次のような構成を予定しています。

【ChatGPTとペアプロ】 #1 アイデア出しから設計検討まで ← いまここ
[【ChatGPTとペアプロ】 #2 設計検討からモックの作成まで](https://qiita.com/nisim/items/6691dbde53180304eab2)
【ChatGPTとペアプロ】 #3 モックの作成から詳細設計まで
【ChatGPTとペアプロ】 #4 モックの作成から仕様決定まで
【ChatGPTとペアプロ】 #5 仕様決定から開発


## 前提

ChatGPT-4を使用して次の拡張機能を有効にしています。

* WebChatGPT
* Superpower ChatGPT


## 要求定義

最近は共働きの夫婦が多いかと思いますが、仕事・家事・育児が同時並行で進んでいくので大変だと思います。その負担を解消することを今回のアプリの目的にしました。

### 洗い出し

負担といっても色々あると思うのでまずは洗い出しです。共同で管理する部分を想定して事象と原因、その解決策をいくつか列挙しました。

|事象|原因|解決策|
|:-:|:-:|:-:|
|生活用品のストックがダブる|ストックの購入が連携されていない|ストックを可視化する|
|家事の担当を忘れる|リマインドがない|設定した期日にリマインドをする|
|献立を考えるのが面倒|過去のレシピのストックがない|レパートリーを管理する|
|些細な不満が解消されない|定期的に話し合いの機会が取れていない|不満を共有して改善できる場を作成する|
|保険の管理が煩雑|会社ごとなので一元管理できないので都度調べる必要がある|一元管理する|
|お金の管理が煩雑|支払い方法や支出項目の多様性から家計簿アプリがいまいち使いにくい|必要十分な管理をする|

#### ChatGPTの活用

もう少しアイデアが欲しかったのでここでChatGPTを活用しました。

![スクリーンショット 2023-04-22 11.40.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654639/1e04483f-c6b0-1588-747a-2bb0f0f8715f.png)

出力したい形式でいくつか例を出すと意図した回答が得られやすいです👌

![スクリーンショット 2023-04-22 11.41.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654639/5aae4f75-eae8-c896-4228-52ae54898bd4.png)

「続けてください」や「go on」と言えば続きから候補を出してもらえますので発散段階であれば何度か実行してみるといいかもしれません。

![スクリーンショット 2023-04-22 11.44.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654639/f65b3af4-f0cb-279b-f42d-f38716c605b4.png)


#### ここまでのまとめ

まずは最小の機能を持ったアプリを開発したいので**不満を共有して改善できる場を作成する**ことを目的とします。

* ターゲットは共働きの夫婦
* 不満を共有して改善できることを目的としたアプリを作成する
* 追加機能を盛り込めるような前提でのアプリとする

## 要件定義

どういった機能を作ればよいか定義していきます。

まずはChatGPTで機能を洗い出します。

![screencapture-chat-openai-2023-04-22-12_06_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654639/dcf4e4b9-f32b-5cb3-a398-d7e0d37d1ae5.png)

今回要件であれば上記の機能で十分そうです。実際にどういったフローになるかも聞いてみました。

![スクリーンショット 2023-04-22 12.23.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654639/b0d9473f-137e-0fa6-40bb-eff35743a05b.png)

よさそうですね。

## 設計フェーズ

かなりざっくりした質問を投げてみました。

```
あなたは、プロのプログラミング開発者です。
ご提案いただいた機能要件を満たすWEBアプリを作成するにはどういった設計が考えられますか。フロントエンド、バックエンド、AWSクラウドインフラそれぞれ教えてください
```

#### フロントエンド

```
1. 機能設計: 要件定義で挙がった機能を実現するために、ボタンを押した際の動作やログイン時の条件など全ての実装する機能を具体的に洗い出します。
2. 使用する技術: 例えば、Vue.jsやReactなどのフレームワークを使って、コンポーネントベースの設計を行います。
3. UI/UXデザイン: ユーザーフレンドリーなインターフェースを作成し、使いやすさやアクセシビリティを考慮します。
```

#### バックエンド
```
1. 使用する技術: PythonやNode.jsなどのプログラミング言語を用いて、APIエンドポイントを作成します。例えば、FlaskやDjango、Express.jsなどのWebフレームワークを使用します。
2. データベース設計: データの保存と検索のために、適切なデータベースシステム（例：MySQL, PostgreSQL, MongoDB）を選択し、テーブル構造やインデックスを設計します。
3. 認証と認可: セキュリティを確保するために、適切な認証（例：OAuth 2.0, JWT）と認可機能を実装します。
```

#### AWSクラウドインフラ
```
1. アプリケーションデプロイメント: AWS Elastic BeanstalkやAWS Lambdaを利用して、アプリケーションをデプロイし、スケーラビリティを確保します。
2. データベース: Amazon RDSやAmazon DynamoDBを利用して、データベースを構築し、高い可用性を提供します。
3. ストレージ: Amazon S3を使用して、静的ファイルや画像などのストレージを提供します。
4. ネットワーキング: Amazon VPCとAmazon Route 53を用いて、プライベートネットワークの設定やドメイン名の設定を行います。
5. セキュリティ: AWS WAF, AWS Shield, Amazon GuardDutyなどのセキュリティサービスを利用して、アプリケーションのセキュリティを確保します。

これらの設計要素を考慮して、ご提案いただいた機能要件を満たすWEBアプリを作成すること
```

どういった設計にするかや技術要素の選定の決定打にはならないですね。。。
とりあえずフロントエンドはVue, バックエンドはPythonにしてソースコードの概要を出力してみます。

```
あなたは、プロのプログラミング開発者です。
以下の入力文と制約条件を元に、ソースコードを出力してください。

# 制約条件：
1. フロントエンドはVueを使用する
2. バックエンドはPythonを使用する
3. インフラはAWSサービスを利用する

# 入力：
・ご提案いただいた機能要件を満たすWEBアプリを作成してください

```

#### フロントエンド（Vue.js）

```
1. `src`フォルダに`components`フォルダを作成し、以下のコンポーネントを作成します。
    - `Login.vue`: ログインフォーム
    - `Register.vue`: 登録フォーム
    - `Complaints.vue`: 不満投稿リスト
    - `ComplaintForm.vue`: 不満投稿フォーム
    - `CommentForm.vue`: コメント投稿フォーム

2. `src`フォルダに`views`フォルダを作成し、以下のビューを作成します。
    - `Home.vue`: ホーム画面（ログイン後）
    - `Login.vue`: ログイン画面
    - `Register.vue`: 登録画面

3. `src`フォルダに`router`フォルダを作成し、`index.js`ファイルでルーティングを設定します。

4. `src`フォルダに`store`フォルダを作成し、Vuexストアを設定します。これにより、アプリ全体でデータや状態を管理できます。
```

#### バックエンド（Python）
```
1. PythonのWebフレームワーク（例：Flask, Django）を使用して、以下のAPIエンドポイントを作成します。
    - `/api/register`: ユーザー登録
    - `/api/login`: ユーザーログイン
    - `/api/complaints`: 不満投稿の取得・投稿
    - `/api/comments`: コメント投稿

2. データベースを設定し、ユーザー、不満投稿、コメントのテーブルを作成します。
```

#### インフラ（AWSサービス）

```
1. AWSのElastic Beanstalkを利用して、Pythonアプリケーションをデプロイします。

2. Amazon RDSを使用して、データベースを設定します。

3. AWSのRoute 53を利用して、ドメイン名を設定します。

4. Amazon S3を使用して、静的ファイル（フロントエンド）をホスティングします。

このソースコード概要は、制約条件に従ってご提案いただいた機能要件を満たすWEBアプリを作成するための基本的な構成を示しています。具体的なコードや設定は、実際の開発環境や要件に応じて調整する必要があります。
```

なんとなく実装できそうな提示はしてくれていますが、これが良い設計なのかは人間が判断する必要がありそうです。

### インフラの再検討(試行錯誤)

#### 制約条件をつける

ここでインフラ（AWSサービス）について次の制約条件をつけて再検討してもらいました。

1. マネージドサービスを中心に使用
2. コストメリットが高い
3. 簡潔なアーキテクチャである


```
あなたは、プロのAWSクラウドアーキテクトです。
以下の入力文と制約条件を元に、AWSクラウドインフラの設計を出力してください。

# 制約条件：
1. マネージドサービスを中心に使用
2. コストメリットが高い
3. 簡潔なアーキテクチャである

# 入力：
・ご提案いただいたAWSクラウドインフラについて再検討してください。

# 出力：
```

回答

```
制約条件を考慮して、以下のAWSクラウドインフラ設計を提案します。

1. アプリケーションデプロイメント: AWS Elastic Beanstalkを利用して、アプリケーションをデプロイします。これにより、マネージドサービスで簡単にスケーラビリティを確保できます。

2. データベース: Amazon RDSを使用して、データベースを構築します。マネージドサービスであるため、運用負荷が低く、自動バックアップやパッチ適用が可能です。コストメリットが高いインスタンスタイプを選択します。

3. ストレージ: Amazon S3を利用して、静的ファイルや画像などのストレージを提供します。S3はコスト効率が良く、高い耐久性と可用性を持ちます。

4. ネットワーキング: Amazon VPCを用いて、プライベートネットワークを設定し、AWSリソースにアクセス制御を適用します。Amazon Route 53を使用して、ドメイン名の設定を行います。

5. セキュリティ: AWS WAFを利用して、アプリケーションのセキュリティを確保します。また、Amazon GuardDutyを使用して、ネットワークやアカウントのセキュリティを監視し、潜在的な脅威を検出します。

6. コスト最適化: Amazon CloudWatchとAWS Trusted Advisorを使用して、リソースの監視と最適化を行います。これにより、コストの無駄を削減し、効率的な運用が可能になります。

この設計は、マネージドサービスを中心に使用し、コストメリットが高く、簡潔なアーキテクチャで構成されています。ご提案いただいたAWSクラウドインフラについて再検討して提案しました。
```

どういう構成か念の為、アーキテクチャ図も書いてもらいましょう。

```
ご提案いただいたAWSクラウドインフラのアーキテクチャ図を書いてください。
```

![スクリーンショット 2023-04-22 12.58.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654639/08eb997a-ae7c-8ac6-65ad-252cd6461e43.png)

データベースにRDSを使っていますがDynamoDBに置き換えた方がコストメリットがありそうなので確認してみました。

```
ご提案いただいたAWSクラウドインフラのRDSをDynamoDBに置き換えることでコストメリットが得られる可能性がありますか。また、その場合の懸念点があれば教えてください。
```

```
DynamoDBに置き換えることで、コストメリットが得られる可能性があります。DynamoDBは、キー・バリュー型のNoSQLデータベースで、スケーラビリティとパフォーマンスの面で優れています。RDSと比較して、以下の点でコストメリットが生まれる場合があります。

1. 容量: DynamoDBはオンデマンド容量モードを利用でき、読み取り/書き込みキャパシティユニットを指定することなく、使用する分だけ料金を支払うことができます。
2. 管理: DynamoDBはフルマネージドサービスであり、パッチ適用やバックアップなどの管理が不要です。これにより、運用コストが削減されます。

ただし、RDSからDynamoDBに置き換える際には以下の懸念点も考慮する必要があります。

1. データモデルの変更: RDSはリレーショナルデータベースであり、DynamoDBはNoSQLデータベースです。そのため、データモデルやクエリ方法を変更する必要があります。これは、アプリケーションの変更や開発コストの増加を招く可能性があります。
2. クエリ機能: RDSではSQLを使ってデータを操作できますが、DynamoDBではSQLが使えません。そのため、複雑なクエリやジョインなどの機能が制限されます。

コストメリットを追求する際には、データモデルやクエリ機能の制約に対処できるかどうかを慎重に検討する必要があります。データモデルやアプリケーションの要件に応じて、適切なデータベースサービスを選択してください。
```

得られた回答の妥当性がわからない以上、業務経験がないサービスについて適切なアドバイスを期待するのは難しそうですね。なお、挙がっている懸念点は既存アプリに対するものなので今回は関係ないものとします。


次に制約条件にアーキテクチャの条件`サーバーレスアーキテクチャである`を加えてみます。

```
あなたは、プロのAWSクラウドアーキテクトです。
以下の入力文と制約条件を元に、AWSクラウドインフラの設計を出力してください。

# 制約条件：
1. マネージドサービスを中心に使用
2. コストメリットが高い
3. 簡潔なアーキテクチャである
4. サーバーレスアーキテクチャである

# 入力：
・ご提案いただいたAWSクラウドインフラについて再検討してください。

# 出力：

```

```
以下のAWSクラウドインフラの設計を提案します。

1. フロントエンド: Amazon S3とAmazon CloudFrontを使用して、静的なWebコンテンツをホストし、グローバルなコンテンツ配信を行います。

2. API: Amazon API Gatewayを使用して、RESTful APIを提供します。これにより、バックエンドサービスとフロントエンドの連携が容易になります。

3. バックエンド処理: AWS Lambdaを使用して、サーバーレスでバックエンド処理を実行します。イベント駆動型のアーキテクチャで、リクエストに応じて自動的にスケーリングします。これにより、コスト効率が向上し、サーバーの管理が不要になります。

4. データベース: Amazon DynamoDBを使用して、高いスケーラビリティとパフォーマンスを持つNoSQLデータベースを提供します。オンデマンド容量モードを利用することで、コスト効率を向上させることができます。

5. 認証・認可: Amazon Cognitoを使用して、ユーザー管理と認証を行います。これにより、独自の認証システムを開発・管理する手間が省けます。

6. モニタリング: Amazon CloudWatchを使用して、リソースとアプリケーションの監視・アラートを行います。これにより、障害検知や性能分析が容易になります。

このアーキテクチャは、マネージドサービスを中心に使用し、サーバーレスでコストメリットが高く、簡潔な設計です。それぞれの要件に応じて、必要に応じてサービスを追加・変更してください。
```

図の出力も依頼します。

```
ご提案いただいたAWSクラウドインフラのフロー図をテキストベースで書いてください。
```

![スクリーンショット 2023-04-22 13.13.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1654639/be489374-d3ee-c4f8-9bdf-0cde30a765ed.png)

#### ここまでのまとめ

要件定義で必要な機能の洗い出しについては今回程度のアプリであればChatGPTで十分よさそうでした。

一方で制約を考慮した設計比較や技術選定においては指示をより具体的にする必要がありそうです。何も知らない人がChatGPTのみを使って設計する場合は工夫する必要がありそうです。

## 今回はここまで

今回はアプリの概要と技術要素の決定まで実施しました。次回はアプリ画面のモックを作成しようと思います。