Supabaseとは?

Supabaseは、BaaS（Backend as a Service）と呼ばれるような、データベース・認証・ストレージ・サーバーレスランタイム環境などバックエンド機能を提供しているサービスです。これを用いることで、ログインして、何か情報にアクセスしたり、操作したりするようなアプリケーションを作ることができます。

• Supabase

同じような機能を提供しているサービスにGoogleが提供しているFirebaseがあり、SupabaseはFirebase Alternativeを公式で謳っています。

しかし、SupabaseはPostgreSQLというオープンソースのリレーショナルデータベース管理システムをベースにしたサービスで、NoSQLのデータベースを提供しているFirebaseとは同じようなことを実現できても、使い心地、中身はまったくの別物です。

SupabaseはPostgreSQLをベースにしているものの、ブラウザのGUIやクライアントライブラリにより、SQLを書かずに使えるようになっています。そのため、普段あまりバックエンドの知識に馴染みのないフロントエンド・エンジニアが趣味のプロジェクトなどでWebサービスを作るといった際にも学ばなければならないことが少なく、使いやすいサービスになっていると筆者は思います。

本連載は、「筋トレ記録アプリ」の制作を通して、そんなSupabaseの基本的な使い方を解説してきます。

料金

Supabaseはプロジェクトを内包している組織単位での課金となり、2024年8月現在では、FREEプラン・PROプラン・TEAMプラン・ENTERPRISEプランの4つがあります。

それぞれでデータベースの容量・帯域幅、ストレージの容量、認証ユーザー数などの制限が異なります。また、FREEプランではプロジェクトのリソースへのアクセスが1週間で1回もないと、プロジェクトが休止状態になり、ダッシュボードから復旧するまで機能が使えなくなったり、FREEプランで持てるアクティブなプロジェクトは2つまでだったりといった制限があります。

とはいえ、プロジェクトが大きくならなければ、課金をしなくても十分に使えるようになっています。まずは無料プランで試してみて、プロジェクトが成長し、何かの制限に引っかかるようになった段階で課金について考えればよいでしょう。

詳しい料金については、Supabaseのプランを参照してください。

このシリーズで作るアプリの機能

今回作る筋トレ記録アプリは、以下のような機能を持つものです。

• ログイン機能
• 種目の登録・編集・削除
• 登録した種目が部位ごとに分類される
• その種目を行った日時や重量、回数などの記録

ユーザーは行った筋トレの種目と重量、その回数を記録することで、どの部位のトレーニングがどれくらいできたかを確認することができる、というアプリです。

「種目」というのは、ベンチプレス、スクワット、デッドリフトなどのトレーニングの種類を指します。「部位」というのは、胸、背中、腕、脚などの筋肉の部位を指します。

ベンチプレスなら「胸」、スクワットなら「脚」、デッドリフトなら「背中」というように、それぞれの種目は「部位」に紐づいています。

ユーザーができることは、

• 種目の登録
• 筋トレ（どの種目をどんな重量で何回こなしたか）の記録

とします。

第1回目の今回は、Supabaseプロジェクトを作成し、「種目」に対してのカテゴリのような立ち位置である「部位」テーブルを作成します。

ではさっそく、Supabaseプロジェクトの作成から始めていきましょう。

プロジェクトの作成

まず始めに、Supabaseのプロジェクトを作成します。

アカウントを作成し、ログインすると、以下のようなダッシュボードが表示されるので、「New Project」ボタンから、プロジェクトを作成します。

大きい画像

初めてのプロジェクト作成ならば、Organizationの作成も求められますので、案内に従って作成します。

「Create a new project」画面には、次のようにプロジェクト名、データベースパスワード、リージョンを設定するフォームが並びます。

大きい画像

データベースパスワードは「Generate a password」から、自動生成することもできます。「Region」は「Tokyo」で良いでしょう。

部位テーブルの定義

プロジェクトを作成したら、部位テーブルを作成し、「胸」「肩」「腕」「腹」「背」「脚」という6つの部位を登録します。今回の筋トレ記録アプリで、種目はこの6つの部位に分類され、ユーザーは部位を増やせないものとします。

次の画像のようにダッシュボードの左メニューから、上から2番目にある「Table Editor」をクリックし、「Create a new table」をクリックします。

大きい画像

すると、次のようなテーブルの名前やスキーマ（データの構造・形式）などを定義する画面になります。

大きい画像

この画面で設定する項目を、上から順に見ていきます。

Name

「Name」にはテーブル名を入力します。今回のテーブルは部位を管理するためのテーブルなので、「bodyParts」とします。

Enable Row Level Security（RLS）

「RLS」とは、データベースの行ごとにアクセス制御を行う機能です。これにより、ユーザーごとに表示できるデータや操作を制限できます。

これについては次回以降に詳しく説明します。部位テーブルのデータは、誰でも見られても問題ないものなので、今回はチェックを外しておきます。

Enable Realtime

「Enable Realtime」は、リアルタイムでデータの変更を監視する機能を使用するかの設定です。こちらも次回以降に利用しますが、部位テーブルでは使わないので、チェックを外しておきます。

Columns

「Columns」ではテーブルのカラムを定義します。この部位テーブルに必要なデータは少なく、

• ユニークなID（id）
• 表示する部位名（name）

の2つです。それぞれ定義します。

Supabaseのテーブルのカラムには、初期状態で以下の17種類の型を選択できます。

型名	意味
int2	2バイト整数
int4	4バイト整数
int8	8バイト整数
float4	4バイト浮動小数点数
float8	8バイト浮動小数点数
numeric	数値
json	JSON
jsonb	バイナリ形式のJSONデータ
text	文字列
varchar	長さが制限された文字列
uuid	Universally Unique Identifierの略、一意の識別子
date	日付
time	時、分、秒の情報
timetz	タイムゾーン情報付き時間
timestamp	タイムスタンプ、日時と時間を保存
timestamptz	タイムゾーン付きタイムスタンプ
bool	真偽値

次のように、今回の部位テーブルでは、「id」にuuid、「name」にtextを用いることとします。

uuidのDefault Valueはgen_random_uuid()という値が入っています。これは、uuid型のカラムには、作成時に値を入力せず、ランダムなuuidを入れるという設定です。

それぞれのカラムの右側に表示されている設定ボタンからは、型ごとに、nullを許容するか？、行ごとにユニークな値にするか？、配列として定義するか？、などの設定ができます。カラムを増やした際は、デフォルトで「is Nullable」にチェックが入っていますが、今回はnameもnullになることはないので、nullを許容しないようにチェックを外しておきます。

また、設定ボタンの右にある「Primary」チェックボックスから、プライマリキーを設定します。プライマリキーは、テーブル内の行を一意に識別するための値で、ユニークな値である必要があります。今回はidをプライマリキーとして設定します。

その下には「Foreign Key」という項目がありますが、これは他のテーブルのプライマリキーを参照するためのもので、今回は使いません。ですので以上を設定して、保存します。

これで、テーブルの定義ができたので、「肩」「胸」「背」「腹」「腕」「脚」の6つの行を追加します。

上部のナビの「Insert」から、行を追加できます。「id」は自動で生成されるので、次のように「name」だけを入力し保存していきます。

大きな画像

データを追加すると、次のように「id」が自動で生成され、指定した部位名が入った行が6つ挿入されたテーブルが確認できるでしょう。

大きな画像

以上で部位テーブルの作成が完了しました。次回以降、これに紐付ける種目テーブルやユーザーテーブルなどほかにも必要なテーブルを作成しますが、基本的には同じような手順で作成できます。

次回は、この部位テーブルをフロントエンドのアプリケーションから取得する方法を解説します。