はじめに
プログラミング初心者に「認証付きのWebアプリ」を作ってもらう。これは従来なら中級者向けの課題でした。
しかし、SupabaseのAuth機能とClaude Codeを組み合わせると、初心者でも認証付きCRUDアプリを理解しながら構築できます。
この記事では、初心者向けカリキュラムでSupabase認証を扱う際の設計と、Claude Codeがどう学習をサポートするかを解説します。
なぜSupabaseを選んだのか
初心者に認証を教える選択肢はいくつかあります。
| 選択肢 | メリット | デメリット |
|---|---|---|
| Firebase Auth | ドキュメント豊富 | Googleエコシステムへの依存 |
| Auth0 | 高機能 | 設定が複雑、初心者には過剰 |
| NextAuth.js | Next.js統合 | プロバイダー設定の理解が必要 |
| Supabase Auth | SQL知識と直結、ダッシュボードで可視化 | 比較的新しい |
Supabase Authを選んだ最大の理由は、データベースと認証が同じ管理画面で見えることです。
初心者にとって「ログインしたユーザーのデータだけを表示する」という概念は抽象的ですが、Supabaseなら管理画面でauth.usersテーブルと自分のテーブルを並べて見られます。
CLAUDE.mdでの学習制御
## 認証セッション（セッション15-16）
### フェーズ: guided（ガイド付き実装）
学習者が認証フローを実装する際の対応ルール:
- signUp/signInの関数は学習者に書かせる
- エラーハンドリングは一緒に考える
- RLS（Row Level Security）の概念はSQL文を見せながら説明
- 「なぜこのポリシーが必要か」を必ず問いかける
ポイントは、Claude Codeに**「答えを教えず、考えさせる」**モードを設定していることです。
実際のコード例
学習者が書く認証コンポーネントの例:
// app/login/page.tsx
'use client'
import { createClient } from '@/utils/supabase/client'
import { useState } from 'react'
export default function LoginPage() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const supabase = createClient()
const handleLogin = async () => {
const { error } = await supabase.auth.signInWithPassword({
email,
password,
})
if (error) {
alert(error.message)
}
}
return (
<div>
<input value={email} onChange={(e) => setEmail(e.target.value)} />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
<button onClick={handleLogin}>ログイン</button>
</div>
)
}
このコードを学習者が書く際、Claude Codeは以下のように振る舞います:
-
createClientの役割を聞かれたら → Supabaseとの接続を作る関数だと説明 -
signInWithPasswordのエラーを聞かれたら → よくあるエラー（メール未確認、パスワード不一致）を列挙 - 全体を書いてと言われたら → 「まずフォームのUIから書いてみましょう」と段階的に誘導
RLSの教え方
認証の次に難しいのがRLS（Row Level Security）です。
-- 自分のデータだけ見えるポリシー
CREATE POLICY "Users can view own data"
ON todos
FOR SELECT
USING (auth.uid() = user_id);
CLAUDE.mdでは、このSQLを見せた上で「このポリシーがないとどうなる？」と学習者に考えさせるよう指示しています。
「他の人のTodoが見えちゃう」という答えにたどり着くと、RLSの必要性が腹落ちします。
まとめ
- Supabaseは認証とDBが一体なので初心者の理解が早い
- Claude Codeの振る舞いをCLAUDE.mdで制御し「教えすぎない」を実現
- RLSは「なぜ必要か」から入ると定着率が高い
この教材を使ったプログラミング学習サポートをMENTAで提供しています。→ https://menta.work/plan/20251
YouTubeでもAI×プログラミングの情報を発信中 → https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/