Zenn
👻

今から学ぶSupabase　環境：Nextjs, tailwind

2024/02/02に公開
Next.js
Tailwind CSS
#
baas
supabase
tech

Spotifyーcloneで興味を持ったSupabase

https://www.youtube.com/watch?v=2aeMRB8LL4o

やっとSupabaseという存在を知った。

エンジニアを目指そうと思い一年未満，自主勉強に取り組む日々の中でSupabaseという存在を知った。（今更）
どうやらGoogleが提供しているFireBaseの代替手段として注目されているBaaSらしい。
というわけで，まず，BaaSが何から調べて実際に使ってみたところまでをまとめたい。ああ

BaaSとは？

BaaSは「Backend as a Service」の略でつまり，webのバックエンド機能を提供してあげますよ〜というサービスのこと。（ちなみにモバイルアプリケーションのバックエンド向け機能を提供しているものをmBaas：mobile Backend as a Serviceというらしい。）
BaaSでは主にWebサーバー（Hosting）やデータベース（Data Store）、認証機能などを提供してくれるらしい。

メリット（導入すべきケース）として，

  • バックエンドの構築や開発を大幅に減らすことができる。→開発速度を優先できる。
  • 開発者はサーバー側のことに意識を散らさなくて良くなる。（知見がなくても構築しやすくなり，保守などの手間を省く）
  • フロント開発に専念できる。

があります。デメリット（使わないほうがいい時）として，

  • BaaSでは提供していない機能を追加することは非常に難しい。
  • SEO対策が必要なときは向かない。
  • データベースに複雑なクエリ（データへの検索や更新、削除、抽出などの要求）をしたいとき
    は自分で構築した方がいいらしいです。

種類としては様々ですが，大きなところで

  • Firebase(Google)
  • AWS Amplify
  • Azure Mobile Apps (旧名称：Web Apps)
    などがあるようです。

Firebaseとは？

Googleがアプリケーションの開発者向けに提供しているモバイル・Webアプリケーションのプラットフォーム。
モバイル・Webアプリケーションのバックエンドでの機能を，クラウドサービスとして提供しています。

主に以下の機能ができます。

  • Firebase Analytics
    ユーザーのアプリケーションの使用状況やエンゲージメントの分析機能
  • Firebase Hosting
    静的なWebページ・アプリケーションを簡単にデプロイできる機能
  • Firebase Cloud Messaging
    様々なプラットフォームのアプリケーションに、無料でメッセージを送受信できる機能
  • Cloud Firestore
    NoSQLのクラウドデータベースサービス
  • Firebase Crashlytics
    アプリケーションのバグやクラッシュに関する情報をリアルタイムで集め，解決へと導く機能
  • Firebase Realtime Database
    アプリケーション間のリアルタイムデータ同期機能
  • Cloud Storage for Firebase
    写真や動画などのバイナリーデータを保存するクラウドストレージサービス
  • Cloud Functions for Firebase
    『Firebase』の各種機能を組み合わせて利用できるバックエンド用のサーバレスフレームワーク
  • Firebase Authentication
    安全な認証システムの構築に役立つ機能

などがあるようです。詳しくは以下を参照してください。
Googleの『Firebase』とは？メリットや始め方も紹介

2011年にスタートアップで登場し，3年後にGoogleに買収された経緯を持っています。素晴らしいですね。

本題：Supabaseとは？

特にまとまっている記事がなかったので，ChatGPTに解説させると以下のように出てきました。
これは「バックエンドをサボりたい開発者の救世主」みたいなものです。Firebaseに似ているけれども、完全にオープンソースで、PostgreSQLをベースにしています。つまり、データベース、認証、リアルタイムの通知、ストレージなど、ウェブやモバイルアプリを作る上で必要なバックエンドの機能をパッケージにしてくれているサービスです。

Supabaseは、開発者が迅速にフルスタックアプリケーションを構築できるようにするためのオープンソースのFirebase代替です。主にPostgreSQLデータベースをベースにしており、バックエンドの開発を簡素化し、加速する一連のツールと機能を提供します。以下は、Supabaseの主要な機能の概要です：

  1. リアルタイムデータベース
    PostgreSQLを使用したリアルタイムのデータベースアクセスを提供します。これにより、データベースの変更が即座にフロントエンドにプッシュされ、アプリケーションがリアルタイムで動作するようになります。
  2. 認証
    ユーザー認証と認可を簡単に追加できます。Eメール、Google、GitHubなど複数のログイン方法をサポートしており、セキュリティのためのJWT（JSON Web Tokens）を利用しています。
  3. ストレージ
    ユーザーがアップロードしたファイルを保存するためのストレージ機能を提供します。画像、動画、その他のファイルを安全に保存・アクセスできます。
  4. APIの自動生成
    データベーススキーマからRESTfulまたはGraphQLのAPIを自動的に生成します。これにより、フロントエンドからバックエンドのデータに簡単にアクセスできるようになります。
  5. ダッシュボード
    データベースの管理、認証の設定、APIの利用状況などを一元管理できるユーザーフレンドリーなダッシュボードが提供されます。
  6. オープンソース
    すべてのコードがオープンソースで公開されており、コミュニティのサポートを受けつつ、カスタマイズや拡張が可能です。

Supabaseはこれらの機能を通じて、開発者がサーバーサイドの開発にかける時間を削減し、アイデアを迅速にプロトタイピングし、製品を市場に出す速度を上げることを目指しています。Firebaseの代替としてだけでなく、フルスタック開発を容易にする強力なツールとして人気を集めています。

導入編：Supabaseでチャットアプリを作ってみよう

以下のリンクの人のアプリが簡単でわかりやすかったので，おすすめです。
【Supabase入門】認証・DB・リアルタイムリスナーを使ってチャットアプリを作ろう

実践編：Spotify-cloneの実例から学ぶ

執筆中

参考資料

LIG アプリケーション開発でBaaSを使うメリット・デメリットを紹介します
大塚商会 BaaS
【Supabase入門】認証・DB・リアルタイムリスナーを使ってチャットアプリを作ろう
Googleの『Firebase』とは？メリットや始め方も紹介

Discussion