supabase-api
SupabaseのJavaScriptクライアントAPIやREST APIを活用して、Supabaseとの連携、クライアント設定、RESTエンドポイントの直接利用などをスムーズに行えるように支援するSkill。
📜 元の英語説明(参考)
Supabase JavaScript client API and REST API usage. Use when integrating Supabase, setting up clients, or using REST endpoints directly.
🇯🇵 日本人クリエイター向け解説
SupabaseのJavaScriptクライアントAPIやREST APIを活用して、Supabaseとの連携、クライアント設定、RESTエンドポイントの直接利用などをスムーズに行えるように支援するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o supabase-api.zip https://jpskill.com/download/9499.zip && unzip -o supabase-api.zip && rm supabase-api.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9499.zip -OutFile "$d\supabase-api.zip"; Expand-Archive "$d\supabase-api.zip" -DestinationPath $d -Force; ri "$d\supabase-api.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
supabase-api.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
supabase-apiフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Supabase API Skill
JavaScript クライアントと REST API のリファレンスです。
インストール
npm install @supabase/supabase-js
クライアントの初期化
ブラウザクライアント
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
'https://your-project.supabase.co',
'your-anon-key'
)
TypeScript の型を使用する場合
import { createClient } from '@supabase/supabase-js'
import { Database } from './database.types'
const supabase = createClient<Database>(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
サーバークライアント (Service Role)
const supabaseAdmin = createClient(
process.env.SUPABASE_URL,
process.env.SUPABASE_SERVICE_ROLE_KEY,
{
auth: {
autoRefreshToken: false,
persistSession: false
}
}
)
カスタムオプション
const supabase = createClient(url, key, {
auth: {
persistSession: true,
autoRefreshToken: true,
storage: localStorage,
storageKey: 'supabase-auth'
},
global: {
headers: { 'x-custom-header': 'value' }
},
db: {
schema: 'public'
},
realtime: {
params: {
eventsPerSecond: 10
}
}
})
REST API Direct
API URL フォーマット
https://<project-ref>.supabase.co/rest/v1/<table>
ヘッダー
const headers = {
'apikey': 'your-anon-key',
'Authorization': 'Bearer your-anon-key',
'Content-Type': 'application/json',
'Prefer': 'return=representation' // Return data after mutation
}
Select (GET)
# All rows
curl 'https://xxx.supabase.co/rest/v1/users' \
-H "apikey: $SUPABASE_KEY" \
-H "Authorization: Bearer $SUPABASE_KEY"
# Specific columns
curl 'https://xxx.supabase.co/rest/v1/users?select=id,name,email' \
-H "apikey: $SUPABASE_KEY"
# With filter
curl 'https://xxx.supabase.co/rest/v1/users?status=eq.active' \
-H "apikey: $SUPABASE_KEY"
# With pagination (query params)
curl 'https://xxx.supabase.co/rest/v1/users?limit=10&offset=0' \
-H "apikey: $SUPABASE_KEY"
# With pagination (Range header - alternative)
curl 'https://xxx.supabase.co/rest/v1/users' \
-H "apikey: $SUPABASE_KEY" \
-H "Range: 0-9"
# With ordering
curl 'https://xxx.supabase.co/rest/v1/users?order=created_at.desc' \
-H "apikey: $SUPABASE_KEY"
# Get count with results
curl 'https://xxx.supabase.co/rest/v1/users?select=*' \
-H "apikey: $SUPABASE_KEY" \
-H "Prefer: count=exact"
Insert (POST)
curl -X POST 'https://xxx.supabase.co/rest/v1/users' \
-H "apikey: $SUPABASE_KEY" \
-H "Authorization: Bearer $SUPABASE_KEY" \
-H "Content-Type: application/json" \
-H "Prefer: return=representation" \
-d '{"name": "John", "email": "john@example.com"}'
Update (PATCH)
curl -X PATCH 'https://xxx.supabase.co/rest/v1/users?id=eq.123' \
-H "apikey: $SUPABASE_KEY" \
-H "Authorization: Bearer $SUPABASE_KEY" \
-H "Content-Type: application/json" \
-H "Prefer: return=representation" \
-d '{"name": "John Doe"}'
Upsert (POST with Resolution)
curl -X POST 'https://xxx.supabase.co/rest/v1/users' \
-H "apikey: $SUPABASE_KEY" \
-H "Authorization: Bearer $SUPABASE_KEY" \
-H "Content-Type: application/json" \
-H "Prefer: return=representation,resolution=merge-duplicates" \
-d '{"id": 123, "name": "John"}'
Delete (DELETE)
curl -X DELETE 'https://xxx.supabase.co/rest/v1/users?id=eq.123' \
-H "apikey: $SUPABASE_KEY" \
-H "Authorization: Bearer $SUPABASE_KEY"
フィルター演算子 (REST)
| Operator | Example |
|---|---|
eq |
?status=eq.active |
neq |
?status=neq.deleted |
gt |
?age=gt.18 |
gte |
?age=gte.21 |
lt |
?price=lt.100 |
lte |
?price=lte.50 |
like |
?name=like.*John* |
ilike |
?name=ilike.*john* |
is |
?deleted_at=is.null |
in |
?status=in.(active,pending) |
cs |
?tags=cs.{sports,news} (contains) |
cd |
?tags=cd.{a,b,c} (contained by) |
or |
?or=(status.eq.active,status.eq.pending) |
and |
?and=(status.eq.active,verified.eq.true) |
JavaScript クライアント クイックリファレンス
データベース操作
// Select
const { data, error } = await supabase.from('table').select('*')
// Select with filter
const { data } = await supabase.from('table').select('*').eq('id', 1)
// Insert
const { data } = await supabase.from('table').insert({ col: 'value' }).select()
// Update
const { data } = await supabase.from('table').update({ col: 'new' }).eq('id', 1)
// Upsert
const { data } = await supabase.from('table').upsert({ id: 1, col: 'value' })
// Delete
const { error } = await supabase.from('table').delete().eq('id', 1)
// RPC (function call)
const { data } = await supabase.rpc('function_name', { param: 'value' })
認証操作
// Sign up
await supabase.auth.signUp({ email, password })
// Sign in
await supabase.auth.signInWithPassword({ email, password })
// Sign out
await supabase.auth.signOut()
// Get user
const { data: { user } } = await supabase.auth.getUser()
// Get session
const { data: { session } } = await supabase.auth.getSession()
// Auth state listener
supabase.auth.onAuthStateChange((event, session) => { })
ストレージ操作
// Upload
await supabase.storage.from('bucket').upload('path', file)
// Download
const { data } = await supabase.storage.from('bucket').download('path')
// Get public URL
const { data } = supabase.storage.from('bucket').getPublicUrl('path')
// Get signed URL
const { data } = await supabase.storage.from('bucket').createSignedUrl('path', 3600)
// Delete
await supabase.storage.from('bucket').remove(['path'])
// List
const { data } = await supabase.storage.from('bucket').list('folder')
リアルタイム操作
// Subscribe to database changes
const channel = supabase
.channel('changes')
.on('postgres_changes', { event: '*', schema: 'public', table: 'posts' }
(原文がここで切り詰められています) 📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Supabase API Skill
JavaScript client and REST API reference.
Installation
npm install @supabase/supabase-js
Client Initialization
Browser Client
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
'https://your-project.supabase.co',
'your-anon-key'
)
With TypeScript Types
import { createClient } from '@supabase/supabase-js'
import { Database } from './database.types'
const supabase = createClient<Database>(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
Server Client (Service Role)
const supabaseAdmin = createClient(
process.env.SUPABASE_URL,
process.env.SUPABASE_SERVICE_ROLE_KEY,
{
auth: {
autoRefreshToken: false,
persistSession: false
}
}
)
Custom Options
const supabase = createClient(url, key, {
auth: {
persistSession: true,
autoRefreshToken: true,
storage: localStorage,
storageKey: 'supabase-auth'
},
global: {
headers: { 'x-custom-header': 'value' }
},
db: {
schema: 'public'
},
realtime: {
params: {
eventsPerSecond: 10
}
}
})
REST API Direct
API URL Format
https://<project-ref>.supabase.co/rest/v1/<table>
Headers
const headers = {
'apikey': 'your-anon-key',
'Authorization': 'Bearer your-anon-key',
'Content-Type': 'application/json',
'Prefer': 'return=representation' // Return data after mutation
}
Select (GET)
# All rows
curl 'https://xxx.supabase.co/rest/v1/users' \
-H "apikey: $SUPABASE_KEY" \
-H "Authorization: Bearer $SUPABASE_KEY"
# Specific columns
curl 'https://xxx.supabase.co/rest/v1/users?select=id,name,email' \
-H "apikey: $SUPABASE_KEY"
# With filter
curl 'https://xxx.supabase.co/rest/v1/users?status=eq.active' \
-H "apikey: $SUPABASE_KEY"
# With pagination (query params)
curl 'https://xxx.supabase.co/rest/v1/users?limit=10&offset=0' \
-H "apikey: $SUPABASE_KEY"
# With pagination (Range header - alternative)
curl 'https://xxx.supabase.co/rest/v1/users' \
-H "apikey: $SUPABASE_KEY" \
-H "Range: 0-9"
# With ordering
curl 'https://xxx.supabase.co/rest/v1/users?order=created_at.desc' \
-H "apikey: $SUPABASE_KEY"
# Get count with results
curl 'https://xxx.supabase.co/rest/v1/users?select=*' \
-H "apikey: $SUPABASE_KEY" \
-H "Prefer: count=exact"
Insert (POST)
curl -X POST 'https://xxx.supabase.co/rest/v1/users' \
-H "apikey: $SUPABASE_KEY" \
-H "Authorization: Bearer $SUPABASE_KEY" \
-H "Content-Type: application/json" \
-H "Prefer: return=representation" \
-d '{"name": "John", "email": "john@example.com"}'
Update (PATCH)
curl -X PATCH 'https://xxx.supabase.co/rest/v1/users?id=eq.123' \
-H "apikey: $SUPABASE_KEY" \
-H "Authorization: Bearer $SUPABASE_KEY" \
-H "Content-Type: application/json" \
-H "Prefer: return=representation" \
-d '{"name": "John Doe"}'
Upsert (POST with Resolution)
curl -X POST 'https://xxx.supabase.co/rest/v1/users' \
-H "apikey: $SUPABASE_KEY" \
-H "Authorization: Bearer $SUPABASE_KEY" \
-H "Content-Type: application/json" \
-H "Prefer: return=representation,resolution=merge-duplicates" \
-d '{"id": 123, "name": "John"}'
Delete (DELETE)
curl -X DELETE 'https://xxx.supabase.co/rest/v1/users?id=eq.123' \
-H "apikey: $SUPABASE_KEY" \
-H "Authorization: Bearer $SUPABASE_KEY"
Filter Operators (REST)
| Operator | Example |
|---|---|
eq |
?status=eq.active |
neq |
?status=neq.deleted |
gt |
?age=gt.18 |
gte |
?age=gte.21 |
lt |
?price=lt.100 |
lte |
?price=lte.50 |
like |
?name=like.*John* |
ilike |
?name=ilike.*john* |
is |
?deleted_at=is.null |
in |
?status=in.(active,pending) |
cs |
?tags=cs.{sports,news} (contains) |
cd |
?tags=cd.{a,b,c} (contained by) |
or |
?or=(status.eq.active,status.eq.pending) |
and |
?and=(status.eq.active,verified.eq.true) |
JavaScript Client Quick Reference
Database Operations
// Select
const { data, error } = await supabase.from('table').select('*')
// Select with filter
const { data } = await supabase.from('table').select('*').eq('id', 1)
// Insert
const { data } = await supabase.from('table').insert({ col: 'value' }).select()
// Update
const { data } = await supabase.from('table').update({ col: 'new' }).eq('id', 1)
// Upsert
const { data } = await supabase.from('table').upsert({ id: 1, col: 'value' })
// Delete
const { error } = await supabase.from('table').delete().eq('id', 1)
// RPC (function call)
const { data } = await supabase.rpc('function_name', { param: 'value' })
Auth Operations
// Sign up
await supabase.auth.signUp({ email, password })
// Sign in
await supabase.auth.signInWithPassword({ email, password })
// Sign out
await supabase.auth.signOut()
// Get user
const { data: { user } } = await supabase.auth.getUser()
// Get session
const { data: { session } } = await supabase.auth.getSession()
// Auth state listener
supabase.auth.onAuthStateChange((event, session) => { })
Storage Operations
// Upload
await supabase.storage.from('bucket').upload('path', file)
// Download
const { data } = await supabase.storage.from('bucket').download('path')
// Get public URL
const { data } = supabase.storage.from('bucket').getPublicUrl('path')
// Get signed URL
const { data } = await supabase.storage.from('bucket').createSignedUrl('path', 3600)
// Delete
await supabase.storage.from('bucket').remove(['path'])
// List
const { data } = await supabase.storage.from('bucket').list('folder')
Realtime Operations
// Subscribe to database changes
const channel = supabase
.channel('changes')
.on('postgres_changes', { event: '*', schema: 'public', table: 'posts' }, callback)
.subscribe()
// Broadcast
channel.send({ type: 'broadcast', event: 'message', payload: data })
// Presence
await channel.track({ user_id: '123' })
const state = channel.presenceState()
// Unsubscribe
await supabase.removeChannel(channel)
Edge Functions
const { data, error } = await supabase.functions.invoke('function-name', {
body: { key: 'value' }
})
Error Handling
const { data, error } = await supabase.from('users').select('*')
if (error) {
console.error('Error code:', error.code)
console.error('Error message:', error.message)
console.error('Error details:', error.details)
console.error('Error hint:', error.hint)
return
}
// data is safe to use
console.log(data)
Common Error Codes
| Code | Description |
|---|---|
PGRST116 |
No rows returned (single expected) |
PGRST301 |
Multiple rows returned (single expected) |
23505 |
Unique constraint violation |
23503 |
Foreign key violation |
42501 |
RLS policy violation |
42P01 |
Table doesn't exist |
TypeScript Types
Generate Types
supabase gen types typescript --local > database.types.ts
Type Helpers
import { Database } from './database.types'
// Table row type
type User = Database['public']['Tables']['users']['Row']
// Insert type
type NewUser = Database['public']['Tables']['users']['Insert']
// Update type
type UpdateUser = Database['public']['Tables']['users']['Update']
// Query result type
import { QueryData } from '@supabase/supabase-js'
const usersQuery = supabase.from('users').select('id, name, posts(title)')
type UsersWithPosts = QueryData<typeof usersQuery>
References
- client-patterns.md - Common client patterns