「AIに頼んだらアプリができた。画面も綺麗で、ボタンもクリックできる！ちょっと待って…でも何かおかしい…ログインはできないし、データも保存されないし、決済ボタンを押しても何も起こらない！？」

AIでコーディングしていると、最初はうまくいくのに突然詰まって進まなくなることがありますよね？

コーディングを知らなくてもAIでWebサービスを作る方法 - 第1部では、AIコーディングツールでアプリの見た目を作ってインターネットに公開するまでの全体の流れを扱いましたが、第2部では、Webサービスに欠かせない「データ保存」と「ログイン」機能を追加する方法を一緒に学びましょう。

1. データを保存する

• To-Doアプリを作ったのに、画面を再度開いたら入力した内容が消えていた

• 会員登録画面を作ったのに、実際にログイン機能が動作しない

• コミュニティ掲示板を作ったのに、自分が書いた記事が他の人には見えない

これらすべての問題の共通の原因は一つ。​データを保存する場所がまだないからです。​

画面に表示されているデータは、ブラウザが開いている間だけ維持される一時的な状態に過ぎず、どこかに保存しておかなければ、ウィンドウを閉じた瞬間にすべて消えてしまいます。こういうときは、ユーザーが入力した情報を別途保存しておき、いつどこからアクセスしても同じデータを見られるようにするデータベースが必要です。データベースは種類が色々ありますが、会社でよく使うExcelスプレッドシートに似ていると考えると理解しやすいですよ。

---

① Supabase — 何を使えばいいか迷ったら、まずこれ！

Supabaseは、Webサービスを作るときにほぼ必ず必要なデータ保存・ログイン・ファイル保存機能を一度に提供するプラットフォームです。初期サービス運営に十分なレベルまでほぼ無料で使えて、AIコーディングツールと連携すれば専門知識がなくても簡単に使えるのが大きな強みです。

1. どんなときに必要？

• 商品一覧・ニュース・ブログのように大量の情報を保存してWebに表示したいとき

• ログイン・マイページ機能が必要なとき

• 掲示板・コメント・いいねのように複数のユーザーがデータを共有する必要があるとき

• ファイル・画像アップロード機能が必要なとき

• リアルタイムチャット・通知のようにデータが画面にすぐ反映される必要があるとき

2. AIコーディングツールとSupabaseを連携する

STEP 1 — Supabaseアカウントを作る

supabase.com にアクセス → Start your project をクリック → GitHubアカウントまたはメールで登録

STEP 2 — プロジェクトを作成

New project をクリック → プロジェクト名・DBパスワード・Region（Asia Pacific または Northeast Asia）を入力して作成

STEP 3 — AIコーディングツールにMCPを接続

CursorやClaude CodeなどのMCP設定に以下のURLを1行追加します。

https://mcp.supabase.com/mcp

Claude Codeアプリでは コネクタ → コネクタを探す でSupabaseを見つけられます。
保存するとブラウザが自動で開きます。Supabaseアカウントでログインすれば接続完了。

3. MCP接続後にできること

1. 情報を保存してWebに表示

   • ​「Supabaseに商品テーブルを作って。名前・価格・在庫・画像URLカラムを含めて」​
   • ​「ブログ記事を保存するpostsテーブルと、ユーザー情報を入れるprofilesテーブルを作って」​

2. ログイン・マイページの実装

   • ​「Supabase AuthでGoogleログインができて、ログインした人だけマイページを見られるアプリを作って」​
   • ​「ログインしたユーザーだけが自分の記事を編集・削除できるようにSupabase RLSを設定して。閲覧は誰でもできるように」​

3. 複数のユーザーがデータを共有

   • ​「掲示板アプリを作って。記事の書き込み・編集・削除はログイン後に可能で、一覧は誰でも見られるように」​
   • ​「いいねはログインした人だけ押せて、重複クリックは防いで」​

4. ファイル・画像アップロード

   • ​「自分のアプリにSupabaseを接続して。必要なパッケージをインストールして、Supabaseの接続情報も環境設定ファイルに保存して」​
   • ​「画像アップロード機能を追加して。Supabase Storageにアップロード先を作ってアプリと接続まで」​

5. データをリアルタイムで画面に反映

   • ​「コメントを書いたらリロードなしにすぐ表示されるようにSupabase Realtimeで接続して」​
   • ​「チャット機能を作って。メッセージを送ったら相手の画面にすぐ表示されるようにSupabase Realtimeを使って」​

---

② Upstash — 速くて便利な補助ストレージ

Supabaseがすべてのデータを保管しておくメイン倉庫なら、Upstashはよく使うものをすぐ手の届く場所に置いておく棚です。両者は役割が異なる独立したツールで、サービスが大きくなるほど一緒に使うことが多くなります。

Upstashには一時ストレージ（Redis）と時間指定タスク（QStash）という2つの代表的な機能があります。

1. どんなときに必要？

• 閲覧数・ランキング・人気リストのようによく読まれるデータをより速く表示したいとき

• 同じ人が過度にリクエストするのを防ぐ必要があるとき（アクセス回数制限）

• 決済完了後の領収書メール・毎日の通知のような予約タスクが必要なとき

• Vercel・Next.js環境で軽量なストレージが必要なとき

2. AIコーディングツールとUpstashを連携する

STEP 1 — Upstashアカウントを作る

console.upstash.com にアクセス → Create account → メールまたはGoogleアカウントなどで登録

STEP 2 — APIキーを発行

console.upstash.com にログイン後、右上のアカウントアイコン → Developer API → Create API Key → 任意の名前を入力しNo Expirationを選択 → 生成されたAPIキーをコピー

STEP 3 — AIコーディングツールにMCPを接続

Upstash登録メールと発行したAPIキーをAIコーディングツールに伝えれば接続完了です。
​「Upstash MCPを接続して。メールは[自分のメール]、APIキーは[コピーしたキー]だよ」​

3. MCP接続後にできること

1. よく読まれるデータを速く表示

   • ​「商品一覧や人気コンテンツをあらかじめ用意して、ページごとにDBを再度読み込まないようにして」​

2. アクセス回数制限

   • ​「同じユーザーが1分に10回以上リクエストしたらブロックして。Upstashで回数制限を実装して」​

3. 決済・登録後の予約タスク

   • ​「決済完了後5分後に領収書メールを自動送信して。Upstashで予約設定して」​
   • ​「毎日午前9時にユーザーに通知メールを送る機能を作って」​

4. 軽量な一時ストレージ

   • ​「Next.jsアプリでログインセッション情報を保存する軽量なストレージが必要。Upstashを接続して」​

---

2. ログイン機能を実装する

ログインは単純な「機能」ではなく、​セキュリティや運用までを含めたシステムです。
たとえば、以下のような技術をすべて考慮する必要があります。

• パスワードを安全に暗号化して保存（流出しても元のパスワードがわからないように）

• ログイン状態の維持（ウィンドウを閉じてもログアウトしないように）

• 不正アクセスのブロック（同じアカウントに何百回もログイン試行するハッキングなど）

• メール認証・パスワードリセットなどのユーザー利便機能

とくにセキュリティが甘いと、個人情報漏洩・アカウント乗っ取りなどの深刻な問題につながりかねません。そのため小規模なサービスでは自前で実装するより認証（Auth）サービスを使うことが多いです。

---

2-1. Supabase Authで基本ログインを実装する

Supabaseはデータベース機能だけでなく、​会員登録・ログイン・ログアウトからログイン状態の維持まで必要な機能をまとめた認証サービスを提供します。基本的なメール/パスワードログインからソーシャルログイン（SSO）まで無料で簡単に使えて便利です。

STEP 1 — Authenticationを有効化

Supabaseダッシュボード → Authentication タブ → Sign In / Providers → Auth Providers → Enable email provider（Emailを有効化）

• Confirm email：ON推奨（登録後にメール認証が必要 → スパム・ボット登録防止）

• Secure email change：ON推奨（メール変更時に旧アドレスへ確認メール送信）

STEP 2 — アプリで登録・ログインUIを構成

AIコーディングツールに以下のように依頼しましょう。前のステップでAIとSupabaseをMCPで接続した場合のみ動作します。

• ​「Supabase Authでメール/パスワードの会員登録・ログインUIを作って、登録後にメール認証の案内メッセージも表示して。ログイン成功後はマイページに移動するようにして」​

STEP 3 — ログイン後に会員情報を取得

ログインが完了したら会員情報（名前・メールなど）を取得してマイページに表示します。

• ​「ログインした自分の名前とメールをマイページ上部に表示して」​

• ​「ログインしていない状態でマイページのURLに直接アクセスしたらログインページに移動させて」​

STEP 4 — Site URLとRedirect URLの設定 ⚠️ 重要

Authentication → URL Configuration メニューで設定します。

Site URL（基本リダイレクト先）

• ログイン・メール認証・パスワードリセット後にユーザーが戻る基本ページのアドレスです。

• 最初は http://localhost:3000 になっているため、​デプロイ後に必ず実際のドメインに変更してください。
  例）https://example.com

Redirect URLs（許可する追加アドレス一覧）

• Site URL以外に接続を許可するアドレスを追加します。

• ローカル開発と本番環境を同時に使う場合は両方登録する必要があります。

• /** ワイルドカードを使うと、そのドメインのすべてのサブパスを許可できます。

環境	追加するURLの例
ローカル開発	http://localhost:3000/**
Vercelプレビュー	https://*-my-project.vercel.app/**
Vercel 本番環境	https://example.com/**

---

2-2. ソーシャルログイン（SSO）を追加する

基本ログイン実装後、​Googleなどの外部アカウントでログインするソーシャルログイン機能を追加できます。
ソーシャルログインを使うには、別途各プラットフォームで認証手続きを踏む必要があります。

ソーシャルログイン（SSO）の詳細は以下の記事を参照してください。​
SSO(Single Sign-On) — 1つのアカウントで複数のサービスをまとめて使う方法

Googleの例

STEP 1. SupabaseダッシュボードでコールバックURLをコピー

Authentication → Sign In / Providers → Auth Providers → Google を選択 → 画面に表示された Callback URL (for OAuth) をコピー

STEP 2. Google Cloud ConsoleでOAuthアプリを登録

1. Google Cloud Console にアクセス → プロジェクトを作成

2. Google Auth Platform > Branding でアプリ名・メールなどを入力

3. Google Auth Platform > Clients > Create Client → アプリケーションの種類：ウェブアプリケーション

4. Authorized redirect URIs に手順1でコピーしたSupabaseコールバックURLを入力

5. 生成されたClient IDとClient secretをコピー ⚠️ secretはこの画面でのみ確認可能

STEP 3. Supabaseダッシュボードに発行したキーを入力

Supabaseの画面に戻り、GoogleのClient IDとClient Secret (for OAuth)を入力してSaveをクリックします。