目次
まえがき
第1章 Supabaseとは？
第2章 Next.jsの基礎知識
第3章 作りながら学ぶSupabase
あとがき
まえがき
本書を手に取っていただき、ありがとうございます。
本書について
本書は、The Open Source Firebase Alternativeを掲げて開発されているSupabaseの使い方を解説したものとなります。Supabaseは2020年12月にβ版がリリースされたばかりで、2021年9月現在もβ版として提供されている新しい技術です。私たちはβ版がリリースされてすぐの頃から触り始めましたが、シンプルな操作性と価格設定(個人開発ではよほどユーザーが増えない限りは、基本的にFreeプランで十分)により、個人開発者の強力な味方となるプラットフォームであると感じています。しかし、現状では、日本語でアクセスできる資料はそこまで多くありません。この感動を少しでも多くの方に知っていただきたいと思い、この度、筆を執ることにいたしました。
本書の目的と対象読者
本書のゴールは「サンプルWebアプリの実装を通してSupabaseでできることを一通り理解する」ことです。モダンなフロントエンドフレームワークであるNext.jsを用いて簡単なWebアプリを実装しながら、Supabaseでできることをひとつひとつ説明していきます。そのため、現在プログラミング(特にフロントエンド)を勉強中の初学者の方々、就職・転職用のポートフォリオを作成している方々には、参考になることが多いのではないかと思います。バックエンドの知識が乏しくても、Supabaseを利用することで認証機能を実装したり、データベースやストレージを用いたフロントエンド技術だけではなかなか実現できない機能を自身のWebアプリに組み込むことが可能です。また、既にFirebaseを使っている方は、Supabaseのシンプルで直感的な操作性、そしてリレーショナルデータベース (RDB)を扱えることには、きっと魅力を感じるはずです。少しでも多くの方にSupabaseの魅力を知っていただき、「実際に開発に使ってみよう」と思っていただけたら、これ以上嬉しいことはありません。
それでは、Supabaseを活用した、ちょっとリッチなWebアプリ開発の世界に一緒に旅立ちましょう！
サンプルアプリデモ
本書で実装するWebアプリのサンプルは、以下のURLにて公開しています。まずは実際に触ってみて、開発するアプリのイメージを具現化してみて下さい。アプリの全体像を理解し、どの部分を実装しているのか意識しながら進めるのが理想です。
サンプルコード
本書のサンプルソースコードは、以下のURLにて公開しています。本書の節ごとにタグも付与しているため、既に知っている部分は読み飛ばし、手を動かしたい部分からはじめることも可能です。ぜひ、有効活用して下さい。なお、本書の内容に関する正誤表などもこちらに掲載することを予定しています。
本書に関するご意見・ご指摘・ご感想
本書に関するご意見・ご指摘・ご感想については、本書用のハッシュタグ「#supabase_ird」を付けてツイートしていただければ幸いです。また、私たちのTwitterアカウント宛にメンションやDMを送っていただいても構いません。
・りーべ (@MagicalLiebe)
・ぽぬう (@ponu77)
開発環境について
本書のサンプルコードは、以下の環境で動作を確認しています。
・Ubuntu 20.04 LTS (WSL2)
適切に環境構築を行えば、OSに依存せず問題なく動作するかと思います。しかし、ベースとなる開発環境(Node.js)の構築については詳細に説明しませんので、ご了承下さい。
免責事項
本書に記載された内容は、情報の提供のみを目的としています。本書に記載された内容を用いた開発・サービス提供は、必ずご自身の責任と判断のもと行って下さい。本書の情報により生じた不利益について、筆者はいかなる責任も負いません。
表記関係について
本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。
底本について
本書は、技術系同人誌即売会「技術書典11」で頒布された書籍をもとに、内容を加筆・修正・再構成したものとなります。
第1章 Supabaseとは？
本章では、そもそもSupabaseとはどのようなものなのか、Supabaseを使うとどのようなことができるのかについて説明します。全体像をざっくりと知ることで、次章以降の説明が理解しやすくなると思います。難しい話はしないので、肩の力を抜いて読んでいただけると幸いです。
1.1 Supabaseの概要
Supabase 1 は、認証やデータベース、ストレージなどを提供するオープンソースのBaaS2です。Webアプリを実装する上で、Supabaseと組み合わせると、グッとサービスの幅を広げることができます。たとえば、静的ウェブサイトに認証の機能を組み込むことで、特定ユーザーのみが閲覧できるパーソナライズドサービスを提供できます。また、データベースと連携すれば、様々な情報を柔軟に管理・活用することも可能となります。
類似サービスとしては、GoogleのFirebase 3 があります。現在、認証機能などを実装しようとした場合、Firebaseを使うのが一般的ではないでしょうか？ちなみに、SupabaseのWebサイトにアクセスすると、The Open Source Firebase Alternativeというキャッチコピーが大きく書いてあります。私たちはこれを読んだとき、「Firebaseの牙城を崩す」という大きな意気込みかと思いましたが、開発チームは「Firebaseと比較されることは避けられないが、1対1で置き換えることを意図したものではない」と明言しています。詳細は後述しますが、実際にFirebaseとの差異もあり、選択肢が増えたと考えるのがいいかと感じています。
Supabaseは既存のオープンソースプロジェクトを活用して、様々な機能を提供しています。したがって、Supabaseはそれらを使用する上でのユーザビリティを向上させることが目的であるといえます。実際に触ってみると理解できると思いますが、直感的に操作できるダッシュボード画面が用意されており、ドキュメントを確認せずともある程度の操作はできると思います(もちろん、ドキュメントを読むことは重要です)。そして、開発していく中で解決できない課題が発生した場合、依存しているオープンソースプロジェクトにも貢献していくことで課題解決に寄与しているとのことです。ソフトウェアの世界におけるエコシステムの発展という点でも、非常に価値のあるプロジェクトといえるでしょう。また、Supabase自体もオープンソースで開発されているため、機能追加や改善のために自らIssueを立てたり、Pull Requestを投げられたりすることも忘れてはいけません。エコシステムとして今後も発展が期待できることは、ユーザーとしてその技術を使う安心材料になると思います。
なお、Supabaseは2020年6月からα版としてクローズドテストが開始され、2020年12月からβ版として一般ユーザーに提供されています。2021年9月現在もβ版であり、予定されている全ての機能が提供されているわけではありません。β版が公開されたときにはリリースされていなかったストレージ機能については、2021年3月にリリースされ、サーバーレスファンクションについては現在も開発中となっています。現在進行系で開発が進んでいるプロジェクトであるため、本書の情報はあくまでも2021年9月時点のものであることをあらかじめご承知おき下さい。
私たちが最も伝えたいことは、魅力的な機能が次々と実装されており、今後も益々の発展が期待できるプロジェクトであるということです！
1.2 Supabaseでできること
Supabaseは様々な機能を提供しています。実際にどのようなことができるかを紹介します。なお、繰り返しとなりますが、この情報は2021年9月現在のものとなります。
認証
GoTrue 4 を使ったAPIによるユーザー管理ができ、ユーザーのサインアップ・認証が実行できます。サインアップにはOAuthが利用可能で、2021年9月現在はApple、Azure、Bitbucket、Discord、Facebook、GitHub、GitLab、Google、Twitter、Twitch、Twilioのアカウントを用いたサードパーティでの認証が利用できます。OAuthのプロバイダーは定期的に増えているので、今後も様々なサービスが対応していくことが期待されます。
また、React用のログイン画面のコンポーネントを含むライブラリー5も提供されており、特にこだわりがない場合は、これを用いることでログイン画面を数行で実装できます。個人開発やちょっとしたプロトタイピングには、大変役立ちます。
データベース
PostgreSQL 6 を用いた、リレーショナルデータベース (RDB)を利用でき、Firebaseで使用されているNoSQLでは実現できなかったデータの定義や関連付けができます。RDBが使えることをメリットと捉える人は多いかと思います。
また、PostgREST 7 によって、PostgreSQLのWebAPIを利用できます。このWebAPIにより、データベースの情報に簡単にアクセスできます。また、現在進行形で様々なプログラミング言語用のライブラリーも開発されており、JavaScript版のsupabase-js 8 などは既に実用できるレベルになっています。
Row Level Securityという仕組みを活用することで、前述の認証と組み合わせたデータベースアクセスを実現できます。たとえば、ユーザーは各自が登録したデータのみにアクセス可能で、他のユーザーが登録したデータにはアクセス(読み出し、更新、削除)できないなどの制限を設けることができます。
さらに、WebSocketを用いたデータベースへのリアルタイムアクセスもサポートされています。データベースを監視し、データベースの更新をリアルタイムで受信できます。
ストレージ
2021年3月にリリースされたばかりの機能で、あらゆる種類のファイルを保存できるストレージが提供されています。データベースと同様に、認証機能と連携したアクセス制限が可能です。
Webページからはドラッグ&ドロップでのファイルアップロードなど、直感的なファイル操作ができることも、魅力のひとつです。画像や動画、音声など、サポートされている種類のファイルの場合は、プレビューも可能です。
現在開発中の機能
サーバーレスファンクションが実装されることが、公式より発表されています。サーバーレスファンクションがリリースされれば、BaaSに求められる一通りの機能が揃い、本格的に開発の主軸として活用できるようになることが期待されます。私たちも、サーバーレスファンクションのリリースを心待ちにしています。
また、Supabaseをself-hostingできるようにするという動きもあります。ダッシュボード画面などのUI部分はまだ開発中ですが、データベースなどのSupabaseの根幹となる部分は、Docker 9を用いて簡単に起動できるようになっています10。オンプレ環境でSupabaseをホスティングできるようになれば、社内のセキュリティーポリシーなどで外部サービスを簡単に利用できない企業においても、活用されていくかもしれません。そのような観点でも、今のうちからSupabaseの使い方を学び、その動向に注視することは重要であると考えています。