サマリ

どういう論文？

ChatGPTを使ったWebアプリケーション開発の実験報告。

先行研究と比べてどこがすごい？

実際のアーキテクチャと技術でエンドツーエンド開発を実現。

技術や方法のポイントはどこ？

ChatGPTのみを利用した開発プロセスの探求。

どうやって有効と検証した？

実際の開発プロセスと手動実装との比較分析。

議論の内容は？

ChatGPTの有効利用には開発者の経験と適切なプロンプト生成が鍵。

アブスト- GPT要約

ChatGPTを用いたエンドツーエンドのソフトウェア構築：経験報告

主要機能

• ChatGPTによるコード生成
• 新機能実装
• バグ修正
• ユーザーインターフェースの改善

利点

• 手動実装と比較して実用的なアプリ構築可能
• 開発プロセスの洞察提供
• トップダウンとボトムアップのアプローチ探索

実験結果

• 全てのユーザーストーリーがChatGPTで実装
• コード品質にバリエーション
• 開発者の経験が重要

評価と結論

ChatGPTは、適切な知識とプロンプト生成能力を持つ開発者にとって、エンドツーエンドのソフトウェア開発において実用的なツールであると結論付けられる。

補足

論文で分類されたプロンプトのカテゴリは以下の表にまとめられます。

和訳

2 Methodology

2.1 Reference Implementation

この文章は、ChatGPTバージョン4の使用評価のための参照実装に関するものです。まず、経験豊富なソフトウェア開発者によって、appForumと呼ばれるシンプルなQ&Aフォーラムを一から実装します。このアプローチの理由は、ChatGPTの訓練段階でOpenAIによって使用された可能性のあるアプリケーションの評価を避けるためです。このアプリは、ChatGPTによって生成されたコードを評価するための基準実装として使用します。基本的に、appForumは6つのユーザーストーリーを実装する必要があります：

• US1: ユーザーとして、フォーラムに登録したい。
• US2: ユーザーとして、フォーラムにログインしたい。
• US3: ユーザーとして、質問を作成したい。
• US4: ユーザーとして、質問を削除したい。
• US5: ユーザーとして、質問に回答したい。
• US6: ユーザーとして、回答を削除したい。

バックエンドでは、実装にはTypescript（プログラミング言語）、Node.jsとExpressJS（サーバーランタイム）、SQLite（リレーショナルデータベース）の使用が定義されています。フロントエンドでは、Vue.jsとViteJS（ウェブフレームワーク）およびTypescriptが使用されるべきです。これらの技術はソフトウェア開発コミュニティで広く使用され、高く評価されており、現代のウェブアプリケーションを構築するための魅力的な選択肢となっています。合計で、最初の著者によって実装されたバックエンドは572行のコード、3つのクラス、5つのファイルを持っています。リレーショナルデータベースには3つのテーブル（tb user、tb answer、およびtb question）があります。フロントエンドには825行のコード、11のファイル、6つのVue.jsコンポーネント、および4つの画面があります。

2.2 Participants

このセクションでは、ChatGPTを使用して参照システムを再実装するために、3人の開発者が研究に参加したことが述べられています。

参加者P1: この参加者は、ソフトウェア開発の経験が23年あります。彼は経験豊かな開発者であり、前の項で説明された参照実装の責任者でもあります。したがって、P1はChatGPTの評価において「最も優れた開発者」を代表し、以前に実装したアプリケーションのコードをChatGPTを使って生成するよう求められています。P1はAIツールに、参照実装で手動で作成したコードに似たコードを生成させるのに最適な立場にあります。

参加者P2とP3: P2はコンピュータサイエンスの修士課程の学生で、ソフトウェア開発の経験が2年あります。P3は4年生の学部生で、以前の専門的なソフトウェア開発経験はありません。

2.3 計画会議: この会議では、最初の著者がP2とP3にappForumの機能、ユーザーストーリー、スクリーンショットを提示しました。その後、彼らに参照実装に可能な限り近いアプリケーションを生成するためにChatGPTを使用するよう指示しました。P2とP3は参照実装のコードにアクセスできませんでした。つまり、彼らは同一のアプリを実装するためにChatGPTのみに依存するよう指示されました。

この研究では、ChatGPTのサポートで開発されるアプリケーションのソフトウェア開発経験と知識の点で、多様な参加者を募集しようとしました。また、参加者3人はChatGPTの経験が限られていることにも言及されており、これは新しい技術であるため予想されます。特に、彼らはこれまでにChatGPTを使用して完全なソフトウェアアプリケーションを生成した経験はありません。

2.4 評価会議: ChatGPTを個別に使用して参照システムを実装した後、3人の参加者はAIツールを使用して得られた結果を議論し評価するために一連の会議を行いました。これらの会議では、彼らはChatGPTとの対話に使用したプロンプトや生成されたコードの実行と議論を行いました。また、これらの会議で、研究で使用されたプロンプトの以下の分類を行いました：

• 初期プロンプト：重要な機能要件と非機能要件を説明するプロンプト、プロジェクトの設定や必要なフレームワークのインストールに関するプロンプト。
• 機能プロンプト：プロジェクトの機能の実装を要求するプロンプト、生成されたコードによって正しく実装されていない新しい振る舞いを要求するプロンプト。
• バグ修正プロンプト：ChatGPTによって生成されたコードのバグや誤った振る舞いを修正するためのプロンプト。
• レイアウトプロンプト：ボタン、テーブル、テキストボックスなどのフロントエンド要素のスタイリングを、通常はCSSクラスを実装することによって行うプロンプト。
• その他のプロンプト：開発環境の設定の調整を要求するなど、上記のカテゴリに当てはまらないその他のプロンプト。これには、開発ツールのバージョンを変更することなどが含まれます。
• この研究中、参加者はChatGPTが最初に提供した回答に欠けていたコードの一部を要求するプロンプトも使用しました。これらは非常に単純なプロンプトであるため、研究で報告し数えることはありません。実際、ChatGPTの最新バージョンでは、継続プロンプトの必要性を排除するためにツールのインターフェースに「Continue Generating」ボタンが導入されたため、これらのプロンプトはもはや必要ありません。

3 Results

このセクションでは、各参加者によって達成された結果を提示し、説明します。

3.1 Results by Participant #1

表1は、P1によって作成された65のプロンプトの分類を示しています。

P1は、プロンプトを作成するためにトップダウンアプローチを採用しました。そのため、彼はアプリに採用されるユーザーストーリーと技術を説明するために、以下のような初期（かつ非常に一般的な）プロンプトを使用しました。

prompt:
I need to build a Web application
in TypeScript with the following programming technologies:
vue@latest, Express version 4, and SQLlite3 database. 
The backend should follow a stateful architecture
 (e.g., user ids should be stored in sessions). The frontend should use 
the Bootstrap library. 
The app is a simple question and answer forum, 
which should implement the following user stories:
* As a user, I would like to register on the forum. * As a user, I would like to login on the forum.
* As a user, I would like to create a question.
* As a user, I would like to delete a question.
* As a user, I would like to answer a question. * As a user, I would like to delete an answer.

和訳
以下のプログラミング技術で
TypeScriptでWebアプリケーションを構築する必要があります：
vue@latest、Expressバージョン4、SQLlite3データベース。
バックエンドはステートフルアーキテクチャに従う必要があります。
 (バックエンドはステートフルアーキテクチャに従うこと。）
フロントエンドは 
Bootstrapライブラリを使うこと。
アプリはシンプルな質問と回答のフォーラムです、 
以下のユーザーストーリーを実装する必要があります：
* ユーザーとして、フォーラムに登録したい。* ユーザーとして、フォーラムにログインしたい。
* ユーザーとして、質問を作成したい。
* ユーザーとして、質問を削除したいです。
* ユーザーとして、質問に回答したい。* ユーザーとして、回答を削除したいです。

初期プロンプトで6つのユーザーストーリーをリストアップしても、P1はChatGPTによって生成されたコードでこれらのストーリーがどのように実装されたかを明確化し、より良く定義するために26のプロンプトを使用する必要がありました。以下のプロンプトのように：

Please, create a new page such that the user can view the answers for
a selected question. In the main page,
add a “View Answers” button that will then present this new page.

和訳
ユーザーが選択した質問の答えを見ることができるような新しいページを作成してください。
新しいページを作成してください。メインページに
回答を見る」ボタンを追加してください。

以下の例で説明されているように、特定の質問に対する回答があるページ（Answers.vue）で、P1は新しい回答を登録するための機能プロンプト（以下の最初のプロンプト）、欠けていたユーザーストーリーを実装するためのプロンプト（2番目のプロンプト）、そして欠けていた情報、つまり各質問に回答したユーザーの名前を含めるためのプロンプト（3番目のプロンプト）を練り上げる必要がありました。

4 Lessons Learned

このセクションでは、実験を実施した後の主要な発見と学んだ教訓について議論しています。

開発者の技術習熟度の重要性:

ターゲットシステムで使用される技術とフレームワークにおける開発者の習熟度の重要性が明らかになりました。例えば、提案されたアプリケーションを成功裏に完成させた最初の2人の参加者は、Web開発と関連技術およびフレームワークに精通していました。その結果、彼らは経験を活かして、ツールによって生成されたコードのバグを修正するためにChatGPTをより簡単に導くプロンプトを作成することができました。 機能プロンプトの作成アプローチ:

参照アプリケーションの実装を終えた参加者（P1とP2）は、機能プロンプトを作成するために2つのアプローチを使用しました。

• トップダウンアプローチ：P1が使用したこのアプローチでは、初期プロンプトでアプリケーションによって実装されるべきすべての要件（ユーザーストーリー）を文書化し、その後、これらの要件に対応するコードを生成するようにChatGPTに指示します。
• ボトムアップアプローチ：P2が使用したこのアプローチでは、初期プロンプトからシステムを機能ごとに構築するようにChatGPTに要求します。例えば、P2が最初に提案したプロンプトはログイン画面の作成のみを要求します。さらに、各機能の実装は、フロントエンド（最初のステップ）とバックエンド（2番目のステップ）の実装という2つのステップに分割されます。

コード品質:

参加者は一般的に、ChatGPTによって生成されたコードは理解しやすく保守しやすいと感じました。ただし、P1は、ツールが異なる標準とイディオムを使用してコードを生成することを観察しました。

ユーザーインターフェース:

3人の参加者によれば、ChatGPTを使用する際の主な困難の1つは、生成されたコードをローカルプロジェクトの対応するファイルやフォルダにコピー＆ペーストするために必要な手動作業です。例えば、最初のプロンプトの後、P1は彼のローカルマシン上の9つのフォルダに分散している16のファイルに手動でコードをコピー＆ペーストする必要がありました。

これらの教訓は、ChatGPTをソフトウェア開発プロセスに統合する際の重要な考慮事項を提供します。特に、開発者の技術的習熟度や、問題の明確化とプロンプトの作成スタイルが、ChatGPTの効果的な使用において重要な役割を果たすことが示されています。

5 Threats to Validity

このセクションでは、前のセクションで報告された結果の妥当性に関する3つの主な脅威について議論しています。

• 参照アプリケーションの代表性: 研究で使用された参照アプリケーション（質疑応答フォーラム）は、ソフトウェア開発者によって一から構築されるシステムの全体を代表していない可能性があります。しかし、一般的なアーキテクチャ（ウェブベースで、フロントエンドとバックエンドのコンポーネントを持つ）をフォローし、TypeScript、Vue.js、SQLiteなどの人気のある技術を使用するよく知られたアプリケーションを選択しました。
• 開発者の代表性: 参照アプリケーションのコードは、3人の開発者によって作成されたプロンプトを使ってChatGPTによって生成されました。したがって、これらの参加者は、ChatGPTを使用してエンドツーエンドのソフトウェアシステムを構築しようとする開発者の全体を代表していないかもしれません。ただし、ソフトウェア開発における経験レベルが異なる多様なプロファイルの開発者（23年、3年、学部生）を選択しました。
• 評価の偏り: ChatGPTによって生成されたコードの評価は、23年のソフトウェア開発経験を持つ論文の第一著者によって調整されました。一方で、この評価は偏見や主観的な見解を受ける可能性があります。他方で、この問題を緩和するために、他の2人の研究参加者および論文の2人の著者によって監視され、検証されました。

これらの脅威は、研究の結果の解釈に注意を払う際に考慮されるべき重要な点です。

6 Related Work

このセクションでは、研究に関連する最近の論文について議論しています。

ソフトウェア構築:

• マイクロソフトリサーチ、GitHub、MITの研究者が、JavaScriptでHTTPサーバーを実装するよう依頼されたプロフェッショナルな開発者を対象に実施した実験で、GitHub Copilotにアクセスしたグループが提案されたタスクを55.8%速く完了できたと報告しています。
• LeとZhangは、ログファイルのパーサーを自動的に実装するためのChatGPTの使用を評価しました。データセットには数千のログファイルが含まれ、著者はChatGPTが71%の精度を達成したと報告しています。
• Whiteらは、システム設計から実装、保守に至るまでの幅広いソフトウェアエンジニアリング問題を解決するための13のプロンプトパターンを説明しています。

ソフトウェアメンテナンスとテスト:

• Sobaniらは、QuixBugsデータセットを使用してChatGPTのバグ修正のパフォーマンスを評価し、他のアプローチよりもかなり優れていると結論付けています。
• Siddiqらは、ChatGPTを使用したユニットテストの実装に関してはあまり前向きではない結果を報告しています。最初のデータセットでは、自動生成されたテストのステートメントカバレッジは良好でしたが、2番目のデータセットでは結果が悪化しました。
• Asare、Nagappan、Asokanは、GitHub Copilotによって生成されたコードが開発者によって書かれたコードと同じセキュリティの欠陥を持っているかどうかを評価し、Copilotは33%のケースで既存の脆弱性を複製していると結論付けています。

7 Conclusion

ChatGPTを使用して、アーキテクチャとプログラミング技術の面で現実世界のシステムに非常に近いWebアプリケーションを構築しました。異なる背景と経験レベルを持つ3人のソフトウェア開発者が、システムのコードを実装するために完全にChatGPTに依存しました。彼らの経験に基づき、ソフトウェアアプリをグリーンフィールドの文脈で構築する際のChatGPTの効果的な使用には、事前のソフトウェア開発知識が重要であることなど、学んだ教訓のセットを議論しました。また、新機能の実装、バグの修正、ユーザーインターフェイスレイアウトの改善のためのプロンプトを含む、ソフトウェア構築に使用できるプロンプトの種類を説明し、リストアップしました。さらに、私たちはソフトウェアアプリ構築のための2つのアプローチ（トップダウンアプローチでは初期プロンプトで主要な要件が提示され、ボトムアップアプローチでは要件が一つずつChatGPTに渡される）を分析し、コメントしました。言語モデルのソフトウェア開発問題への利用に対する人気と持続的な関心を考えると、ChatGPTのようなツールの利点と制限を理解したいと熱望している開発者にとって、私たちの結果と学んだ教訓は価値があると私たちは主張します。

将来の研究として、他のソフトウェアアプリのエンドツーエンド構築を評価する予定です。また、GitHub CopilotやGoogleのBartなど、他のLLMベースのツールを評価する予定です。さらに、ChatGPTプラグインの使用を評価する予定です。たとえば、GitHubリポジトリのURLを通知し、「それと会話する」ことで、そのコードの詳細を尋ねたり、既存の実装に対する改善を提案することができます。