【ChatGPT Hack】 Prompt のみでVue.JSのUI部分の単体テストを実行してみた

# 背景

`GitHub Copilot` は素晴らしくて。コードからドキュメントを作る品質が、ベースモデルの改善と共に本当に充実していてます。
この「ドキュメントを書く」という作業。図版の作成も込みで、とっても大事なんです。一人でアプリを書いているわけじゃないですし、それが何なのかを、コードを読まなくても解説してくれているわけですし。でも、**メンドクサイ😊**。乱暴ですけど**ドキュメントとコードと2倍のタスク量**と言ってもいいですよね。

で、だったら猶更

**「GitHub Copilot だけでいいじゃん!」**

といいたいのですが。

それは、

- 要件定義などをして
- テストコードを書いてから
- コードを書いている

で

- 後から、単体テストのドキュメントなどを必要であれば書いている

わけですよね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/96253090-a0e1-e484-5800-7f0d82ef6eed.png)


そして、別のBlog Postでも言及していますが。Prompt時代に管理したいのは、ビジネスモデルやアプリケーションのモデルであって、コードそのものは、実装の一形態に過ぎないと私は思っています。

大事なんですよ。コード😊

でも、もっと大事なのは、**xxxモデル**だと思います。概念部分ですね。

今回は、本来あるべきビジネスの手順にそって、単体テストをやってみます。

# チャレンジな部分

私。最近、データ分析や機械学習、そしてPromptばかり。つまりバックエンド系の画面が簡素なアプリのコードしか書いていませんでした。ですが、やっぱり画面は大事ですよね。

数あるUI系のフレームワークの中で。雑にですが、`Vue.JS`にチャレンジしてみようと思います。いろいろとやりながら分からない部分も見ていこうと思います!

# ChatGPTでのPrompt結果

いつもの通り、共有しますね。

https://chatgpt.com/share/c03b06a0-7dc8-4095-94e5-682f218e9918

# Promptの文字列

こちらから、使ってください。適時更新していきます。

https://github.com/dahatake/ChatGPT-Prompt-Sample-Japanese/blob/main/Software%20Enginner/%E5%8D%98%E4%BD%93%E3%83%86%E3%82%B9%E3%83%88.md

# 流れ

## 1. 業務要件のデータ準備

業務要件のデータを**作り**ます。チャットしながら。ダミーですけどね。
勿論、営業などの皆さんがコンサルテーションをしてくれて、ある程度のヒアリング状況などがあれば。そのドキュメントを参考データとして扱います。

ここでは、参考データを作っている一部のスクショを貼っておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/1bcbfb41-7b9e-0309-77a5-963b8303e724.png)


ちなみに、`ユースケース`は、**10個も**作ってくれました。僅か数分で😊

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/f3aea579-d07b-6cac-6696-316b1d13a10a.png)

機能要件ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/438e2c2d-7f56-637c-55b8-c0fb28ab2b00.png)

このBlogでは、「レストラン検索と予約」の**画面部分**に焦点を当てます。

非機能要件ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/8ac03a3e-13c2-948c-c5f7-e44dc0b653e6.png)

## 2. 単体テスト仕様書作成

繰り返しですが。**レストラン検索と予約**部分だけを作ります。

業務要件のデータの準備を誰かがしてくれれば。この単体テスト仕様書の作成からは。バラバラに実行が出来るという事です。複数人でもいいですし。ブラウザーを複数起動してもいいですし。APIを複数呼び出してもいいですしね。

スクショは、全部じゃなくて、一部分だけにしてます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/20509a8e-9493-4722-deba-9a15442e0423.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/398c3365-7be8-ffeb-4910-513d92fbadf3.png)

これ。マジ楽チン!

**ドラフト**あるいは**下書き**として十二分じゃないですか! この`手順`部分なんて、「見たらわかるんじゃーねーーの!」と言いたくなりますが。ドキュメントとして欲しいという事もあるでしょうから...


## 3. テストデータの作成

単体テストに沿ったデータも作成してもらいます。あくまで**ドラフト**ですけどね。やっぱり十二分な感じです。嬉しい😊

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/58163728-5343-79de-62fc-f5b514044d16.png)

## 4. プロトタイプのアプリのコードとテストコードの両方を作成。併せて実行手順書も。

欲張るのは良くないですね...なるべく1度に少ないタスクを依頼した方がいいです😅
ま、やっちゃったものはしょうがない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/83cd0ddc-d267-7b31-37ab-7b8d56a60559.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/629fdd75-59c1-9bdf-2ed4-7c421da94aa8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/637510a2-0b91-2939-e9e4-c4d9900ac272.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/e644aebf-a4c6-e9df-5ec9-6e92f61e8298.png)

結構、長文のコードを作ってくれています。実は😊

ここで、自己改善を促すPromptでお願いをしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/16243fe9-f145-dfe9-eff1-7570935ba230.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/18cb9d1a-12f2-bc1e-41cc-21962baa8586.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/8606ee43-8c87-cc5f-9be4-daa5b6590793.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/3eeb6a21-3f39-c794-436a-2563443a6a94.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/9e598aeb-f6da-4e30-5b7a-7c412f16cb87.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/2a1b82d2-2a9f-6401-dab8-bf5b0d94ec77.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/9d3ac026-dfe1-f9c5-92e4-7ef250978da5.png)

マジ、すげぇ。

私はVue.JSは、本当に勉強中の初心者なんです。いろいろと知らないことを指摘してくれるので、**学習の機会**にもなりますね。合理的なのかどうか調べないといけませんしね。初学者だから。

大量にコードを書いてくれたんですが。

どこにどんなファイルを置けばいいのかを知らないので。なにせ、初学者ですから。`ファイル構造`を作ってもらいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/f42f0ea8-ed60-ddce-4f84-04b202027195.png)

なんと、説明もしてくれる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/9f68928c-8431-7bd3-4839-b5478d13f69b.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/331f6633-7eef-c5b6-cc2e-5a1d37e8dff2.png)


なるへそー

「CSSの更新（App.vueや各コンポーネントに適用）」って、どこに書いたらいいのか、よくわかりません😅

分からない事は、ChatGPTに聞いてみましょう。勿論、公式ドキュメントで最終確認です。動かなかったら😊

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/96e21cf7-0380-c1be-b066-cd26b691d02b.png)

なるほどね! 理解できました。

アプリケーションの実行手順書も作ってもらいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/09f76c51-85f9-a2f0-e458-060a97b6c5c1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/3eb2ee2f-5527-b461-6dca-59fc43db0b51.png)

単体テストの実行手順書も。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/bbc12e05-8d3b-8334-8090-15a9b8c9d799.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/2ecc89df-a697-ffbd-3a74-0abe0bfea43b.png)

## 5. 実行

さて、実行してみましょう。

勿論、Visual Studio CodeのTerminalからです。

### 5.1. アプリケーションの実行

まずは、アプリケーションそのものから。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/e16595f7-b734-c802-0198-56723484480c.png)

アクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/5a039672-0a78-26e7-b5f7-e3bc88391068.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/63bbdf69-180f-6535-82db-849f3bc08ae0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/ca304e42-768f-79a3-daf4-59efd284cced.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/9e69af9d-6ff3-543d-4333-64537768e1b4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/9e538873-a3bb-e6e4-a94a-61a74f4290b3.png)

一部挙動は変ですけど。動いてますね!

### 5.1. 単体テストの実行

それでは、単体テストも! こっちが本番😊というか、今回の目的ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/c000b97d-4633-eb1e-3b72-f7609df223a6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/f7ad89e5-632e-3911-6f16-50e813bd0f2f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/043fcbde-66e9-e380-4f00-5fc258f75455.png)

一部、Exceptionが出ちゃいましたが。でも、動いていますね!
Exceptionは、直せばいいわけで。

割と思った通り動いてくれたと思います。Vue.JS初心者としては大満足です😍

# リアルな話

こんな**一発である程度の結果にはなりません**。Promptは本当に試行錯誤の繰り返しですね。

単体テストはある意味繰り返し幾度もやるタスクです。なので、ある程度Promptの精度を上げておけば。あとは都度微調整をすればいいわけです。「チャット」ですから、使っているSoftware Engineerの方が自分で出来ますからね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/e6d74130-ead7-5686-cc43-ea2eecba4e75.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/6e860a43-73e8-be7e-4a3f-962d31bcde80.png)

メッチャ試行錯誤しています😅

例えば、初期にはこんな実行エラーが出ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/d29b77a8-7687-19a0-c504-4cc175d16132.png)

で、これ勿論ネットで検索もしてみたんですけどね。`GitHub Copilot Chat`君が、一発でソースコードをみて、対応策を作ってくれました!

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/920b21ca-b5db-c7ac-9143-0a5e5e804f8e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/e8726e95-a0e6-14ca-580d-4f8c98a0f4da.png)

マジ強ぇーーー

環境問題といいますか。モジュール、パッケージのバージョン不整合問題。そして、ChatGPTの作成するコードは、バージョン指定をしないと古い事が多いみたいで。これはデータを取っていませんけどね。

`GitHub Copilot`君に、全部直してもらいました。最初のころにトライアルだと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/7ecd0826-65f0-6496-9577-eead6261522b.png)

で、これを毎回やるんだったらPromptで最初からバージョン指定して、どうなるかなーと思って。冒頭のPromptになったんです。この現象には遭遇しなくなりました。
でも、今後も**モジュールなどのバージョンアップは短期間で行われる**ことを加味すると。
手元にモジュールなどのソースコードを構成した環境に簡単にアクセスできるGitHub Copilotでの**仕上げ**は。今後も覚えておいた方がよさそうですね。

# まとめ

数日の試行錯誤の結果を皆さんに共有しました。これで、一つのアプリの動く単体テストのコード作成と実行までは、10分程度でイケる可能性が高いです。

ポイントですけど:

- 利用ツールやフレームワークのバージョンを公式ドキュメントで確認して、指定する
    - package.json や requirement.txt などは、公式があればそれを使うべし
- そのドメイン (領域) に長けたモデルが使えるのであれば、そちら優先する。モデルの得意・不得意を理解する
    - ソフトウェアエンジニアリング: GitHub Copilot – でもビジネスは苦手

そして...

**手順書**に注目してもらいたいんです。

開発したアプリケーションの操作手順書というか。利用のドキュメントというか。必要な場合にも役に立ちそうです。
開発したAPIなどの開発者向けのハンズオンというか。チュートリアルというか。同じく、役に立ちそうです。

更に。

私はこの数日間のPromptの実行と、作成されたコードを実行するコトで。入口ではありますが、Vue.JSの世界を知ることができました。**学びの機会**にもしたいですね。Promptでの各種コード作成を😊