Skip to main content

​
API設計

Jeliqで生成されるアプリケーションのAPI設計について解説します。

​
アーキテクチャ

JeliqはSupabase Clientを使用したクライアントサイドデータアクセスを基本としています。 
┌───────────┐     ┌───────────┐     ┌───────────┐
│  Browser  │────▶│  Supabase │────▶│ PostgreSQL│
│           │◀────│  Client   │◀────│           │
└───────────┘     └───────────┘     └───────────┘

​
データ操作

​
取得（SELECT）

// 一覧取得
const { data, error } = await supabase
  .from('customers')
  .select('*')
  .order('created_at', { ascending: false })

// 条件付き取得
const { data, error } = await supabase
  .from('customers')
  .select('*')
  .eq('status', 'active')
  .ilike('name', `%${searchTerm}%`)

// リレーション含む取得
const { data, error } = await supabase
  .from('customers')
  .select(`
    *,
    orders (id, amount, created_at)
  `)

​
作成（INSERT）

const { data, error } = await supabase
  .from('customers')
  .insert({ name, email, phone })
  .select()
  .single()

​
更新（UPDATE）

const { error } = await supabase
  .from('customers')
  .update({ name, email })
  .eq('id', customerId)

​
削除（DELETE）

const { error } = await supabase
  .from('customers')
  .delete()
  .eq('id', customerId)

​
認証

Supabase Authを使用した認証。 
// ログイン
const { data, error } = await supabase.auth.signInWithPassword({
  email,
  password,
})

// ログアウト
await supabase.auth.signOut()

// 現在のユーザー取得
const { data: { user } } = await supabase.auth.getUser()

​
カスタムAPIエンドポイント

追加のAPIが必要な場合は、Next.jsのAPI Routesを使用できます。 
// app/api/reports/route.ts
import { NextResponse } from 'next/server'
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'

export async function GET() {
  const supabase = createRouteHandlerClient({ cookies })

  // カスタムロジック
  const { data } = await supabase
    .from('orders')
    .select('amount')

  const total = data.reduce((sum, order) => sum + order.amount, 0)

  return NextResponse.json({ total })
}

​
セキュリティ

  • Row Level Security (RLS)によるデータアクセス制御
  • 認証トークンの自動管理
  • HTTPS通信
詳細は品質保証チェックリストを参照してください。