コーディングは全てお任せ！ChatGPTを活用した新しい開発プロセス
前回の記事で、Chat GPTを活用したプロダクトマネジメントの手法を紹介しました。たくさんの反響をいただき、ありがとうございます🙌
今回は、前回の記事で設計したプロダクトを、ChatGPTを活用して実装します。初期実装・改修・デプロイなどのプロセスを通じて、プログラミングにおいてChatGPTがどれだけ役立つかを検証します。なお、モデルはGPT-4を利用します。
この開発を通じて、GPT-4は人間と比較しても遜色のない理解力があると感じました。Slackでエンジニアに開発内容を依頼するような感覚で、機能の実装や改修を実施できてしまいます。この記事では、そのようなプロンプトの例を紹介します。
この記事では、プログラミングにおけるAIの活用方法を中心に説明します。そのため、ソースコードの中身については説明を省略します。
作成するアプリケーション
前回の記事で設計した、プロダクトマネージャーのFAQ作成業務を支援するためのアプリを作成します。以下のような機能を持っています。
機能
・ユーザーは、新機能の仕様に関する情報をテキストエリアに入力できる
・ユーザーが「FAQを作成」ボタンを押すと、Chat GPT APIを利用して、新機能のFAQを作成する。
・作成したFAQを画面上に表示する。ユーザーがコピーボタンを押すとそのテキストをコピーできる。
基本仕様
・WEBアプリとして提供する。ユーザー認証機能は実装しない。
・入出力したデータはローカルストレージに保存する。（今回未実装）
完成イメージは以下のようになります。（一般公開は実施していません）
ソースコードは以下のリポジトリで公開していますので、必要に応じて参照してください。
この記事では、基本的な機能の実装と、アプリのデプロイの手順を紹介します。
プロダクトバックログを作る
まずはじめに、プロダクトバックログを作成して、実装する機能の全体感を把握します。
前回の記事で紹介したプロンプトを利用して、プロダクトバックログを作成します。アプリの仕様をChatGPTに伝えることで、これから開発する内容を認識させます。なお、このプロンプトは新しいスレッドに入力しています。
必要なアイテムが網羅できているので、このまま開発を進めます。もし認識がずれている場合は、仕様書の記載内容を見直しましょう。GhatGPTとの認識を合わせることは、AIから正しい出力を得るために重要です。
開発アイテムにIDを付与しておくことで、この後のAIへの指示がしやすくなります。
なお、アプリの構成を伝えていなかったために、「実装箇所」が全て「フロントエンド」になってしまっています。この後の指示で認識を修正します。
開発環境をセットアップする
ここからは、アプリの機能を順番に実装していきます。利用する技術スタックを指定して、実装方法の説明をChatGPTに依頼します。ガワの部分に相当する『ID-3「FAQを作成」ボタンの実装』までを指定しています。
プロンプト
では、このアプリの実装手順を教えてください。まずはID-3までのアイテムを実装します。以下の前提条件を満たしてください。
・BackendはFast APIで実装する。バージョン管理にはpoetryを利用する。OpenAIのAPIキーは環境変数に保存する
・FrontendはReact, Typescript, MUIで実装する。
・本番環境へのデプロイは行わず、ローカル環境で実行する。
・PythonとNode JSのインストールと、プロジェクトのディレクトリの作成は完了しているため、説明は省略して良い。フレームワークのインストール手順は説明する。
今回は、バックエンドにはPython、フロントエンドにはReactを利用することにしました。利用したい技術スタックが決まっている場合は、このように指定することで、その技術を利用した実装を提案してくれます。
また、実施済みの内容を記載しておくことで、余計な説明が出力されるのを抑制することができます。
以下のように、前提条件に従った形でセットアップ手順が表示されました。
続けて、フロント側のセットアップ手順と、アプリの実行手順が表示されます。
これで、アプリを実装する準備が整いました。公式ドキュメントにも書いてある基本的な手順ではありますが、このように整理して出力してもらえると非常に便利ですね。
フロントエンド側の機能を実装する
次に、アプリの画面を実装します。先ほどの出力では詳細な方法が出力されていないため、詳しく教えてもらえるように依頼します。
プロンプト
4. 5. 6. の具体的な手順とソースコードを説明してください。
すると、具体的な実装方法が出力されました。適切なマージンや、テキストボックスのタイトルラベルなども設定されています。
この時点での実装内容は以下のようになりました。ボタンをクリックするとhandleButtonClick()を実行する設定も書かれています。このハンドラの中身は後で実装します。
import { Container, TextField, Button, Box } from '@mui/material';
import { useState } from 'react';
function App() {
const [inputText, setInputText] = useState('');
const handleButtonClick = () => {
console.log(inputText);
};
return (
<Container maxWidth="md">
<Box my={4}>
<TextField
fullWidth
multiline
rows={10}
label="新機能の仕様を入力"
variant="outlined"
value={inputText}
onChange={(event) => setInputText(event.target.value)}
/>
<Box my={2}>
<Button variant="contained" color="primary" onClick={handleButtonClick}>
FAQを作成
</Button>
</Box>
</Box>
</Container>
);
}
export default App;
実装内容をコミットする
ここまでの作業をGitにコミットしておきます。ここでもChatGPTを活用できます。以下のように依頼することで、コミットメッセージを考えてくれます。
バックエンド側の機能を実装する
次に、ChatGPTのAPIを呼び出す処理を実装します。今回は、Fast APIでバックエンドサーバーを構築します。
バックログアイテムのID-4, ID-5に該当するため、この部分の説明を依頼します。
プロンプト
続けて、ID-4, 5の手順を教えてください。
以下のように、バックエンド側の実装を説明してくれます。
最新のAPIドキュメントを利用する
上記の回答では、APIの具体的な利用方法は含まれていません。「OpenAIのAPIドキュメントを参照して実装してください。」という回答になっています。ChatGPTは最新のAPIドキュメントの内容を学習していないため、この情報を追加で与える必要があります。
この場合は、OpenAIの公式リファレンスの内容をコピーして、ChatGPTのプロンプトとして入力します。これにより、APIの利用方法を理解させることができます。
以下のように、正しい方法でAPIを利用できています。
このように、ChatGPTが学習していないAPIなどを利用する場合は、ドキュメントの情報を追加で与えることで、利用方法を教えることができます。
プロンプトを修正する
上記の実装では、ユーザーが画面に入力した内容をそのままChatGPT APIのプロンプトにすることになっています。今回は、「アプリの仕様」を入力として、その仕様のFAQをChatGPTを使って出力する必要があります。
そこで、以下のように依頼して、プロンプトの内容を修正してもらいます。
プロンプト
今の状態だと、generate-faqのAPIは、プロンプトの答えをそのまま返すだけになっています。プロンプトにはサービスの仕様が入力されるので、その仕様に対するFAQの内容をChatGPTが考えて出力するように、ChatGPTにプロンプトを与えるように変更してください。
以下のように、システムロールにChatGPTへの与える形式に修正できました。ロールの概念も正しく把握しているようです。
ChatGPTが考えたプロンプトは以下のようになっています。意図した通りの内容になっていますね。
You are an AI language model that generates FAQs based on the given service specifications.
CORSのエラーを解決する
これで、バックエンドサーバーのAPIの準備が完了ました。この次は「FAQを作成」ボタンを押した時にAPIを呼び出す処理も実装しておきます。（説明は省略）
ここで、APIの呼び出しをローカル環境で実行したところ、以下のようなエラーがバックエンド側で発生しました。
INFO: 127.0.0.1:49653 - "OPTIONS /generate-faq HTTP/1.1" 405 Method Not Allowedエラーが出た場合は、エラーの内容をそのままChatGPTに伝えることで、解決策を示してくれます。
これはCORSに関連するエラーだったため、ソースコードの修正方法を説明してくれました。本番環境で運用する場合の注意事項も記載してくれています。
この修正を実装することで、エラーが解消しました。このように、エラーの内容をそのまま入力するだけで、エラーの解決策を的確に教えてくれます。
ちなみに、素直に「405 Method Not Allowed」でGoogle検索した場合、この対応方法には辿り着けませんでした。（FastAPIの公式ドキュメントには記載されています）
アプリを公開する
基本的な機能を実装できたので、アプリをWEB上に公開します。今回はGitHub Pagesで公開しました。ChatGPTに公開方法を聞きます。なお、バックエンド側は別途公開が完了しているものとします。
プロンプト
フロントエンド側をgithub pagesで公開する手順を教えてください。GitHubへのpushは完了しています。APIはexample.com/generate-faqで公開しているものとします。
以下のように、公開までの手順を1ステップずつ説明してくれます。（今回は、実際には公開していません）
デザインを修正する
機能が出来上がったので、デザインをブラッシュアップしてみます。デザイナさんに依頼するようなイメージで、デザインの修正を指示します。
プロンプト
デザインを今時な感じにしたいです。
・左上から右下にかけて、鮮やかなオレンジから青色に変化するグラデーションを作成します。そのグラデーションをタイトルとボタンに適用してください。
・タイトルは太字に変更してください。
スタイルの書き方と適用方法を教えてくれます。色の指定やグラデーションの掛け方に関しても、意図を理解しています。
このあと、グラデーションの角度や色合いを変更して、以下のようなデザインになりました。
このように、機能の実装からデザインの修正まで、コードで表現できる内容であればChatGPTにお任せすることができます。
おわりに
今回は、ChatGPTを活用しながら、WEBアプリの開発・デザイン・デプロイなどの一通りの作業を実施しました。ChatGPTに的確な指示を与えることで、コーディングに関するほとんどの作業を依頼できることがわかりました。
もちろん、もっと高度な機能やデザインを実装したい場合は、より専門的な知識が必要になると思います。しかし、比較的軽微な修正であれば、プロダクトマネージャーがAIに指示するだけで修正が完了する、そんなワークフローも実現できそうです。
今後もAIを活用したプロダクト開発を実践し、AI活用の可能性を探っていきたいと思います！
この記事が気に入ったらサポートをしてみませんか？