はじめに

最近、FirebaseのStorageが有料化 したりなど、個人開発でFirebaseを使うのがだんだんと躊躇われるようになってきました。

そこで、次世代Firebaseとも呼び声の高いSupabaseを使って、iPhoneアプリを作っていきます。

Supabaseとは？

Supabaseは、オープンソースのBackend as a Service（BaaS）で、PostgreSQLを基盤としたリアルタイムデータベース、認証機能、ストレージ、サーバーレス関数などを提供します。これにより、開発者は複雑なバックエンドの構築を最小限に抑えつつ、高速かつ安全にアプリケーションを開発できます。また、リアルタイム同期やロールベースのアクセス制御などの高度な機能が特徴で、Firebaseの代替として注目されています。

Supabaseでプロジェクトを作成しよう

アカウントを作成すると、New projectから新しいプロジェクトを作成できます。

作成するとこんな感じ。

次に左のメニューからSQL Editorを開きます。

ここにSQLを書くことで、テーブルを作成できます。

今回はサンプルとして、usersテーブルとscoresテーブルを作り、1対多の関係を持たせます。

create table public.users (
  id uuid default gen_random_uuid() primary key,
  name text not null,
  created_at timestamp with time zone default now()
);

create table public.scores (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references public.users (id) on delete cascade not null,
  value int not null,
  created_at timestamp with time zone default now()
);

実行が成功すると画面下部に「Success. No rows returned」と表示されます。

次に、それぞれのテーブルにテストデータを追加しましょう。

-- Insert test data into the 'users' table
INSERT INTO users (id, name, created_at)
VALUES
    ('11111111-1111-1111-1111-111111111111', 'Alice', NOW()),
    ('22222222-2222-2222-2222-222222222222', 'Bob', NOW()),
    ('33333333-3333-3333-3333-333333333333', 'Charlie', NOW());

-- Insert test data into the 'scores' table
INSERT INTO scores (id, user_id, value, created_at)
VALUES
    ('44444444-4444-4444-4444-444444444444', '11111111-1111-1111-1111-111111111111', 100, NOW()),
    ('55555555-5555-5555-5555-555555555555', '11111111-1111-1111-1111-111111111111', 150, NOW()),
    ('66666666-6666-6666-6666-666666666666', '22222222-2222-2222-2222-222222222222', 200, NOW()),
    ('77777777-7777-7777-7777-777777777777', '33333333-3333-3333-3333-333333333333', 50, NOW()),
    ('88888888-8888-8888-8888-888888888888', '33333333-3333-3333-3333-333333333333', 75, NOW());

左のメニューからDatabase > Schema Visualizerを選ぶと、現在のテーブルの関係が見られます。

また、Table Editorから現在のデータ一覧が確認できます。

Supabaseをアプリに組み込もう

次に、Supabaseを用いてアプリを作成していきます。

Swift Package ManagerでSupabaseを追加

まずはSwift Package ManagerでSupabaseを追加します。

ここで、import Supabaseがうまく反応しない場合は、ライブラリとしてSupabaseが認識されていない場合があります。

Frameworks, Libraries, and Embedded Contentの+ボタンから、Supabaseを追加します。

コードを書く

次にコードを書いていきます。

Models.swift

// Models.swift
import Foundation

struct User: Identifiable, Decodable {
    let id: UUID
    let name: String
    let created_at: Date
}

struct Score: Identifiable, Decodable {
    let id: UUID
    let user_id: UUID
    let value: Int
    let created_at: Date
}

SupabaseManager

import Foundation
import Supabase

class SupabaseManager {
    static let shared = SupabaseManager()
    
    let client: SupabaseClient
    
    private init() {
        // Supabase URLとAnon Keyで置き換え
        let url = URL(string: "https://your url.supabase.co")!
        let key = "Your API KEY"
        client = SupabaseClient(supabaseURL: url, supabaseKey: key)
    }
}

ここで、Supabase URLとAnon Keyは画面右下のProject Setting > APIから確認できます。

ContentView.swift

// ContentView.swift
import SwiftUI

struct ContentView: View {
    @StateObject private var viewModel = UserListViewModel()
    
    var body: some View {
        NavigationView {
            List(viewModel.users) { user in
                NavigationLink(destination: ScoreListView(user: user)) {
                    Text(user.name)
                }
            }
            .navigationTitle("Users")
            .task {
                await viewModel.fetchUsers()
            }
        }
    }
}

UserListViewModel.swift

// UserListViewModel.swift
import Foundation
import Supabase

@MainActor
class UserListViewModel: ObservableObject {
    @Published var users: [User] = []
    @Published var error: String?
    
    func fetchUsers() async {
        do {
            let response: PostgrestResponse<[User]> = try await SupabaseManager.shared.client
                .from("users")
                .select()
                .execute()
            
            users = response.value
        } catch {
            self.error = error.localizedDescription
        }
    }
}

ScoreListView.swift

// ScoreListView.swift
import SwiftUI

struct ScoreListView: View {
    let user: User
    @StateObject private var viewModel = ScoreListViewModel()
    
    var body: some View {
        List(viewModel.scores) { score in
            HStack {
                Text("Score: \(score.value)")
                Spacer()
                Text("\(score.created_at, formatter: dateFormatter)")
                    .font(.caption)
                    .foregroundColor(.gray)
            }
        }
        .navigationTitle("\(user.name)'s Scores")
        .task {
            await viewModel.fetchScores(for: user.id)
        }
    }
}

let dateFormatter: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateStyle = .short
    formatter.timeStyle = .short
    return formatter
}()

ScoreListViewModel.swift

// ScoreListViewModel.swift
import Foundation
import Supabase

@MainActor
class ScoreListViewModel: ObservableObject {
    @Published var scores: [Score] = []
    @Published var error: String?
    
    func fetchScores(for userId: UUID) async {
        do {
            let response: PostgrestResponse<[Score]> = try await SupabaseManager.shared.client
                .from("scores")
                .select()
                .eq("user_id", value: userId)
                .execute()
            
            scores = response.value
        } catch {
            self.error = error.localizedDescription
        }
    }
}

これで実行すると、ちゃんとデータを取得することができます。

まとめ

GraphQLなどもサポートされていてかなり使い勝手が良い印象を受けるので、これからも使い倒していきたいなと思います！皆さんも使っていきましょう！