Zenn
🔥

【個人開発】AIで6時間でwebサービスをリリースした話【プロンプト全文あり】

2024/10/24に公開
AI
個人開発
Supabase
ChatGPT
プロンプトエンジニアリング
tech

はじめに

はじめまして！

私は普段エンジニアとして仕事をしながら、趣味で個人開発者をしています。私にとってプログラミングはただの道具でしかなく、プロダクトを形にするための手段の一つでした。このように思う人は私以外にも多くいると思い、今回はそんな皆さまのために、AIを活用してwebサービスを6時間でリリースした話を書こうと思います！

今回作ったもの

自分は趣味で VALORANT というゲームをやるのですが、このゲームのプレイヤーのマナーがとにかく酷い事が多く、自分が出会った害を為すプレイヤーを共有して被害者を増やさない仕組みを作りたいと思い、今回「Reviewant」という名前でβ版としてリリースをしました！

https://x.com/valoer_reviews/status/1850294971825582311

実際の画面

https://www.reviewant.games/ からアクセス可能です！
現在βテスト中で不具合が多いですが、もし報告事項などございましたらお手数ですがご報告いただけますと幸いです。


トップページには実際にレビューされたプレイヤーとレビューの一覧が表示されています。


こちらはレビュー投稿画面で、RIOT IDとタグを入力して特定の人をレビューすることができます。対象プレイヤーがまだレビューを書かれていなければレビューと共にプレイヤーが新規に登録され、すでにレビューされているプレイヤーの場合はレビューのみ追加される実装となっています。また、ユーザーは自分のユーザー名か匿名か選択した上で投稿することも可能です。


また、それぞれのプレイヤーごとのレビュー一覧の画面も作成しました。ユーザーごとにレビューの平均評価も表示するようになっています。


こちらはログイン画面で、Supabase を利用して実装されています。


こちらはサインアップ画面で、メールアドレス / ユーザー名 / パスワードで登録が可能です。

コンセプト

X にも投稿していますが、以下のようなコンセプトで実装しています。

AIで爆速リリース

AIの登場により、開発スピードはこれまでの常識を大きく超えました。かつては数週間、数カ月かかったプロダクトのリリースも、数時間で実現できるようになっています。この変化の背景には、AIによる自動化と迅速な開発フローの普及があり、個人開発でも企業に匹敵するスピードで成果を出すことが可能になりました。

個人開発のAI革命に乗り遅れるな

「AIを使えば、アイデアを即プロダクトにできる時代が来ています」。しかし、今もなお 「自分でコードを書くこと」にこだわっている人は多い のではないでしょうか。もちろん、プログラミングの基礎は大切ですが、個人開発における勝負のスピードは圧倒的に変化しました。AIを使いこなさないと、あっという間に開発の波に置いていかれてしまいます。

もう「勉強が足りないから手が出せない」と言っている暇はありません。AIは学習が必要な高度な技術ではなく、すぐに使い始められるツールです。必要なのは「完璧なプロジェクトを目指す」ことではなく、「まず作って公開する」というスピード感と行動力です。

これからの個人開発者にとって、AIはもはや特別な存在ではなく、電卓やIDEのような当たり前の道具です。この革命的な変化に素早く対応し、プロダクトをどんどんリリースする人が勝者となる時代がやってきています。あなたはその波に乗れていますか？それとも、まだ準備ができていませんか？

AIによって、コードを書くだけの価値は急速に薄れています。これから求められるのは、AIと協力し、短期間で価値を生むプロダクトを作り上げる力です。さあ、もう迷う時間はありません。今すぐAIを使って、あなたのアイデアを世に送り出しましょう。

まだ自分でコード書いてるの？

「まさか、まだ一行ずつコードを書いているのですか？」
もしそうなら、その作業はもう時代遅れかもしれません。AIが進化した今、自分の手でコードを書くことがメインの作業である必要はなくなりました。もちろん、プログラミング自体が無価値になったわけではありません。しかし、AIを活用することで劇的に効率化できる時代に、ひたすらコードを書き続けるのは、タイムマシンに乗って石器時代に戻るようなものです。

今もまだ「コードを書くことが楽しい」「自分の手で作りたい」という気持ちは理解できます。ですが、そのこだわりが原因で機会損失していませんか？ 大事なのは、いかに早くアウトプットを出し、ユーザーの反応を得て、改善を重ねるかです。手動でコードを書くことが全体のプロセスを遅らせるなら、そこに価値はありません。

サービス構成

使ったサービス

  • GPT-4o
  • Next.js
  • Tailwind
  • Supabase
  • Vercel

全体構成図や画面遷移図

構成はなるべくシンプルに、バックエンドに時間を掛けないよう Supabase と Vercel を活用しました。

ChatGPTとの対話

AIとの対話は、これまでの開発手法にない新しい体験を提供します。単なるツールとして使うだけでなく、パートナーとして対話しながら開発を進めることが鍵です。ChatGPTのような生成AIは、質問への回答だけでなく、アイデアの整理や設計の補助まで幅広くサポートしてくれます。

対話のイメージ

以下は実際の ChatGPT との会話のスクリーンショットです。一部抜粋とはなっておりますが、だいたいこのような形でやり取りをしていました。

プロンプトの例

以下にて、自分から入力したプロンプトをすべて置いておきますので、もしなにかの参考になればと思います。(AIの回答や自分が貼り付けたソースコードは流石に記載しきれないので割愛しています)

プロンプトの例

私: React と Supabase を利用してオンラインゲームのユーザーのユーザーIDを入力して勝手にレビュー出来るサイトを作りたいです。ユーザーIDを入力して存在すれば表示され、存在しなければ追加されるようにします。レビュー内容としては星1-5まで設定が出来て、感想文章を書くことが出来ます。
私: React の代わりに Next.js を利用したいです、CSSは Tailwind で大丈夫です。レビュー一覧はログイン不要で閲覧が出来て、レビューするときにログインを促すようにしたいです。TOPページにレビュー一覧がグリッドビューで並んでると良いですね。
私: 投稿日時と使用キャラを入れられるようにしたいですね
私: ランク帯もレビューに含めたいです、ランク体とキャラクターはプルダウンで選択可能にしてください。スマートフォンで利用出来るように出来ますか？
私: 投稿者のユーザー名を登録して、レビューにも紐づくようにしてください。
私: これらの内容をすべて踏まえた上で、再度DB設計から Docker, 各ページのコードまですべて教えてください。
私: nextjs の初期セットアップは？
私: next の AppRoute は必要ですか？
私: ? Would you like to customize the default import alias (@/*)? › No / Yes　 はどうしたら？
私: npx create-next-app@latest frontend で作ったので構成が変わったかと思います、再度セットアップ手順をください
私: AppRouter使いません
私: docker は不要
私: 「React と Supabase を利用してオンラインゲームのユーザーのユーザーIDを入力して勝手にレビュー出来るサイトを作りたいです。ユーザーIDを入力して存在すれば表示され、存在しなければ追加されるようにします。レビュー内容としては星1-5まで設定が出来て、感想文章を書くことが出来ます。」「React の代わりに Next.js を利用したいです、CSSは Tailwind で大丈夫です。レビュー一覧はログイン不要で閲覧が出来て、レビューするときにログインを促すようにしたいです。TOPページにレビュー一覧がグリッドビューで並んでると良いですね。」「投稿日時と使用キャラを入れられるようにしたいですね」「ランク帯もレビューに含めたいです、ランク体とキャラクターはプルダウンで選択可能にしてください。スマートフォンで利用出来るように出来ますか？」
私: Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[7].oneOf[14].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[7].oneOf[14].use[2]!./styles/globals.css
./styles/globals.css
⨯ ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[7].oneOf[14].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[7].oneOf[14].use[2]!./styles/globals.css
Error: Cannot find module 'autoprefixer'
私: 全画面共通のヘッダーを用意して、未ログイン時のみサインアップ / サインインのボタンをおいてください。また、ログイン時はユーザー名があり、ユーザー名をクリックしたらログアウトがユーザー名したのメニューに出るようにできますか？処理も含めて
私: TypeError: lib_supabaseClient__WEBPACK_IMPORTED_MODULE_3_.supabase.auth.session is not a function
私: TypeError: listener.unsubscribe is not a function
私: ReferenceError: router is not defined
私: supabaseに登録するすべてのテーブルのSQLを教えて
私: index.js の上部にて未ログインの場合のみ「レビューを投稿するにはサインインしてください」という文言とサインイン/サインアップボタンを表示するようにしてください。
私: テーブルの構造が違います、レビューはプレイヤー名を自由に登録をしたあと、そのプレイヤーに対して多くの人がレビューを投稿出来るようにします。レビュー投稿時にプレイヤー名を検索、該当のプレイヤーが存在しなければプレイヤーをDBへ登録してから、そのプレイヤーに対するレビューを書くといった処理になります。
私: TOPページも変わると思います
私: TOPページに表示する各プレイヤーのレビューは最新3つのみ、レビュー内容は改行コードを実際の改行に合わせるようにしてください。レビュアーの名前も表示するようにしたいです。また、すべてのプレイヤーごとのボックスの高さを統一したく、その高さを超える場合は「すべてのレビューを見る」というボタンからレビュー詳細ページへ遷移して、レビュー詳細ページから見れるようにします
私: player/[id].js の id 部分は players.name にしたいです
私: TOPにレビュー一覧が表示されなくなりました
私: テストデータを作りたい、ユーザー含め
私: ERROR: 23503: insert or update on table "reviews" violates foreign key constraint "reviews_player_id_fkey"
DETAIL: Key (player_id)=(1) is not present in table "players".
私: 取得件数が0件でした、スキーマは問題なさそう
私: {
"code": "PGRST200",
"details": "Searched for a foreign key relationship between 'reviews' and 'users' in the schema 'public', but no matches were found.",
"hint": "Perhaps you meant 'players' instead of 'users'.",
"message": "Could not find a relationship between 'reviews' and 'users' in the schema cache"
}
私: すべてのレビューを見るボタンは件数オーバーしてなくても表示させたい
私: すべてのレビューを見るボタンの下をぼやけさせられますか？
私: ぼかしがこすぎます、薄くで良いのですが対応してください。全コード書くと時間がかかるので、修正箇所のみピンポイントで教えて
私: やっぱグラデーションで、白をもっと薄い色にできる？
私: 「レビューを投稿するにはサインインしてください」をなくして、「プレイヤー名を入力してレビューを投稿する」に変更、ボタンも「レビューを投稿するボタン」のみ
私: レビュー投稿画面はログイン必須にします
私: レビュー投稿画面→ログイン画面へ遷移した場合はログイン/サインアップ後にまたレビュー投稿画面へ戻るようにする
私: ログイン画面とサインアップ画面をredirectUrlを保持したまま自由に遷移出来るボタンを起きたい
私: ヘッダーロゴ部分をクリックしたらTOPへ遷移
私: レビュー詳細画面のh1の右横にもレビュー投稿ボタンを設置、プレイヤー名がデフォルトで入るようにしたい
私: レビュー投稿画面がログイン必須じゃなくなっています
私: すべての画面においてInputの中身の文字が白文字で見えづらいです、黒文字にできますか
私: サインアップしたアカウントでログインができません
私: サインイン済みの場合はヘッダーにユーザー名を出して、クリックしたらメニューが出てきてログアウトが出来るように
私: ヘッダーにユーザー名が出てこない
私: サインアップ時にusersテーブルに入らないようです
私: ユーザー名の入力フォームがサインアップに無いです
私: 各入力フォームにlabelで項目名を入れられますか
私: 以下のコードで星を数字ではなく星の数で表現できますか？★と☆で (// コード割愛)
私: レビューを新着順にしたい
私: ヘッダーに検索窓を作れますか？プレイヤー名での部分一致検索がしたいです
私: 検索バーの横幅をもっと長くしたい
私: 検索結果をクリックしたあとに検索結果をクリアしたい
私: 「名前入力 # タグ名入力」のような形で、input を横並びで間に「#」のテキストを置く形です、サーバーに送信するときはこれらが#で結合されるようにします
私: reviews の user_id が null になります
私: レビュー時にuser_idをnullにする(匿名にする)かどうかのチェックボックスを追加したい
私: チェックボックスじゃなくてプルダウンにしたい
・(デフォルト)「<ユーザー名>で投稿する」
・「匿名で投稿する」
私: TypeError: Cannot read properties of undefined (reading 'username')
私: ユーザー名はusersテーブルのusernameカラムにあります
私: ユーザー名の横に評価平均を書きたい
私: 間違えました、プレイヤー名の横にそのプレイヤーの平均評価を出したいです

AIの気持ちを考える

「AIはただのプログラムだから、気持ちなんてない」と思いがちですが、AIとの対話がうまくいくかどうかは、こちらの伝え方次第です。人とのコミュニケーションと同様に、AIにも 「適切な指示」や「思いやりある対話」 が求められます。曖昧な指示や指図的なプロンプトだと、AIから期待通りの回答が返ってこないことが多くあります。例えば、以下のようなケースでは結果が大きく変わります。

悪い例：
「ログイン画面を作って」
良い例：
「ユーザーがメールアドレスとパスワードでログインできる画面を作ってください。未入力項目がある場合はエラーを表示し、再入力を促してください。」

丁寧で具体的な指示を出すことが、AIから質の高いアウトプットを引き出すポイントです。気持ちを持つ相手だと思って対応することで、あなた自身の指示の質が自然と上がります。

また、AIは完璧ではなく、時に不十分な回答や誤解を生むこともあります。そんなときはイライラするのではなく、「何が必要なのかをもう一度伝える」姿勢が大切です。気持ちの面では 「一緒にものを作っている」という意識 で接することで、AIとの連携も円滑になります。さらに、AIが出してくるアイデアや提案には、時に新しい発見が含まれています。これを「自分の方が正しい」と決めつけるのではなく、AIの提案を学びの機会と捉えることが、成長につながります。良いチームメイトと協力するように、AIを対等なパートナーとして尊重しましょう。

AIは感情を持たなくても、コミュニケーションは双方向で文脈を理解します。あなたがAIにどう接するかで、AIから返ってくるものも変わります。「AIの気持ちを考える」という意識を持てば、プロジェクトがスムーズに進み、より創造的で満足のいく成果が得られるでしょう。

AIを使った爆速リリースのコツ

AIを活用することで、プロダクトの開発・リリースまでの時間を飛躍的に短縮できます。ただし、AIを使いこなすためには、いくつかのコツを押さえておくことが重要です。ここでは、AIを使った「爆速リリース」を成功させるためのポイントをご紹介します。

1. 目的を明確にする

AIに何をさせたいのか、ゴールを具体的に伝えられなければ、正しい結果は得られません。
「なんとなく作りたい」ではなく、機能要件やプロダクトの最終イメージをしっかり固めましょう。

2. プロンプト力が命

AIのアウトプットは入力に依存します。適切なプロンプトを使うことで、求める成果が早く、的確に得られます。
具体的な指示や例を盛り込むことで、無駄な試行錯誤を省きましょう。プロンプトを磨くことは、これからのエンジニアリングにおいて重要なスキルです。

3. とりあえず出す勇気

AIはスピードの強みがありますが、完璧を目指すといつまでも公開できません。「ベータ版でもいいから一度出してみる」姿勢が成功の鍵です。
小さく早くリリースし、ユーザーの反応を得ながら改善することが、結果的に高品質なプロダクトを生み出します。

4. 手作業はAIに任せる

UIの実装、ドキュメントの生成、API接続の設定など、繰り返し作業はすべてAIにやらせましょう。自分の時間をもっとクリエイティブな仕事に割くことで、プロジェクト全体が効率化されます。

5. 自動化を徹底する

開発からデプロイまでのプロセスは、可能な限り自動化します。
例えば、ChatGPTでコード生成 → GitHubにプッシュ → CI/CDで自動デプロイのように一連の流れを組み上げれば、ミスのないスムーズなリリースが可能になります。

AIを活用することで、もはや 「作る時間」ではなく「リリースする速度」 が競争力の鍵となっています。AIの力をうまく引き出し、素早く市場にプロダクトを投入することが成功への近道です。今日からあなたも、AIを使った爆速リリースを始めましょう。行動の速さこそが、これからのエンジニアの価値です。

まとめ

今回は ChatGPT を使った開発ではありましたが、最近だと v0 や bolt.new、Cursor エディタなんかもありますので、本記事のやり方よりも更に効率よくプロダクトが実装出来るようになっているのではないかと思います。

また、これはあくまで個人開発者目線として記載をしたもので、ビジネスの場面での商用アプリケーションや基幹システムの開発などは視野には入れておりませんので、ご了承下さい。ただ、本記事に書いた内容を通してAIとの共存イメージが出来て、少しでもあなたの能力のブーストにAIを活用出来ましたら私としては本望でございます。

もしよろしければ今回作ったものについて、アカウントのフォローと固定ポストの拡散のほどお願いいたします！🙌

https://x.com/valoer_reviews/status/1850294971825582311

それでは、良いAIライフを！

Discussion