【ChatGPT】丸投げの仕様書から始める、プログラミング無しでのクイズアプリの作り方
ChatGPTでコーディングしないでクイズアプリ制作
ここ数日、ChatGPTへのプロンプト入力だけで、どこまでプログラミングとアプリ制作ができるか試しています。
今回は、簡単な三段論法の論理推論クイズを作り、replitというサービスで公開しました。
論理クイズアプリはこちらのリンクから
replitが便利
replitは、ブラウザ上でできるIDE（開発環境）で、放送大学のC言語入門の授業でその存在を知りました。
今回初めて試してみましたが、Pythonなども含む様々な言語に対応しており、インターフェイスも使いやすいのでおすすめです。
なにしろ、コードを書いたファイルを作成する手間と、実行する手間が少なくて良いです。
あまりに便利なのでこれからはVSCodeなどを使用する頻度が減りそうです。
基本無料で使えます。
論理クイズを作れなかったGPT-3.5、作れるようになってきたGPT-4
アプリ以前のコンテンツの問題として、GPT-3.5は、問題を論理的に解く能力は持っていませんでした。
論理クイズやパズル問題を作ってと依頼しても、明らかに間違った解答が付随した問題を平気で作成してくるので、論理判断はできないものと諦めていました。
そんな中、GPT-4がデビューし、3.５と同じプロンプトを使用して問題を作成させてみるとあら不思議、今度は矛盾のない問題と解答を出力してくるではないですか。
理由は分かりませんし、ChatGPTに聞いても教えてくれませんが、結果としては喜ばしいことになりました。
実際のクイズがどのようなものとなったかは、アプリで遊んでみて体感してみてください。
ChatGPTでアプリを作るためのプロンプトの手順
今回のクイズアプリは、はじめChatGPTで作ってみました。
相当苦戦した結果、バグが取れることはありませんでした。
すなわち動かせず、ギブアップです。
ただ、 幸いなことに収穫もありました。
皆が経験していると思いますが、会話を繰り返す中でChatGPTが前に依頼したことを忘れることが多発します。
そこで思いついたのが、まず仕様書を作らせること。
クイズアプリの仕様書をまずは作ってもらったことです。
単純にクイズアプリを作ってとだけ依頼するのではなく、まずはクイズアプリの仕様書を作ってと依頼するわけです。
最初は以下のような仰々しいフル装備版の仕様書が出てきます。
以下は、ブラウザで動作するクイズアプリの仕様書の例です。
機能
ユーザー登録機能
ユーザー名、パスワード、メールアドレスを登録可能。
すでに登録されているユーザー名やメールアドレスは使用できないようにする。
ログイン機能
登録されたユーザー名とパスワードを入力してログインできる。
ログイン後、クイズを開始できるようにする。
クイズ機能
複数の問題を設定できる。
各問題には、問題文、選択肢、正解が含まれる。
問題はランダムに表示される。
ユーザーは選択肢から1つ選び、回答することができる。
正解の場合は次の問題に進み、不正解の場合は正解が表示される。
全ての問題が終了すると、クイズ結果が表示される。
クイズ結果機能
ユーザーの回答履歴と正解数が表示される。
正解数に応じて、コメントが表示される。
技術仕様
フロントエンド
HTML, CSS, JavaScriptを使用する。
ユーザーインターフェースはシンプルで使いやすくする。
バックエンド
Node.jsを使用する。
データベースはMySQLを使用する。
パスワードのハッシュ化と認証機能を実装する。
セキュリティ
セキュリティ上の脆弱性を考慮し、適切なエスケープ処理を実施する。
セッション管理を実装する。
データベースアクセスに対して、適切な検証や制限を実施する。
XSSやSQLインジェクションなどの攻撃に対する対策を実施する。
テスト
ユニットテストやE2Eテストなどを実施し、品質を担保する。
テストカバレッジを測定し、テストの網羅率を確認する。
デプロイ
AWSやGoogle Cloud Platformなどのクラウドサービスを使用する。
セキュリティ上の（以下省略）
この仕様書は下手すると5000万円ぐらいかけて作るアプリ向けのものですね。
そこでここから自分の作りたいアプリのイメージに近づけるよう不要なものをどんどん削っていきます。
また文章を適宜書き換えます。
そうすると以下のような必要最小限のスリムな仕様書が出来上がります。
【クイズアプリ仕様書】
【概要】
このクイズアプリは、複数の問題に回答し、正解数を競うシンプルなアプリです。問題は初級のみで、テーマは環境問題です。ランキングはありません。
【基本機能】
複数問題に回答し、正解数を競う
正解不正解に関わらず、正解の解説を表示する
全問解答後、正解数とスコアを表示する
再挑戦が可能
【画面構成】
スタート画面
クイズ画面（問題表示、回答選択肢表示、解説表示、次の問題へ進むボタン）
結果画面（正解数とスコア表示、再挑戦ボタン）
【機能詳細】
スタート画面
スタートボタンを押すと、クイズ画面に遷移する
クイズ画面
問題をランダムに表示
回答選択肢を表示し、選択肢から回答を選ぶ
選択肢をクリックすると、正解か不正解かを判定する
判定後、正解の解説を表示する
次の問題へ進むボタンを表示し、クリックすると次の問題に進む
結果画面
全問解答後、正解数とスコアを表示する
再挑戦ボタンを表示し、クリックすると再度クイズを開始する
【技術要件】
HTML、CSS、JavaScriptを使用して実装する
問題はJSONファイルに格納し、Ajaxで取得する
正解不正解の判定はJavaScriptで実装する
以上が、このクイズアプリの基本的な仕様になります。必要に応じて詳細な仕様を追加することができます。
盛り込みたい機能の記述がメインのシンプルな仕様書になりましたね。
そして、この仕様書を元に
Webアプリを作成します。
以下の仕様書に基づき、JSONフォーマット、およびHTML,CSS,JavaScriptのコードを示してください。
（以下略）などとプロンプトを入力します。
そうすると、自分のイメージに合ったコードが最初から出てくることになります。
なお、GPT-3.5では、それでもバグが取り切れませんでしたが、GPT-4では、最初の出力のコードでJavaScriptがバグがなく動作しました。
一方、CSSのデザイン面は、どうしても後から微調整したくなります。
ChatGPTとのやりとりの中で、やっぱり余計なことをしだします。
そんな時は、再度仕様書をプロンプトにぶち込むか、デザインの指示を付け加えた仕様書を入れることで、ChatGPTに正規ルートを思い出させます。
以上をまとめると、まず最初にChatGPTに依頼する事は、
クイズアプリのコードを出力してと依頼する
のではなく、
クイズアプリの仕様書を出力して
と依頼するわけです。
これが今回の１番のポイントです。
人間は出力された仕様書をチェックし、自分の理想通りに修正します。
その出来上がった仕様書こそ、ChatGPTへの真に的確な指示=プロンプトになるというわけです。
後は簡単で、上記のとおり、この仕様書に基づいてアプリを作ってと依頼するだけです。
繰り返しになりますが、こうすることでChatGPTの出力のブレが発生しにくくなるという印象です。
これはこれから検証していきます。
ChatGPTとのチャットを100回やり直してアプリを徐々に仕上げていく、というアプローチではなく、最初から細かく指示内容を決め、ChatGPTはそれに沿って8割、9割ぐらい出来上がったものを出させるイメージです。
当たり前のことですが、この、
①作りたい対象を決める→②作りたい対象の仕様書→③作りたい対象のコード
というプロセスを実践することがChatGPTで簡単にできるという話です。
SEが仕様書を作るカルチャーの終焉
私の受託開発の経験では、仕様書は、受託開発会社側のシステムエンジニアがクライアントからヒアリングしたものをまとめるものというイメージです。
しかし、理想論としては、発注する側がこういうものを欲しいと明確なイメージがあり、それを発注側が納得がいくものを細部まで記述した書類こそが仕様書であって、受託者側はそれを熟読し、開発できるかできないか、予算や期間を見積る、なのかもしれません。
それがいつしか発注側は要望を口頭で話す、受託側が発注者の意見をヒアリングし、会社に帰って書類にまとめるのが仕様書、と言う役割分担になっているのかもしれません。
そうであるからこそ、システム開発分野での言った、言わない、依頼した、依頼していない、という論争や後日の訴訟は絶えません。
そこまでいかなくても、できあがりそうなところで、発注者の心変わりで手戻りが発生し、プロジェクトはエンドレス、という開発者にとっての悪夢が現実にあります。
そこで原理原則に戻り、発注者が欲しいものを書類にまとめ、作ってくれる主体にその書類を渡す、というプロセスを理想論どおりにやれる環境が
ChatGPTにあることに気づきます。
なにしろ「〇〇システムについての仕様書（要件定義書、ユーザーマニュアルも）を作って」と書くだけで、バーっと仕様書案が出てくるわけです。
仕様書があるだけで、 ChatGPTとの細かいやりとりが減少し、工程が節約されます。
チャットは人間と会話しているようで、ついつい長くなってしまいがち。
仕様書があれば、効率的なChatGPTの使いこなし方になる。
そして自分の意図通りの成果物が出来上がってくる確率も高まる好循環のプロセスになるのではないかと考えます。
今までSEが苦労した作業がなくなる日が来るかも。
もう ChatGPT無しのアプリ作りには戻れないかも
ChatGPTによるアプリ開発は数日前に始めたばかりなので、まだまだ確信の持てる方法というものはありません。
しかし、せっかく思いついたこの仕様書を間に挟む方法を更に深掘りしていきたいと考えています。
今回クイズアプリを作る中でバックエンドのないアプリにしたかったので、アーキテクチャとしてデータベースは採用しませんでした。
ChatGPTが最初に出してきた仕様書には、当然のごとくDBは含まれていましたが、それを削ったわけです。
クイズの問題文や選択肢、解答、解説は、CSVではなく、JSON形式でまとめました。
問題文自体は、上述の通りChatGPTに作ってもらい、それをJSON形式に変換するのもChatGPTに任せました。
文章からJSON形式に一発で変換してくれたので、これは楽でした。
今後、GPT-4が利用回数の制限なく、1日中使えるようになったら、コーディングの精度とスピード、論理的能力も高いサービスをフル活用できるということで、ますます有用な存在となっていくと予想されます。
2022年、勃興したノーコードツールが駆逐される？
これは私の勝手な予想です。
今回のように自然言語のプロンプトでアプリ作りができるようになったら、真っ先に駆逐されるのはノーコードツールになりそうです。
私はノーコードツールを使ってスマホアプリを20種類、40本近くApp StoreやGooglePlayStoreにデビューさせているので、ノーコードツールのありがたみはよく理解しています。
ノーコードツールは人間がコードを書かずに、グラフィカルユーザインターフェースを操作するだけで、達成したい仕組みを組み上げてくれるものです。
アプリの民主化の波が来た、ということで私もワクワクして2022年はThunkableというツールを使い倒しました。
ところが、ChatGPTなどのAIがアプリ作りの世界に浸透していくと、これまで便利だと重宝されてきたノーコードツールも必要なくなり、人間の自然言語による指示をAIが理解し、そのままアプリ完成まで直行します。
すぐに取って代わるということは無いにせよ、この事実は、いわゆるノーコードツールを提供している会社にとっては驚異ではないでしょうか？
今後試すこと
ChatGPTによる、バックエンドシステムやデータベースの構築及び業務で使用するための画像認識AIシステムの構築に進んでいきたいと考えています。
ぜひ、仕様書を作ってからのChatGPTアプリ作りを試してみてください！
【お知らせ】GPTsエージェントを試せます
マンガスタイルの画像生成GPTを5種類リリースしました。
こんな感じの画像を生成できるGPTエージェントです。
そのほか、水槽の魚を数えたり、店舗ファサードのスコアをつけたりするGPTエージェントもあります。
ChatGPT Plus以上のユーザーは、すぐにお試しいただけます↓
https://indepa.net/
この記事が気に入ったらサポートをしてみませんか？