背景
GitHub Copilot は素晴らしくて。コードからドキュメントを作る品質が、ベースモデルの改善と共に本当に充実していてます。
この「ドキュメントを書く」という作業。図版の作成も込みで、とっても大事なんです。一人でアプリを書いているわけじゃないですし、それが何なのかを、コードを読まなくても解説してくれているわけですし。でも、メンドクサイ😊。乱暴ですけどドキュメントとコードと2倍のタスク量と言ってもいいですよね。
で、だったら猶更
「GitHub Copilot だけでいいじゃん!」
といいたいのですが。
それは、
- 要件定義などをして
- テストコードを書いてから
- コードを書いている
で
- 後から、単体テストのドキュメントなどを必要であれば書いている
わけですよね。
そして、別のBlog Postでも言及していますが。Prompt時代に管理したいのは、ビジネスモデルやアプリケーションのモデルであって、コードそのものは、実装の一形態に過ぎないと私は思っています。
大事なんですよ。コード😊
でも、もっと大事なのは、xxxモデルだと思います。概念部分ですね。
今回は、本来あるべきビジネスの手順にそって、単体テストをやってみます。
チャレンジな部分
私。最近、データ分析や機械学習、そしてPromptばかり。つまりバックエンド系の画面が簡素なアプリのコードしか書いていませんでした。ですが、やっぱり画面は大事ですよね。
数あるUI系のフレームワークの中で。雑にですが、Vue.JSにチャレンジしてみようと思います。いろいろとやりながら分からない部分も見ていこうと思います!
ChatGPTでのPrompt結果
いつもの通り、共有しますね。
Promptの文字列
こちらから、使ってください。適時更新していきます。
流れ
1. 業務要件のデータ準備
業務要件のデータを作ります。チャットしながら。ダミーですけどね。
勿論、営業などの皆さんがコンサルテーションをしてくれて、ある程度のヒアリング状況などがあれば。そのドキュメントを参考データとして扱います。
ここでは、参考データを作っている一部のスクショを貼っておきます。
ちなみに、ユースケースは、10個も作ってくれました。僅か数分で😊
機能要件ですね。
このBlogでは、「レストラン検索と予約」の画面部分に焦点を当てます。
非機能要件ですね。
2. 単体テスト仕様書作成
繰り返しですが。レストラン検索と予約部分だけを作ります。
業務要件のデータの準備を誰かがしてくれれば。この単体テスト仕様書の作成からは。バラバラに実行が出来るという事です。複数人でもいいですし。ブラウザーを複数起動してもいいですし。APIを複数呼び出してもいいですしね。
スクショは、全部じゃなくて、一部分だけにしてます。
これ。マジ楽チン!
ドラフトあるいは下書きとして十二分じゃないですか! この手順部分なんて、「見たらわかるんじゃーねーーの!」と言いたくなりますが。ドキュメントとして欲しいという事もあるでしょうから...
3. テストデータの作成
単体テストに沿ったデータも作成してもらいます。あくまでドラフトですけどね。やっぱり十二分な感じです。嬉しい😊
4. プロトタイプのアプリのコードとテストコードの両方を作成。併せて実行手順書も。
欲張るのは良くないですね...なるべく1度に少ないタスクを依頼した方がいいです😅
ま、やっちゃったものはしょうがない。
結構、長文のコードを作ってくれています。実は😊
ここで、自己改善を促すPromptでお願いをしてみます。
マジ、すげぇ。
私はVue.JSは、本当に勉強中の初心者なんです。いろいろと知らないことを指摘してくれるので、学習の機会にもなりますね。合理的なのかどうか調べないといけませんしね。初学者だから。
大量にコードを書いてくれたんですが。
どこにどんなファイルを置けばいいのかを知らないので。なにせ、初学者ですから。ファイル構造を作ってもらいました。
なんと、説明もしてくれる。
なるへそー
「CSSの更新（App.vueや各コンポーネントに適用）」って、どこに書いたらいいのか、よくわかりません😅
分からない事は、ChatGPTに聞いてみましょう。勿論、公式ドキュメントで最終確認です。動かなかったら😊
なるほどね! 理解できました。
アプリケーションの実行手順書も作ってもらいました。
単体テストの実行手順書も。
5. 実行
さて、実行してみましょう。
勿論、Visual Studio CodeのTerminalからです。
5.1. アプリケーションの実行
まずは、アプリケーションそのものから。
アクセスします。
一部挙動は変ですけど。動いてますね!
5.1. 単体テストの実行
それでは、単体テストも! こっちが本番😊というか、今回の目的ですね。
一部、Exceptionが出ちゃいましたが。でも、動いていますね!
Exceptionは、直せばいいわけで。
割と思った通り動いてくれたと思います。Vue.JS初心者としては大満足です😍
リアルな話
こんな一発である程度の結果にはなりません。Promptは本当に試行錯誤の繰り返しですね。
単体テストはある意味繰り返し幾度もやるタスクです。なので、ある程度Promptの精度を上げておけば。あとは都度微調整をすればいいわけです。「チャット」ですから、使っているSoftware Engineerの方が自分で出来ますからね。
メッチャ試行錯誤しています😅
例えば、初期にはこんな実行エラーが出ました。
で、これ勿論ネットで検索もしてみたんですけどね。GitHub Copilot Chat君が、一発でソースコードをみて、対応策を作ってくれました!
マジ強ぇーーー
環境問題といいますか。モジュール、パッケージのバージョン不整合問題。そして、ChatGPTの作成するコードは、バージョン指定をしないと古い事が多いみたいで。これはデータを取っていませんけどね。
GitHub Copilot君に、全部直してもらいました。最初のころにトライアルだと。
で、これを毎回やるんだったらPromptで最初からバージョン指定して、どうなるかなーと思って。冒頭のPromptになったんです。この現象には遭遇しなくなりました。
でも、今後もモジュールなどのバージョンアップは短期間で行われることを加味すると。
手元にモジュールなどのソースコードを構成した環境に簡単にアクセスできるGitHub Copilotでの仕上げは。今後も覚えておいた方がよさそうですね。
まとめ
数日の試行錯誤の結果を皆さんに共有しました。これで、一つのアプリの動く単体テストのコード作成と実行までは、10分程度でイケる可能性が高いです。
ポイントですけど:
- 利用ツールやフレームワークのバージョンを公式ドキュメントで確認して、指定する
- package.json や requirement.txt などは、公式があればそれを使うべし
- そのドメイン (領域) に長けたモデルが使えるのであれば、そちら優先する。モデルの得意・不得意を理解する
- ソフトウェアエンジニアリング: GitHub Copilot – でもビジネスは苦手
そして...
手順書に注目してもらいたいんです。
開発したアプリケーションの操作手順書というか。利用のドキュメントというか。必要な場合にも役に立ちそうです。
開発したAPIなどの開発者向けのハンズオンというか。チュートリアルというか。同じく、役に立ちそうです。
更に。
私はこの数日間のPromptの実行と、作成されたコードを実行するコトで。入口ではありますが、Vue.JSの世界を知ることができました。学びの機会にもしたいですね。Promptでの各種コード作成を😊