【React×AWS】AIを「PM」と「実装担当」に分けてフルスタックの個人開発をしたらAmplifyで爆速デプロイできた話

自分一人でフルスタックアプリを作り、世界に公開するなんて、一部の天才エンジニアだけの特権だと思っていませんか？

そんな常識は、AIの登場によって完全に過去のものになったかもしれません。

今回、AIを「プロジェクトマネージャー（PM）」と「実装担当」の2つに分業させるというハックを使い、要件定義からインフラ構築、フロントエンド開発までをほぼノンストップで完走させることができました。

さらに、完成したアプリをAWS Amplifyを使って公開。
手元のMacの中でだけ動いていたログイン画面が、自分のスマホから開ける瞬間の何度やっても感動します。

もちろんある程度の経験値は必要で失敗はあると思いますが、この記事では、AIを最高の相棒にして個人開発のハードルを下げる実践的なノウハウと、をお届けします。

【この記事を読んでわかること】

• React×AWS×Supabaseを用いたモダンなサーバーレスアプリの構成

• AIを「PM」と「実装担当」に分けて開発を進める方法

• AWS Amplifyを使った手軽で感動的なデプロイ（公開）体験

1. React × AWS × Supabaseで作るサーバーレスアプリのシステム構成

フロントエンドからバックエンドまで、今回開発したアーキテクチャの全体像

今回開発した「Study & Work Logger」は、以下のモダンな技術スタックを組み合わせて構築しました。

フロントエンド:
  React (Vite + TypeScript) × Tailwind CSS
バックエンド:
  AWS API Gateway + AWS Lambda (Python)
データベース:
  Supabase (PostgreSQL)
インフラ・デプロイ:
  AWS Amplify, Amazon EventBridge（定期バッチ処理用）

AWS LambdaからSupabaseへの接続エラー・3層アーキテクチャについて

3層アーキテクチャを選んだ理由や、Supabaseでぶつかった壁については別途記事にしているのでこちらご一読ください！

2. 【AI活用術】AIチャットを「PM」と「実装担当」に分割する最強の開発ハック

「トークン消費」と「AIの回答精度低下」を防ぐためチャットを分けて分業させる

AIを活用した開発で初心者が最も陥りやすい罠は、1つのチャット画面であらゆる指示を出してしまうことです。

開発が進むにつれて会話が長くなると、トークンを無駄に消費するだけでなく、AIが過去の実装や不要なエラー回答まで文脈に含めてしまい、急激に回答精度が落ちてしまいます。

これを防ぐために、私はAIを「プロジェクトマネージャー（PM）」と「実装担当」の2つのチャットに完全に分割して開発を進めました。

PM役のAIと対話して、要件定義と自分のやりたいことのズレを細かく調整する

PM役のチャットでは、具体的なコードを書かせません。

ここではアプリの詳細仕様や設計の相談、そして「自分が作りたいものとズレていないか」を細かくすり合わせることに特化させました。

例えばこのような回答が返ってくるチャットです。

もしこれを実装用チャットでやってしまうと、それまでのコードやバグ修正のやり取りと混ざってしまい、情報が散らかってしまいます。
PM役という「壁打ち相手」を独立させることで、純粋な要件定義だけに集中でき、プロジェクトが迷子になるのを防ぐことができました。

最大のメリット：「実装チャットへの指示プロンプト」の叩き台が自動生成できること

この分業ハックにおいて、最も助かったのは「実装チャットへ投げるためのプロンプト」をPM役に作らせることです。

開発を進める中で、統一しておきたいルール（例えば「1ステップずつ進める」など）や、その時々で実装したい要件をいちいち自分でプロンプトにまとめるのは非常に時間がかかりますよね？

しかし、PM役のAIと要件を調整した最後に「では、この内容で実装担当に渡すためのプロンプトを作成して」と指示するだけで、完璧な指示書が自動で完成します。

例えば自動で作ってくれたプロンプトをいかにいくつか紹介しておきます。

①画面の作り込み　実装指示

フロントエンドの環境構築（Vite + React + TypeScript + Tailwind CSS v4）、完璧なサポートをありがとうございました。
ここから「ステップ3：フロントエンドの実装」の続きとして、実際に画面を作り込み、前回構築したバックエンドAPI（タスクCRUD）と繋ぎ合わせる作業に入ります。

【今回の開発要件と方針】
- スコープ: 「タスクの登録・未完了タスクの一覧表示・タスクの完了更新」ができるメイン画面の実装。
- レイアウト: B案（PC向け管理画面風）。左側にサイドバー、右側にメインコンテンツ（タスク一覧など）を配置します。将来的なスマホ対応を見据え、Tailwind CSSでレスポンシブな基礎（画面幅が狭い時はサイドバーを隠す等）を作ってください。
- API通信: 外部ライブラリは使わず、ブラウザ標準の `fetch` を使用します。

【あなたのミッション】
今回も、私が混乱しないように**必ず1つの手順とそれに必要なコードを提示し、私が「完了しました」と報告するまで次の手順に進まないでください。**一気に複数のファイル修正を指示するのは厳禁です。

■ 実行してほしいタスク手順（ステップ・バイ・ステップ）
1. 基礎レイアウトの作成: `App.tsx` を書き換え、左側の「サイドバー（Study & Work Loggerのタイトルやダミーのメニュー）」と、右側の「メインコンテンツエリア」を分ける Tailwind CSS のレイアウトコードを提示してください。
2. 環境変数の設定: API GatewayのエンドポイントURLを、Viteの環境変数（`.env` ファイル）に設定し、Reactから読み込めるようにする手順を案内してください。
3. タスク取得（GET）の実装: 右側のメインエリアに、`fetch` を使ってAPIからタスク一覧を取得し、表示する処理を追加してください（最初は `useEffect` などでシンプルに取得する形で構いません）。
4. タスク登録（POST）の実装: メインエリアの上部に、タスク名を入力して「追加」ボタンを押すと、POSTリクエストを送信してリストを更新するフォームを追加してください。
5. タスク完了（PUT）の実装: 表示されている各タスクに「完了」ボタン（またはチェックボックス）を付け、押下時にPUTリクエストを送信してリストから非表示にする（再取得する）処理を追加してください。

【厳守事項】
- React (TypeScript) のコードは、完全な状態（インポート文を含む）で提示してください。
- エラー（CORSエラーやTypeScriptの型エラーなど）が発生した場合は、私が共有するエラーログをもとに一緒に解決してください。

それでは、タスク手順の「1. 基礎レイアウトの作成（App.tsxの書き換え）」から案内を開始してください。

②ルーチンタスクの自動化　実装指示

ダッシュボード機能の実装、完璧なサポートをありがとうございました。アプリが視覚的にも素晴らしいものになり感動しています。
ここからは「ステップ4：ルーチンタスクの自動化」に入ります。今回は画面（フロントエンド）は触らず、AWSのイベント駆動型スケジューラ（EventBridge）とLambdaを用いて、バックエンドのバッチ処理を完成させることに集中します。
引き続き、これまでのコードや環境変数、データベース（Supabase）の文脈を保持して進めてください。

【今回の開発要件と方針】
- スコープ: `routines` テーブルに登録された雛形データを読み込み、条件に合致する日（毎日、または特定の曜日）に `tasks` テーブルへ今日のタスクを自動生成する。
- 実行タイミング: 毎日午前0時（JST: 日本標準時）。
- 繰り返しパターン: 今回は「毎日 (Daily)」と「毎週 (Weekly: 曜日指定)」の2パターンのみ対応します。
- バックエンド要件: Lambda関数を作成し、EventBridge Schedulerをトリガーとして定期実行させる構成とします。

【あなたのミッション】
今回も、私が混乱しないように**必ず1つの手順とそれに必要なコードを提示し、私が「完了しました」と報告するまで次の手順に進まないでください。**

■ 実行してほしいタスク手順（ステップ・バイ・ステップ）
1. テストデータの直接登録: まずはSupabaseのSQLエディタから、`routines` テーブルへ直接テストデータ（Dailyのルーチン1件、今日の曜日を指定したWeeklyのルーチン1件）を INSERT するSQL文を提示してください。
2. Lambda関数作成: 新しいLambda関数（例: `routine-batch-api`）を作成し、環境変数の設定とタイムアウトの延長（1分）を行う手順を案内してください。
3. バッチ処理の実装（Python）: 実行時の現在時刻（JST）を取得し、`routines` テーブルから有効なデータを取り出し、「毎日」または「今日の曜日」に合致するものだけを `tasks` テーブルへ INSERT するPythonコードの提示（/tmpへの動的インストール処理を踏襲）。
4. Lambdaの単体テスト: マネジメントコンソール上でLambdaの「テスト」ボタンを押し、タスクが想定通りデータベースに生成されるか確認する手順。
5. EventBridgeの設定: Amazon EventBridge Schedulerを用いて、作成したLambda関数を「毎日 0:00 (タイムゾーン: Asia/Tokyo)」に定期実行するよう設定する手順。

【厳守事項】
- Pythonでの日付・曜日判定は、必ずJST（日本時間）を基準に処理されるようタイムゾーンを明示的に指定して実装してください。
- コードはそのままコピペして動く完全な状態でお願いします。

それでは、タスク手順の「1. テストデータの直接登録（SQLの提示）」から案内を開始してください。これにより、プロンプト作成にかかる時間を大幅に短縮できました。実装チャットでは、PMが作った指示書をただコピペするだけで、AIが迷うことなく正確なコードを出力してくれる最高の開発サイクルを作ることができたのです。

このように形式および進め方を統一できるプロンプトの叩き台を作ってくれることで、実装チャットへのプロンプトを作る手間と時間が大幅に減りかなりの時間短縮になりました。

3. AWS AmplifyでReactアプリをデプロイ。

そもそも「AWS Amplify」とは？フルスタック開発を加速させるホスティングサービス

AWS Amplifyとは、ウェブアプリケーションやモバイルアプリの構築・デプロイに必要なものがすべて揃っているAWSのサービスです。

↓AWSの公式サイト↓

公式ページでも”Gitからブランチを接続することで、新しい環境を簡単に立ち上げることができます”と説明されているように、複雑な設定なしでマネージドCI/CD（継続的インテグレーション/継続的デプロイ）パイプラインを構築できるのが大きな強みです。

S3 + CloudFrontで構築した時よりも遥かに「あっさり」デプロイできた感動

個人開発で作ったReactアプリをインターネットに公開する際、これまでは「Amazon S3」にファイルを置いて「CloudFront」で配信するという構成に挑戦したことがありました。

しかし今回、Amplifyを使ってGitHubリポジトリと連携しデプロイを行ってみたところ、以前よりも遥かに「あっさり」と公開できてしまい本当に驚きました。

GitHubからブランチを接続し、環境変数を設定するだけで自動でビルドが走ります。
実際のデプロイ作業は、以下の4ステップで完結しました。

ステップ①：GitHubへコードをPush（※機密情報が書かれた .env ファイルは必ず除外する）

ステップ②：AWS Amplifyのコンソール画面から、該当のGitHubリポジトリとブランチを連携
※最初はデプロイが失敗しても気にしなくてOK

ステップ③：Amplifyの管理画面上で、除外した環境変数（APIのURLやマスターパスワード等）を手動で登録

ステップ④：Vite用のビルド設定（出力先ディレクトリを「dist」にするなど）を微調整し、再デプロイを実行

※注意
ビルド時には「未使用の関数」がコードに残らないようにしてください！
残っていると、ビルドチェックに弾かれてしまい、デプロイが失敗（Failed）してしまいます

たった４ステップでデプロイ完了！公開ステップの手軽さに驚きました。

S3 + CloudFrontでのデプロイについては以下の記事をご一読ください！

セキュリティやドメイン設定の手間を省き、個人開発アプリの公開ハードルを下げる

AWSを使ってアプリを公開すること自体、触ったことがない人にとっては学習コストが決して低くはなく、ハードルが高い作業だと思われがちです。

しかし実際に触ってみると、自分でセキュリティをガチガチに組んだり、ドメインを取得して設定したりする莫大な手間を考えると、Amplifyを使うことでデプロイ・公開のハードルは劇的に下がると実感しました。

もちろん、環境変数をしっかり設定しないとエラーになってしまったり、セキュリティの設定は別途おこうなう必要がありますが、それらを差し引いても、簡単なアプリを開発し公開するハードルはかなり下がっているように思います。

4. まとめ：AWSへのデプロイハードルは下がり、誰もがアプリを公開できる時代へ

これまでアプリをインターネットに公開するということは、触ったことがない人にとっては学習コストが高く、非常にハードルの高い作業だと思っていました。

しかし、今回の開発と公開を通して、個人開発やAWSへのデプロイのハードルは劇的に下がっていると肌で実感しました。

AIという最高の相棒と、AWSのような便利なサービスを活用すれば、一部の天才エンジニアだけでなく、誰もが自分のアイデアを形にして公開できる時代になっています。

この簡単になった感動と同時に、学び続けないとな。という危機感もより自分の中に芽生えてきました！
いろんなものを触って学んで成長していきたいものです。

最後に！
Xでも日々学びや開発について発信しています！ぜひ気軽にフォローしてください！