バックエンド入門

7-1バックエンドで何が変わるのか

基礎編のToDoアプリはlocalStorage保存でした。これには限界があります。スマホとPCでデータが共有されない、家族と一緒に使えない、ブラウザのデータを消すと全部消える——。

バックエンドがあると、できること

構成のイメージ

【今まで】
ブラウザ ←→ localStorage（同じ端末の中）

【これから】
ブラウザ ←→ インターネット ←→ データベース（クラウド上）
                                ↑
                  スマホからも、家族の端末からも同じデータに届く

7-2BaaSという近道 — Supabaseとは

本来、バックエンドを作るにはサーバーの構築・管理という大仕事が必要です。しかし今はBaaS（Backend as a Service）という「できあいのバックエンドを借りるサービス」があります。

代表的なBaaS

Supabaseで借りられるもの

• データベース — データの保管庫（次レッスンで詳しく）
• 認証 — ログイン機能の仕組み一式（メール認証、Google認証など）
• ストレージ — 画像などのファイル置き場

これらを無料枠の範囲で、管理画面からポチポチ設定するだけで使えます。個人開発の規模なら無料枠でほぼ事足ります。

7-3Supabaseをはじめる

アカウント作成とプロジェクト準備

1. supabase.com にアクセスし、GitHubアカウントでサインアップ（第6章で作ったアカウントが使えます）
2. 「New Project」でプロジェクトを作成。名前は自由（例：my-todo-cloud）、リージョンは「Northeast Asia (Tokyo)」を選択
3. データベースのパスワードを設定（パスワード管理ツール等に必ず控える）

接続情報を確認する

プロジェクトができたら、Settings → API で次の2つを確認できます。アプリからSupabaseに接続するときに使う「住所と入場券」です。

• Project URL — あなたのSupabaseの住所
• anon key（公開キー） — ブラウザアプリ用の入場券。これは公開されても想定内のキー（後のレッスンで詳しく）

Supabaseのプロジェクトを作りました。
Project URLとanon keyを渡すので、このアプリから
Supabaseに接続できるよう設定してください。

URL: （ここに貼り付け）
anon key: （ここに貼り付け）

7-4データベースの基本

データベース（DB）は「データの保管庫」ですが、実体はExcelの表によく似ています。

3つの基本用語

SQLとは

データベースへの命令語をSQLと呼びます。読めなくて大丈夫ですが、雰囲気だけ見ておきましょう。

-- todosテーブルから未完了のタスクを取り出す
SELECT * FROM todos WHERE done = false;

-- 新しいタスクを追加する
INSERT INTO todos (content, done) VALUES ('買い物に行く', false);

英語として素直に読めば意味が伝わるはずです。実際の開発ではSQLもClaude Codeが書いてくれます。あなたは「テーブル＝表、カラム＝列、レコード＝行」の対応だけ覚えておけば、AIの説明が理解できます。

7-5ToDoアプリをクラウド対応にする

準備が整いました。第6章で作ったToDoアプリを、localStorage保存からSupabase保存に切り替えます。

進め方

このToDoアプリのデータ保存先を、localStorageから
Supabaseのデータベースに切り替えたいです。

【Supabase情報】
- Project URL: （貼り付け）
- anon key: （貼り付け）
- テーブル名: todos（作成済み）

【お願い】
1. まず現状のコードを確認して、変更計画を説明してください
2. 私がOKと言ってから着手してください
3. 切り替え後、追加・完了・削除が同期されることを
   確認する手順も教えてください

動作確認のポイント

• タスクを追加 → Supabaseの「Table Editor」画面にデータが現れるか
• ページを再読み込み → データが復元されるか
• 別の端末（スマホ）から開く → 同じデータが見えるか（これが感動の瞬間です）

7-6ログイン機能をつける

今のままでは、URLを知っている人全員が同じToDoリストを見てしまいます。「ユーザーごとに自分のデータだけ見える」ようにするのが認証（ログイン機能）です。

認証の仕組み（ざっくり）

1. ユーザーがメールアドレス＋パスワードで登録（サインアップ）
2. ログインすると「本人証明書（トークン）」がブラウザに発行される
3. 以降のデータ操作には自動で証明書が添えられ、サーバーは「この人のデータだけ」を返す

この仕組みを自作するのは大変ですが、Supabaseの認証機能（Supabase Auth）を使えばClaude Codeにほぼお任せできます。

このToDoアプリにログイン機能を追加してください。

【要件】
- メールアドレス＋パスワードで新規登録・ログイン・ログアウト
- ログインしていない人にはログイン画面だけ表示
- タスクはユーザーごとに分かれて保存される
- Supabase Authを使う

まず必要な作業の全体像を説明してください。
Supabase側の設定が必要なら、その手順も案内してください。

7-7公開前のセキュリティ基礎

データを預かるアプリには、安全のための最低限の作法があります。難しい理論は不要。次の4つを守れば、個人開発として十分な水準です。

セキュリティ4つの作法

1. RLSを必ず有効にする — RLS（Row Level Security）は「自分の行（データ）しか触れない」ようにするSupabaseの仕組み。テーブルごとに有効化し、ルール（ポリシー）を設定します。Claude Codeに「全テーブルにRLSが正しく設定されているか確認して」と頼めばチェックできます。
2. 秘密のキーは公開しない — service_role keyやパスワードをコードに書かない。GitHubに上げる前に「公開してはいけない情報が含まれていないか確認して」とAIにチェックさせる習慣を。
3. パスワードは使い回さない — Supabase・GitHub・Cloudflareなど、サービスごとに別のパスワード＋可能なら二段階認証を。
4. 個人情報は最小限に — 名前や住所など、アプリに本当に必要なデータ以外は集めない。持っていないデータは漏れようがありません。

このアプリを公開する前にセキュリティチェックをしたいです。
以下の観点でコードと設定を確認して、問題点と対策を
初心者向けに説明してください。
1. 公開してはいけないキーや情報が含まれていないか
2. SupabaseのRLS設定は適切か
3. その他、個人開発として最低限やるべき対策