GPT-4を活用したアプリケーション開発: プロンプトの紹介

こんにちは、Buildチームでソフトウェアエンジニアを務めている佐々木です。

いつもBuildチームのエンジニアNoteをご愛読いただき、誠にありがとうございます。
エンジニアNoteでは、私たちのチームが日々の開発を行う中で使っている、より使いやすいアプリケーションを効率的に開発するための手法などを紹介しています。

今回は、GPT-4にプログラムのプロトタイプを作ってもらう際に有用な、プロンプトのパターンを紹介します。

背景

プログラミングを行ってプロダクトを実装していく段階での主な難しさは、複雑なコンテキストの上で、広い範囲の知識を用いながら適切な実装を行う必要があるという点です。

開発にAIを用いる上でもこの難しさは大きな問題で、特に複雑なコンテキスト（使っているフレームワークやその詳細な設定、ディレクトリ構成など）をAIに適切に入力すること、また要件を正確かつ端的に伝えることはかなり難しく、手間がかかります。

しかしながら、GPT-4（特に、11月にリリースされたGPT-4 Turbo）はより大きな入力トークン数（API版は10万トークン、ChatGPTでも数万トークン）を持つことから、以前よりも多くの情報を入力することができるようになりました。

ここからは、私が実際に開発の際にGPT-4と組み合わせて使っているプロンプトを紹介していきます。

プロンプトの紹介

私がGPT-4にプログラムを書いてもらう際のプロンプトの構成は、以下の通りです。

1. 状況の説明

2. 依頼内容の定義

3. 参考情報の提供

   • 参照・利用してほしいコンポーネント

   • 参考にしてほしい既存コンポーネント

   • 型定義など

それぞれ順番に説明します。

なお、プログラミングを依頼する際には、私は基本的に英語でプロンプトを作成します。GPTが学習したコンテンツの大部分が英語であるため、英語で問いかけることで、より関連性の高い情報を引き出すことができます。

1.状況の説明

We, I and you, are working in a web application development team. Today, we are writing the code for our frontend app, with React, TypeScript and TailwindCSS.

一緒にWebアプリケーション開発チームに所属していること、使用しているフレームワークは React, TypeScript, Tailwind であることを伝えます。

2.依頼内容の定義

We are now asked to add an page to list the participants of a event, at `/event/[eventId]/participants`.
The list should show `avatar` and `name`attributes of users, and open the user page (`/user/[userId]`) when clicked.

今回は、サンプルとして、イベントの参加者一覧を表示するページを作ってもらうことにしました。
挙動なども書いておくと実装してもらえます。（しばしば細かいロジックが間違っていたりしますが、大枠は作ってもらえます。）

とりあえず最低限で書いておいて、足りないものを見つけたら適宜書き足して再生成するのも良いと思います。

3.参考情報の提供

```src/interface/user.ts
interface User { /* 省略 */ }
```
```src/pages/event/[eventId].tsx
/* 省略 */
```
参考にしてほしい既存のコンポーネントやAPIクライアントを、Markdown記法のコードブロック（https://spec.commonmark.org/0.30/#fenced-code-blocks）として貼り付けます。

参考情報をGPTに渡す箇所が、一番面倒ですが非常に重要な箇所です。
既存のコンポーネントやAPIクライアントなど、GPTに参考にしてほしい情報をMarkdownのコードブロックとして提供します。
ファイルのパスも記載し、より具体的な情報を提供することで、手作業で修正する箇所を減らし効率的に開発を進めることができます。

私はファイルの内容をコピペするのが面倒に感じたので、コードブロックを簡単にコピーできるバッチファイルを作成しました。

https://github.com/yuyasasaki-0/copy-file-as-markdown/blob/main/copyCodeblock.bat

このバッチファイルにファイル（複数可）をドラッグアンドドロップすると、それらのファイルのパスと内容を、Markdown形式でクリップボードにコピーできます。
良かったら使ってください。

まとめ

AIを用いたプログラミングには、適切なツール（GPT-4）を利用するだけでなく、適切なプロンプトを入力することも非常に重要です。
依頼内容だけでなく、背景情報も良い塩梅に渡してあげることで、AIに効率的に仕事を代行してもらいましょう！

なお、ChatGPTで使用するモデルは、GPT-4を強く推奨します。
プログラミングにおいては、部品間のつながりを適切に把握し、処理する能力がとても重要です。（プログラミングに限らず、あらゆるタスクに言えることですが）

GPT-4にはこの能力が一定程度備わっており、あまり問題になりませんが、GPT-3.5ではこの能力が足りず単純なミスが発生する頻度が高いです。
あなたの貴重な時間を無駄にしないためにも、ぜひGPT-4を利用することをおすすめします。