こんにちは、虎の穴ラボ Advent Calendar 2020 - Qiita 6日目の記事です。
5日目はHYさんがiPhoneの気圧センサーとSwiftに関する記事を書かれています。
7日目ははっとりさんがFargate環境構築についての記事を書かれる予定です。
はじめに
みなさんFirebaseはお使いでしょうか。 今回はその代替となる(かもしれない)ツールを一つ紹介いたします。
Firebase自体初耳という方のために、まずは「Firebaseとはなんぞや？」から軽く触れていこうと思います。
Firebaseとは
FirebaseとはGoogle社が提供するクラウドサービスで、データのリアルタイム同期を得意とします。
例えばタスク管理のアプリを作る場合「Aさんがレコードを追加するとBさんの画面にも自動的にその情報が反映される」といった使い方ができます。 また「包括的なアプリ開発プラットフォーム」なので様々なサービスが含まれており、アプリケーションにライブラリを追加するだけでバックエンドを気にせず開発が行えるのも特徴の一つです。
本題から逸れてしまうので、詳細が気になる方はFirebaseの公式サイトをご確認ください。
そんなFirebaseの代替はいくつかあり、中でも今年の夏頃に始まったばかりの「Supabase」が面白そうなので取り上げてみました。 まだアルファ版であるため、雰囲気だけでも感じていただけると幸いです。
Supabaseとは
冒頭で述べた通りFirebaseの代替を目指し現在進行形で開発されています。
Supabaseの開発者はFirebasedeを愛しながらも、そのスケーラビリティに難があると考えました(FAQより)。 Firebaseの優れた機能性は残しつつ、PostgreSQLを用いる事でスケーラビリティを容易にしようと試みたのがSupabaseなのです。
特徴として以下が挙げられます。
- オープンソース
- PostgreSQLをデータベースとして使用
- データを容易に操作できる
- リアルタイム同期
- 認証が行える
なおSupabaseではこれらのオープンソースのツールが使われています(2020年12月時点)。
| ツール | 概要 |
|---|---|
| PostgreSQL | 言わずと知れたデータベース |
| Realtime | PostgreSQLのレプリケーションを待ち受け、 データをJSONに変換したあとWebSocket経由で配信するElixirサーバー |
| PostgREST | PostgreSQLをRESTful APIにしてしまうWEBサーバー |
| pg-api | PostgreSQLを操作するためのRESTful API |
| GoTrue | ユーザーの登録と認証を行うAPI |
| Kong | API Gateway |
余談ですが、PostgreSQLなのでAPIからストアドプロシージャを使えるのもSupabaseの面白いポイントです。
Supabaseの利用方法
Supabaseを利用する方法は二通りあります。
- 用意されたクラウドサービスを利用する
- 自前でホスティングする
提供されるクラウドサービスは現在アルファ版なので費用が掛かりません。 将来的に有料化するのですが、サインアップしてすぐに使えるため、今試すのであればクラウド版がおススメです。 (アプリページの右上からサインアップできます)
自前でホスティングする場合は一気にハードルが上がります。 簡単に導入する方法がまだ無いので、公式サイトのこちらを読みページ上部のToolsのドロップダウンからそれぞれの説明に従い必要なツール群をインストールしてください。
今回はざっくりとした紹介なのでクラウド上の環境を利用しようと思います。
プロジェクトの作成
アカウントを作りログインするとメニューとプロジェクト作成以外何もない画面が表示されます。 まずは[New Project]を押下して、企業とプロジェクトを作ってしまいましょう。
テーブルの作成
作成が終わると[Create a new table]というボタンが画面中央に表示され、クエリに不慣れな人でもボタン操作でテーブルの作成を行える優しい設計になっています。
しかし左のメニューにSQLエディターがあるので、慣れている人はこちらを使う方が早いかもしれません。 直接クエリを書ける他、事前に用意されたスクリプトで「テーブル作成」「カラム追加」などの雛形を出力する補助機能もあります。
では実際に食べ物テーブルを作りましょう。
雛形からCREATE TABLE文を出力し、少し修正すれば完成です。
食べ物テーブルは食べ物の名前だけを持ちます。
APIを使うための準備
左端のメニューからAPI→Introductionを選びます。
APIのURLやINITIALIZINGの方法と共にnpmパッケージのINSTALLコマンドがありますので、プロジェクトのディレクトリを作りそこで実行してください。
npm install --save @supabase/supabase-js
続いてINITIALIZINGの記述に従いコードを追加します。
今回はVue.jsを利用しました(良い子は鍵をベタ書きとか酷いことはせず環境変数等に設定してください)。
送信するためのフォームも作ってしまいます。
データの追加・取得
一旦Supabaseのプロジェクトページに戻りましょう。
Supabaseには作成したテーブルから自動的にAPIを出力してくれる機能があります。
試しに左メニューからAPIへ移動すれば、foodsが作られているのが確認できます。
Insert rowsにデータをインサートする方法がありました。
インサートがわかったので追加します。ついでなので食べ物を表示するためにmountedにSUBSCRIBE TO INSERTSを追加します(INSERTと同じAPIページを参照)。
ブラウザでの確認
npm run serveで起動しhttp://localhost:8080/へアクセスします。
フォームからカレーを送信。
リアルタイム同期
先ほどのカレーを登録すると別のブラウザにもカレーが表示されます。
これでリアルタイム同期はバッチリですね！
まとめ
Supabaseの他にもFirebaseの代替はいくつかあります。
それらは一長一短でFirebaseから乗り換えるまでには至っていない印象を受けます。 その点Supabaseは扱いが容易でリアルタイムの同期にも対応しています。 まだアルファ版であり将来性が未知数とは言え、今後の発展が楽しみなプロジェクトの一つです。
いかがだったでしょうか。 今回はFirebaseの代替を目指すSupabaseを駆け足で眺めてみました。
Firebase自体優れたサービスなので乗り換える予定がない場合でも、異なるアプローチでFirebaseの再現を試みる工夫には学ぶところが多々あります。 個人的に選択肢は多い方が良いのでSupabaseには頑張って欲しいですね！
この記事は、 虎の穴ラボ Advent Calendar 2020 6日目の記事です。 明日は、はっとりさんのFargateに関する記事です。 以降も続々記事が公開されますので、ご期待ください。
