はじめに

こんにちは！もんすんです。
今回は、Flutterでの利用を試しを兼ねて、Supabaseについて紹介していきます。
Supabaseに興味がある方や、バックエンドの構築に手軽さを求めている方は、ぜひご覧ください。

Supabaseとは

概要

Supabaseは、オープンソースのBackend as a Service (BaaS, バース)、つまり、バックエンドサービスとして注目されているプラットフォームで、Firebaseの代替としてよく比較されています。

バックエンド機能としては、

データベース
認証
ストレージ
サーバーレスファンクション

が備わっています。
これらの機能により、迅速にアプリケーションを構築・展開できる環境を提供しています。

Supabaseでは、PostgreSQLが採用されており、リアルタイムデータベースの機能や高度なクエリが可能になっています。
また、RESTful APIやGraphQLを自動生成する仕組みも備えているため、フロントエンド開発者にとっても直感的で扱いやすいのが特徴です。

特徴

リアルタイムデータベース: 変更が即座に反映されるDBを提供
認証と認可: JWTベースの認証や、OAuth、SAMLなどのログインに対応
ストレージ管理: 画像や動画のアップロードおよび管理が可能なストレージ
サーバーレスファンクション: カスタムAPIやバックエンド処理を実装可能

無料枠

有料プランになってくると他のサービスとの比較が難しくなるので、今回の記事では、無料枠について、FirebaseとAWSとSupabaseを比較してみました。

これは2024年11月時点での情報ですので、正確な情報は各サービスの公式ドキュメントをご確認ください。

以下は、Supabase、Firebase、AWSの無料枠で実現できる主な機能を比較した表です。各プラットフォームの強みや制限も簡潔にまとめています。

機能	Supabase	Firebase	AWS Free Tier
データベース	PostgreSQL 月間500MBまで無料	Firestore/Realtime Database 1GBストレージ	RDS(PostgreSQLやMySQL) 750時間/月無料
リアルタイム更新	対応	Firestore/Realtime Database対応	DynamoDB Streams 250万回//月まで無料
認証	5万アクティブユーザ/月まで無料	5万アクティブユーザ/月まで無料	Cognito 5万アクティブユーザ/月まで無料
ストレージ	画像/ファイルのストレージ 1GB無料	Cloud Storage 5GB無料	S3 5GB無料
サーバーレス関数	Edge Functions 50万リクエスト/月まで無料	Cloud Functions 200万リクエスト/月まで無料	Lambda 100万リクエスト/月まで無料

使ってみた

アカウント作成

こちらからアカウントを作成していきます。

私はGitHub経由でアカウント作成する事にしました。

[Continue with GitHub]を選択し、それ以降は画面の流れにそってプロジェクトを作成して行けばOKです。

Flutterに適用

それでは次にFlutterアプリケーションにSupabaseを適用していきます！
公式ドキュメントはこちらです。

まず、以下のコマンドを実行し、パッケージをインストールします。
Flutter定番のやつですね。

flutter pub add supabase_flutter

次にmain.dartに以下の設定を追加します。
これだけでSupabaseに接続できるみたいです。
本当かよ...

main.dart

+ import 'package:supabase_flutter/supabase_flutter.dart';

Future<void> main() async {
+  await Supabase.initialize(
+    url: 'https://xyzcompany.supabase.co',
+    anonKey: 'public-anon-key',
+  );
  runApp(const MyApp());
}

urlとanonKeyには、それぞれプロジェクトダッシュボードで新規プロジェクトを作成する際に提供されるSupabase URLとAPI Keyを入力します。
これらがわからなくなったら、画面左下の歯車ボタンから、「API」を選択するとひょうじされます。

上記で設定したSupabaseを呼び出す際は以下のように実装します。

final supabase = Supabase.instance.client;

これで、supabaseが取得できていれば、接続がうまくいっているということになりますね。

とりあえずDB操作

では、とりあえずDBからデータを取得してみます。

`Supabase`コンソール側の設定: DB作成

Supabaseコンソール側に以下のようにtest_userテーブルを作成し、データを追加しました。

テーブルの作成方法やデータの追加方法は、省略します。
作成自体はかなり簡単でした。

`Supabase`コンソール側の設定: 権限設定

API経由でCRUDを実行するには、以下の権限設定が必要です。

先ほどテーブルの設定を行った画面から「Add RLS policy」を押します。

さらに「Create policy」を押します。

この画面で、anonに対して、テーブルの権限を設定します。
今回はCRUDの全ての権限を付与します。
実際に利用する際は正しく権限を与える方がよさそうです。

`Flutter`側の実装

では、Flutter側の実装です。

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

Future<void> main() async {
  await Supabase.initialize(
    url: '',
    anonKey: '',
  );
  final supabase = Supabase.instance.client;
  final data = await supabase.from('test_user').select();

  runApp(MyApp(data));
}

class MyApp extends StatelessWidget {
  final List<Map<String, dynamic>> data;
  const MyApp(this.data, {super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Supabase Flutter Example'),
        ),
        body: ListView(
          children: [
            for (var row in data)
              ListTile(
                title: Text(row['name']),
                subtitle: Text(row['id'].toString()),
              ),
          ],
        ),
      ),
    );
  }
}

特に以下の部分が、Readの処理になります。

final data = await supabase.from('test_user').select();

selectメソッドの引数にカラム名を指定するとそのカラムの値だけ、指定しないと全カラムを取得できます。

実行結果

正しくSupabaseのDBからデータを取得することができました！

終わりに

Supabaseの基本的な機能と、FirebaseやAWSとの比較、Flutterアプリへの組み込み方法について解説しました。Supabaseは、無料枠で手軽に試すことができるため、モバイルアプリやWebアプリのバックエンドを手軽に始めたい方には大変おすすめです。ぜひ、Supabaseの豊富な機能を活用して、アプリ開発に挑戦してみてもらえたらと思います！