🍣

一緒にスクラム開発: GPT-4と人間が共創するプロダクトの進化スプリント #1

2023/03/23に公開

本記事は、「ChatGPT選手権！エンジニアリングに組み込んでみたらこうなりました LT大会」の発表の書き下ろしになります。

実際の発表は5分のLTでしたので、この記事のダイジェスト版と言えるかと思います。

こちらの記事の方がかなり情報量が多いため、実際に発表を聞いていただいた方も、そうでない方も楽しんでいただける内容になっているかと思います。

ChatGPTとの対話も含めて全て読むには非常に情報量が多いので、お時間のある時にじっくり読んでいただくことをお勧めします。

プロローグ

さて、時は遡ること3ヶ月半前、ChatGPTが登場し、週末に戯れていた私は衝撃を受けました。

それがこちらの投稿です。

ツイートのスレッドを追っていただくとわかるのですが。ChatGPTと対話を重ねていくことで、twitterっぽいフロントエンド実装をReact/TypeScript/ CSSを駆使してつくってくれたのです！

最初の実装では動かなかったのを動くように改修してくれたり、見た目が貧相だったのをスタイルを当ててTwitterっぽい見た目にしてくれたり、140字の文字数制限をつけてくれたりと、インクリメンタルに実装してくれる様子はさながら本物のエンジニアが開発をしてくれているようでした。

さらに（逆の意味で）衝撃を受けたのは、それならバックエンドの実装もいけるのではと思って聞いてみたところ、想像だにしなかった返答が返ってきたのです。

当時は思わず速報スクープとしてツイートしてしまうくらいの衝撃でした笑

さて、先日OpenAIからGPT-4が発表され、さらなる性能の飛躍が取り沙汰されています。

性能がアップしたChatGPTさんは、無事フロントエンド以外の開発もできるようになったでしょうか？

（※この流れは冗談なので真面目にとられないように補足ですが、実際はGPT-3.5の時点でもバックエンドの実装やデータベーステーブルの実装も、最初からお願いしていればできていましたのでご安心ください。上記のように、対話の流れによってはバックエンドの実装はしてくれないようですw 面白いですね。）

TL;DR（長いので3行まとめ）

開発開始をしたらChatGPTさんがクリエイティブなプロダクトのアイデアを出してくれた！
スクラム開発で2スプリントまわしてみたよ！プランニングや振り返りも一緒にやっているよ！
ChatGPTさんと一緒に開発を進めてみて、難しさもわかった！

本記事ではダイジェストとして解説しているChatGPTさんとのスクラム開発ですが、各スプリントのゴールやプロダクトバックログ、ChatGPTさんとの対話も含めてGitHub上に残しているので、細かいやりとりに興味がある方はぜひこちらも眺めてみてください。

GitHubリポジトリ: TaleWeaver

スプリント#1: キックスタート
スプリント#2: インタラクティブな物語体験を実現する
スプリント#3: 物語の選択肢が完結し、ユーザーが最後まで物語を楽しめる最小限の機能を備えたアプリケーションを実装する

さあ、では本題に入っていきます。

ChatGPT（GPT-4）と一緒にスクラム開発開始！まずはアイデア出し

今回は勉強会に向けての知見共有を目指していたので、それを前提にChatGPTさんと一緒に開発をゼロから開始しました。

最初に考えていた仮題はこんな感じです。

いかに人間が極力インプットしないでChatGPTに要件定義〜開発までしてもらえるか（仮）

いわゆるTDD（登壇駆動開発）ですね。一度Twitterライクなフロントエンドを実装してもらっていたときの肌感があったので、結構なところまで行けるのではないかなという見込み発車で始めてます。本当にちゃんと開発してもらえるかどうかは開始時点ではわかってないですが、まずやってみようという気概で始めました。

では早速ChatGPTさんと一緒に開発を始めていきます。まずは以下のように背景の説明と進め方の仮案の提案をし、アイデアを挙げてもらうようにお願いします。

最終的には本記事のタイトルにあるようにスクラム開発で進めたのですが、この最初の対話スタート時点では私自身もスクラム開発はあんまり意識していなかったのがわかります。この辺りも適応的に進めていったので、まさにアジャイル開発ですね。

さて、始めてみたところ最初から度肝を抜かれます。今回は4つのアイデアを挙げてくれたのですが、どれも普通に面白そうです。私自身、クリエイティブなアイデアを出すのはどちらかというと苦手な方なので、ChatGPTさんがこのレベルのアイデアを出してくださるのは非常にありがたいなと思いました。ゼロベースで考えてくれるの、マジですごい。

少しずつアイデアを絞っていきますが、ChatGPTさんはアイデアの絞り込みに対しても積極的に意見をくれます。

名前も決めにいきます。

一瞬でここまでのアウトプットを出してくれるのは、本当にゲームチェンジャーだなーと思います。

もはや表現が美しすぎて、なんとも不思議な感覚になります。

さあ、プロダクトの名前と方向性も決まったので、次のステップに進みましょう。どう進めるかもChatGPTさんにおまかせ。

ここで、ちょっと横道にそれますが、みなさんお気づきでしょうか。ここまで、人間である私自身は、文脈とある程度の進め方の方向性と問いを与えたり、選択肢を狭めるだけで、実際にこのプロダクトのアイデアも内容も名前もその意図も、全部AIであるChatGPTさんが創り出してくれました。「Generative AI」とはよく言ったもので、このような創発的な作業にこそGPTの真価は発揮されるのではないかなと私は感じています。

ChatGPTの登場以降、その正確性の是非を問う議論であったり、検索を置き換えるのかどうか、と言った議論がよく取り沙汰されているように感じます。私はChatGPTを情報の検索や正確性を問うようなクエリ対象と置き換えるような用途はあくまで副次的なものであって、どちらかというとこれまで単独の人間ではなしえなかったスキルセットを補うような創作的な活動こそChatGPTが得意な領域なのではないかなと感じてます。

私の中では同じGPT-4でも以下のような使い分けをしています

Bing: 情報検索の置き換え
ChatGPT: 創作活動やブレインストーミング、自分の不得意領域の作業についてサポートしてもらうパートナー

（閑話休題）

大まかな要件の整理とDesign Doc作成

さて、ChatGPTさんから要件定義の進め方のアイデアをいただいたところで、挙げてもらった観点でDesign Docとして書き出してもらいます。

さらにmermaidでクラス図やシーケンスダイアグラムも書いてもらいました。

何度かやりとりした後に完成した、ユーザーストーリーに応じて、OpenAIやDBも含めた全体のやりとりを表現したシーケンスダイアグラム。

Design Docを含めて全てをここに直接貼ると記事が膨大になってしまうので、ぜひGitHubのREADMEをご覧ください。私は全く手を加えずにChatGPTさんが出力した内容をただコピペしただけです。

さて、Design Docも整理され、ユーザーストーリーに基づいたシーケンス図も出来上がったことで私自身もChatGPTさんがどんなものを作ろうと考えているのか理解できてきました。向かっていくべきゴールがおおよそ定まってきたので、ここからはついに実際の開発作業に入っていきます！

ChatGPTとスクラム開発開始！

ここからはステップバイステップで進められればと考え、スクラム開発のような進め方を提案します。まずは最初のスプリントゴールを設定することで認識合わせです。

ここからは少し割愛しますが、何度かやり取りをして最初のスプリントのプロダクトバックログアイテムを洗い出しました。

ここからGitHubのプロジェクトを用いてChatGPTさんの提案してくれたたバックログを整理してみました。これを一つ一つ進めていってみましょう。（いずれここも自動化できるといいな、という感覚が生まれました）

GitHubのMilestoneを1スプリントとし、スプリントゴールやスプリントバックログはここで管理します。

ここからはスプリント開発をChatGPTが提案した順番で進めていきます。最初のスプリントで印象的だったシーンをいくつかピックアップします。

まずは、バックエンド側の実装タスクの開始時の対話をご紹介しましょう。

バックエンド実装タスク開始時の対話

今回私がとった基本的なアプローチとしては、「基本的に全ての成果物はChatGPTさんに出力してもらう。そのかわり、各バックログに取り組む最初に前提条件（スプリントゴールやバックログアイテムやコード）をインプットして思い出してもらう。」というやり方です。このやり方で行くと、ChatGPTさんが自分の出した成果物を元にステップバイステップでタスクを進めることができ、オープンな質問を繋げていくよりChatGPTさんが出すアウトプットの精度が上がる感覚があります。このやり方であれば、人間（私）はChatGPTさんが出したアウトプットをChatGPTさんにインプットしてあげているだけで、基本的に全てのアウトプットはChatGPTさんが創り出してくれていることになります。

上記の対話からスタートし、途中でエラーが出たりトラブルシュートしたりと何回かやりとりをした後、最終的に見事に期待するAPIレスポンスが表示されました。

このAPI設計では「物語のタイトル」と「物語の内容」が返されており、これはChatGPT自身が考えたプロダクトアイデアを実現するための、必要最低限な初期実装APIとして創り出したものです。非常にシンプルなAPIではありますが、Twitterのような、「すでに存在する何か」を模倣したコードではなく、ChatGPTが自分で考えだして自分で生み出したコードです。 これを作るまでに私が具体的に指定したものは何一つないです。本記事の冒頭で示したTwitterの実装例と、今回のプロダクトのバックエンド実装の間にある大きな違いはここにあります。このコードは正真正銘ChatGPTが自分で生み出したものです。

やばいですね。ここまで私の仕事はただのコピペマシンです。

このバックエンド実装タスクでここに至るまでの全てのやり取りはこのissueに載っていますので、興味がある方は確認してみてください。

バックログタスクが終わるたびに、忘れないようにファイルの状態はインプットしてあげます。

フロントエンド初期実装時のつまづき

実は、このスクラム開発の最初の2スプリントを終えるまでに、1回だけ私がコードの改変をお手伝いしたところがあります。そのときの対話がこちら。（この投稿時には私の投稿にコードも載せていたのですが、履歴をみたらなぜかなくなっていました🤔）

ChatGPTは知識が2021年で止まっているので、どうしても最新のOSSコードに追随していないケースがあります。早くChatGPTが最新の情報をほぼリアルタイムで学習した状態で使えるようになるといいなーと思います。

ただ驚いたのは、この対話以降、SwitchのかわりにRoutesを使うという前提をChatGPTさんがずっと覚えていてくれたことです。いちど学ぶとちゃんとよしなに対応してくれる、よしな力は非常に人間っぽいなと感じます。

そして、フロントエンドの初期実装が終了した時点での画面表示はこのようになりました。

ちゃんとバックログが一つづつ完成していくのは、非常に気持ちの良いものです。私はreact-router-domの件以外は何もしてないんですけどね！ここまで99.9%ほぼ全ての実装をしてくれているのはChatGPTさんです。

この時点でのファイルもChatGPTさんに共有しておきます。

バックログアイテムの認識の齟齬

さて、ここで次のタスクに進むにあたって、スプリントゴールとバックログアイテムの確認です。人間たちがスクラム開発する時も、デイリースクラムで確認しますよね。今スプリントのスプリントゴールなんだっけ？残りのバックログアイテムなんだっけ？ChatGPTさんが相手でも、この確認は怠りません。

みごとに認識齟齬が起きていたので、軌道修正します。

スプリントを進めているうちに、たまにちょっとだけ認識がずれるけど、指摘をするとしっかり認識が揃ってくれるところがなんとも人間らしさを醸し出していますね。ChatGPTさんは、プロダクトバックログアイテムにしろコードにしろ、自分が言ったことをすぐ忘れる傾向があります。めちゃめちゃ優秀なのに、そういうところは急に可愛げがある感じで、なんとも面白いです。そういう時は、ちゃんと 丁寧に前回の返答を貼り付けてあげて 、思い出させてあげれば大丈夫です。これは結構有用なTipsだと思います。これはコードであっても、それ以外の情報であっても同様です。いったん思い出させてあげると、そこからの返答は非常に精度が高いものが返ってきます。

いかがでしょうか？AIを完璧な対象ととらえるよりも、普通の人間と同じような相手と捉えると、コミュニケーションの取り方が見えてくる気がします。たまに間違えたり忘れたりするけど、ちゃんとフィードバックを送って認識を揃えれば、良いパフォーマンスを出してくれる。非常に面白いですね。