WEEK 04
データが消えないアプリにする週
Supabase に接続して「本物の DB」を持つ
所要時間
Day 1: 45分 / 週合計: 約4時間
ツール
Lovable Pro + Supabase (無料枠)
費用
約3800円 (Lovable Pro のみ、Supabase は無料枠で OK)
とにおのひとこと
Week 3 まではブラウザのローカル保存。 PC 変えたら消える、家族と共有できない。 Week 4 で「ちゃんとしたアプリ」になる。 ここから少し概念が増える、でも Lovable が裏で配線してくれるからこっちは「Supabase 接続して」って言うだけ。
なぜ今週これをやるのか
localStorage の世界は「自分の中だけ」。 Supabase に繋ぐと「世界中からアクセスできる自分のデータ」になる。 これが「本物のアプリ」と「お遊びアプリ」の境目。 Week 5-6 で AI 連携するには Supabase 必須。 だから Week 4 が踏ん張りどころ。
始める前に必要なもの
- Week 1-3 完了
- メアド (Gmail 等) と、忘れないパスワードを 1つ用意する (Supabase 用)
今週初めて出てくる言葉
分からない言葉が出てきたら、ここに戻って確認していい。 全部覚えなくていい、使ってるうちに自然に身につく。
データベース (DB)
データを保存する大きな倉庫。 自分のサーバーじゃなくて、Supabase というサービスが代わりに持ってくれる。
Supabase (スーパベース)
データベースとログイン機能をくれる無料サービス。 supabase.com。 Lovable と相性が良い。
テーブル
DB の中の「Excel のシート」みたいなもの。 「タスク一覧」「ユーザー一覧」など、用途ごとに分ける。
カラム
テーブルの「列」。 Excel の B列、C列、みたいな。 「名前」「日付」「内容」とか。
SQL (エスキューエル)
DB に「これ取って」「これ保存して」と頼む言葉。 自分で書かない、Lovable が書いて Supabase に貼ればいい。
認証 (Auth)
「あなた誰?」を確認する仕組み。 Google ログインなど。 これがあると「自分のデータだけ見える」ができる。
RLS (アールエルエス)
「Row Level Security」の略。 「自分のデータだけ自分が見える、他人は見れない」を強制する仕組み。 Lovable が設定する、こっちは「これ ON にして」と頼むだけ。
今週の卒業条件
リロードしてもデータが残る、別のブラウザ・PC からアクセスしても自分のデータが見える、複数人で使える状態。
日々の進め方
各ステップに「なぜ」「やり方」「こうなれば成功」「詰まったら」がある。 焦らない、1日 1ステップでも OK。
Day 1
45分
Supabase アカウント作成 + プロジェクト作成
1
supabase.com にアクセス
なぜ
まず Supabase という会社のサービスに入る。 Lovable と同じく、自分のアカウント作って、その中にプロジェクトを作る構造。
やり方
ブラウザで supabase.com を開く。 「Start your project」「Sign up」みたいなボタンを押す。
こうなれば成功
サインアップ画面が見える。
2
GitHub または Email でサインアップ
なぜ
GitHub アカウントある人は連携、ない人は普通に Email でアカウント作る。 GitHub なしで困らない。
やり方
Email を入れて、パスワードを設定。 確認メールが届くので、リンクをクリック。 GitHub ある人は GitHub ボタンで一発。
こうなれば成功
Supabase の Dashboard 画面が開いた状態。
詰まったら
「GitHub って何?」: 開発者向けのサービス、なくていい。 Email サインアップで進む。
3
新しい Project を作る
なぜ
Lovable と同じく「プロジェクト」単位。 1プロジェクト = 1個の DB。
やり方
Dashboard で「New Project」を押す。 入力する項目:
・Project name (なんでも、例:「my-todo-db」)
・Database Password (自分で考える、メモる、忘れない)
・Region: 「Northeast Asia (Tokyo)」を選ぶ (日本だから速い)
「Create new project」を押す。 1〜2分待つ、DB がプロビジョニングされる。
こうなれば成功
プロジェクトの画面 (Dashboard) が開いた、緑色の「OK」表示。
詰まったら
パスワード: パスワードマネージャー (1Password、Apple Keychain、Google Password Manager) に保存しとくと忘れない。 / 「Region で日本がない」: 一番近い「Northeast Asia」「East Asia」を選ぶ。
4
Project URL と anon key をメモる
なぜ
これが Lovable と Supabase を繋ぐ「鍵」。 後で 1回使うのでコピペできる場所に保存。
やり方
Supabase Dashboard の左メニュー「Settings」(歯車アイコン) → 「API」を押す。 画面の中央に:
・Project URL (https://xxxxx.supabase.co みたいな)
・anon public key (eyJ で始まる長い文字列)
の 2つがある。 両方コピーして、自分のメモアプリに保存。 これは 1回しか出ないわけじゃないので、何回でも確認できる、安心。
こうなれば成功
URL と key の 2つがメモにある状態。
詰まったら
「key って漏れたらヤバいんじゃ?」: anon key は「公開しても OK な鍵」と Supabase 公式が言ってる。 ただし「service_role」と書いてある別の key は絶対漏らさない、これは Lovable 画面でも使わない。
成果物: Supabase プロジェクト URL + anon key の 2つがメモにある
Day 2
45分
Lovable と Supabase をつなぐ
1
Week 3 のアプリを Lovable で開く
なぜ
Week 3 で作った自分の生活ツールを「DB 接続版」に昇格させる。
やり方
lovable.dev で Sign in、Week 3 のプロジェクトを開く。
こうなれば成功
Week 3 のアプリが Preview に表示される。
2
Supabase 接続プロンプト
なぜ
Lovable に「DB を Supabase に変えて、URL と key はこれ」と渡す。 自分は文字列をコピペするだけ。
やり方
プロンプト例:
「このアプリのデータを localStorage じゃなく Supabase に保存するようにして。
Supabase URL: [メモから貼る]
anon key: [メモから貼る]
必要なテーブルを Lovable 側で考えて作って、SQL を表示して」
こうなれば成功
画面下に SQL の長い文字列が表示される。 「これをコピーして Supabase の SQL Editor で実行してください」みたいな指示が出る。
詰まったら
「SQL って何?」: DB に対する命令文。 自分で書かない、コピペするだけ。
3
Supabase の SQL Editor で SQL を実行
なぜ
Lovable がくれた SQL を Supabase に貼って「Run」を押すだけ。 これでテーブルが作られる。
やり方
Supabase の左メニュー「SQL Editor」を押す。 真ん中に大きな入力欄、Lovable がくれた SQL を全部貼る。 右下の「Run」ボタンを押す。
こうなれば成功
緑色の「Success」表示。 左メニュー「Table Editor」を押すと、新しいテーブルがある。
詰まったら
赤いエラーが出た: Lovable に戻って「Supabase で SQL 実行したらこのエラーが出た: [エラー貼る]、修正して」と再プロンプト。
4
アプリで動作確認
なぜ
データが Supabase に入るか確かめる。
やり方
Lovable の Preview でアプリを開く。 タスクを 3個追加する。 Supabase の「Table Editor」を開いて、自分のテーブルを見る。 タスク 3個がレコードとして入ってれば成功。
こうなれば成功
Supabase Table Editor に自分のタスクが見える。
詰まったら
データが入らない: Lovable に「タスクを追加してもSupabase に保存されてない、修正して」と再プロンプト。
成果物: DB に保存できるアプリ
Day 3-5
計 1.5時間
ログイン機能を追加
1
ログイン機能追加プロンプト
なぜ
「自分のデータだけ自分が見える」状態にする。 これがないと、URL を知ってる人全員が同じデータ見える、それは困る。
やり方
プロンプト:
「Google ログイン機能を追加。 ログインした人だけアプリを使える。 各タスクは「作成者」と紐付けて、自分が作ったタスクだけ表示する。 RLS のポリシーも書いて」
こうなれば成功
Lovable がコードを更新、また新しい SQL を出すか、Supabase 側で設定する手順を表示する。
2
Supabase で Google 認証を有効化
なぜ
初期状態では Google ログインは OFF。 自分で「ON にして」と Supabase に伝える必要がある。
やり方
Supabase Dashboard → Authentication → Providers → Google の項目を ON。 Google Cloud Console の手順が出るが、Lovable に「Google 認証の設定で詰まってる、どう設定すればいい?」と聞けば手順を出してくれる。
こうなれば成功
Authentication の画面で Google プロバイダが緑のチェック。
詰まったら
Google Cloud Console が難しい: ここが Week 4 最大の壁。 1〜2時間取られる人もいる、それで普通。 詰まったら note や Discord で晒す、人がいるはず。
3
自分でログインして動作確認
なぜ
本当に「自分しか見えない」状態か確かめる。
やり方
アプリを開く、Google でログイン、タスクを追加。 シークレットモード (またはブラウザのプライベートウィンドウ) で同じアプリを開く、ログイン要求される、自分のタスクは見えない、これが正しい。
こうなれば成功
別ブラウザでログインしない状態だと、データが見えない。 ログインすると見える。
成果物: 認証つきアプリ
Day 6-7
計 30分
別端末からアクセスして驚く
1
スマホで自分のアプリの URL 開く
なぜ
マルチデバイス対応の確認。 PC で入れたデータがスマホで見える、これが「本物のアプリ」の感覚。
やり方
スマホで URL を開く。 Google ログイン。 PC で入れたタスクが見える。 スマホでタスク追加。 PC でリロード、追加したタスクが見える。
こうなれば成功
PC ↔ スマホで同じデータが見える。
2
Week 4 卒業ツイート
なぜ
ここまで来た事実を残す。 Week 4 は脱落者多い、卒業した人は「あの壁を越えた人」になる。
やり方
例:「Week 4 終わった。 DB 繋いだ、ログインつけた、スマホからアクセスできる、これ俺のアプリだ: [URL]。 認証は地獄だった、でも越えた」
こうなれば成功
X に投稿。
成果物: マルチデバイスで使える認証つきアプリ
つまずきポイント (先回り Q&A)
詰まったらここを読む。 答えがなければ Discord か X で聞いていい。
Q. Supabase の SQL とか出てきて急にハードル上がった
A. SQL は読まなくていい。 Lovable が生成した文字列を「コピペ → Run ボタン」だけ。 緊張するけど機械的作業。 1回やれば慣れる。
Q. 「permission denied」エラーが出る
A. Row Level Security (RLS) という機能の設定不足。 Lovable に「RLS のポリシーを書いて、自分のデータだけ見れるように」と追加プロンプト。
Q. 認証が動かない
A. Supabase Authentication → URL Configuration で Lovable のアプリ URL を「Site URL」と「Redirect URL」に追加してない可能性。 ここ忘れがち。
Q. Google Cloud Console が複雑すぎる
A. Week 4 の最大の壁、しかし永遠ではない。 「OAuth クライアント ID」を作る作業。 Lovable に「Google Cloud Console の OAuth クライアント ID 作る手順を 1ステップずつ教えて」と聞くと丁寧に教えてくれる。 60分かけていい。
Q. 怖い、何やってるか分からない
A. 「分からないまま動かす」がバイブコーディング。 1ヶ月後に振り返ったら「あれは認証だったのか」と分かる。 今は分からなくていい、機械的にやる。
Q. Supabase の無料枠で大丈夫?
A. 個人開発・10人未満で使うなら無料枠で 1年以上は持つ。 「Free」プランで500MB DB + 2GB ストレージ + 50,000 アクセス/月。 個人用には超余裕。
Q. Supabase じゃなく Firebase でもいい?
A. いい。 Lovable は両方サポート。 ただし教材は Supabase 前提で書いてる、混乱するなら Supabase 推奨。 「俺は Firebase 派」って人は Firebase で進めて Lovable に「Firebase で」と指定。
Q. 俺だけのアプリなのに認証要らないんじゃ
A. いる。 URL がインターネット上にあると、誰でもアクセスできちゃう。 「俺しか使わないアプリ」でも認証はかける。 これ Week 5-6 で AI API 使うときも安全のために必須。
Q. 料金 (Lovable Pro + Supabase + Google) で気付かないうちに高額にならない?
A. Supabase Free と Google OAuth は無料。 Lovable Pro が $25/月、これだけ。 高額にはならない、安心。
Q. 本当に「データベース」って俺の中に作っちゃっていいの?
A. 作っていい。 むしろ世の中の Web アプリは全部 DB を持ってる。 Yahoo!、楽天、Twitter、LINE、全部 DB。 「DB を持つ人」になっただけ。
卒業チェック
Supabase 接続 + 認証つき + スマホからアクセス可 + Week 4 卒業ツイート投稿。
週末のとにお
Week 4 を超えた人は中年・非IT で 10% 切る。 もう「俺は普通の人と違うもの作ってる」って思っていい。 Week 5 から本丸の英語学習アプリ。 ここまでの全部が伏線回収される。
次の週に向けて
Week 5 で英単語フラッシュカードアプリを作る。 ここまでの UI / 機能 / DB / 認証 を統合した「本格 MVP」になる。