ノベルティメディア

media

Supabaseとは? 人気な理由や採用メリット、料金などを非エンジニア向けに紹介

Supabaseとは? 人気な理由や採用メリット、料金などを非エンジニア向けに紹介
奥野 真彰
Supabaseとは? 人気な理由や採用メリット、料金などを非エンジニア向けに紹介

皆さん初めまして。今年の7月にエンジニアとして入社した奥野と申します。 React / Next.js を用いたフロントエンドとバックエンドの開発を中心に行っています。

突然ですが、Web アプリを構築するときに裏側のデータベース(以下 DB)や認証認可などを、どう用意して運用していくかは最初に考えなければならない重要な論点ですよね。様々な依存関係を考慮しなければなりませんが、それらを一括で担当してくれる Supabase が最適解になるかもしれません。

ということで今回は、個人学習と業務上で実際に Supabase を使用してきて有用性を実感したので紹介してみようと思います。

この記事の対象読者

  • バックエンド開発・インフラの技術選定をしている方
  • 普段コードを書かない非 IT エンジニアの方

この記事で紹介しないこと

  • ソースコード解説
  • 開発中における Tips
  • CLI などを用いた Supabase ローカル開発手法
  • その他中級者向けの知見や詳細

Supabaseにはビジネス的メリットが盛りだくさん

「Web システム構築したいけど、色々と難しそう。。」

「Supabase なー。最近聞くけど技術的な詳細よりも、簡単に概要だけ知りたいんだよなー」

と偶然思っていたエレガントなあなたに向けて、フルスタック Web アプリ開発において強力な味方となってくれる Supabase というサービスについて簡単にご紹介します!

  • バックエンド開発コストの低減(開発期間の短縮・セキュリティリスク低減)
  • オープンソースによる長期的な保守性の確保
  • フロントエンド開発へのリソース注力

後に色々と詳述していますが、先にビジネス視点からのメリットはこのようなものがあると思います。

そもそも Supabase とは

一言で言うと、Web アプリ開発に必要なバックエンド開発機能をオールインワンで提供してくれる月額課金 BssS(Backend as a Service) です。

背景と課題

求められるユーザー体験の水準が向上し続けている昨今の Web アプリ開発において、当然それらを実現するための「アプリの裏側」であるバックエンド開発に必要な機能と知見の水準も上がり続けてきました。そしてそのような高度で複雑な要件に対応するためにも

  • ユーザー認証と認可
  • DB定義と操作
  • ファイル保存

などの基本的な機能はよりスピーディに、安全に、体系的に開発するニーズが年々高まって来ました。

しかし従来のバックエンド開発では、これらの実現に対して以下のような課題がありました。

  • 複数の技術を組み合わせる必要があるため学習コストが高く、継続運用するコストも重い
  • セキュリティ対策の複雑さ
  • スケーリング(拡張性)への考慮

2つの特長

Supabase はこれらの課題に対する解決策として、必要なバックエンド開発機能をオールインワンで提供してくれる月額課金サービス(Backend as a Service)として登場しました。

根幹となる大きな特長は「オープンソースによる長期的な保守性の高さ」「開発者体験の向上」の2つでしょう。

オープンソースによる高い保守性

  • 特定のサービスへの過度な依存を避けることでプロダクトを長期的な視点で設計・運用が可能になる
  • 急なサービス終了や値上げリスクが軽減される
  • 透明性が高く、セキュリティの検証も可能

開発者体験の向上

  • 必要な機能があらかじめ”オールインワン”に統合された形でクラウド上に提供されている
  • ダッシュボード上でのリッチで直感的な GUI 操作
  • 公式ドキュメントと巷に落ちている情報の豊富さ
  • プリセットを使った開発初速の向上(開発FWごと、ユースケースごとのクイックスタートやサンプルが多い)

世界中から注目を集めている

2020 年のローンチ以降着実な成長を遂げ、現在 GitHub スター数は 7.3 万を超え世界中の開発者コミュニティから支持を集めています。

世界中の JavaScript プロジェクトの中からその年最も Github スターを獲得したプロジェクトを紹介するサイト Javascript Risingstar 2023 によると、Supabase は総合ランキング第6位でした。

実はランキング上下のお隣さんがすごいメンツでして、第7位は当時の Facebook 社が開発した UI ライブラリの React で、第5位は React フレームワークの Next.js です。

2024年現在、どちらも世界中のモダンWebアプリを席巻している最大手フレームワークなので、Supabase の注目度もかなり高いことがわかります。

バックエンド開発を広く支える Supabase の主要機能

現代の Web アプリ開発に不可欠な要素をほぼ網羅しています。カバーされている範囲なら全乗っかりしようとする基本姿勢が工数削減につながると感じています。

ではそれぞれの機能を軽くご紹介します。

DBは信頼のPostgresQL

Supabase の DB はリレーショナルDBの PostgreSQL を内部的に使用しています。

PostgresQLは世界中の開発者から高い信頼性と安定性を評価されていて、大手企業でも広く採用されてきました。

  • データ行単位で認証をかけて保護できる RowLevelSecurity
  • TriggerとFunction

といったPostgres 標準の機能とそのノウハウをそのまま使用できます。

DB レイヤーでロジックを持つことによってアプリ側コードを削減できるのも魅力的です。

セキュアな認証システム

認証認可のシステム

  • メール/パスワード認証はもちろん、
  • Google や GitHub などのOAuthログイン
  • マジックリンク
  • 二要素認証

などの現代の Web アプリに採用されている認証機能も提供します。公式のドキュメントと巷の記事を参照すれば試行錯誤しながらも、パスワードレスなログインや Github の OAuth ログインを Next.js 内で実装できました。 ダッシュボードでテンプレートが与えられるのでカスタマイズしながら実装します。

プロジェクト立ち上げ時に、 Supabase が認証システム( Auth スキーマなどその他セキュア認証に必要なあれやこれや)を自動生成してくれるため開発者は独自に認証システムを作成する必要はありません。というより、開発者が誤って操作できないように制限されています。

ファイルストレージ

画像、動画、文書ファイルなど、あらゆるファイルを安全に保存・管理できるストレージ機能を提供します。

アップロードされたファイルは自動的に最適化され、高速な配信が可能です。また、ダッシュボードからプリセットを使用して容易にアクセス制御(Policy 策定)も細かく設定でき、機密性の高いファイルも安全に管理できます。

その他

  • リアルタイムデータ同期機能
  • REST API の自動生成
  • 作成した全DBのTS型自動生成

以上の機能も提供されています。

このようにSupabase は、個別に実装すると時間とコストがかかる機能群をすぐに使える形で提供しています。

これらの機能は基本的にセキュリティを考慮して設計され、ビジネスニーズに応じて柔軟にスケールすることも可能です。

Supabaseの採用メリットと料金プラン

Supabase の導入による様々なビジネス的なメリットをご紹介します。

開発期間の短縮

  • 個別の技術選定や組み合わせのリサーチ・検討が不要
  • 豊富なドキュメント、サンプル、GUI操作による作業者の学習コストを抑制

2点目の「学習コスト抑制」については現在のプロジェクトメンバーにとっての直接的な時間短縮だけではなく、開発経験の多くない開発者でも一定の業務まではプロジェクトに参画できることで結果的に短縮できると言う間接的な効果もあると考えられます。

セキュリティリスクの低減

  • 実績あるセキュアなシステムの活用
  • DB レイヤーでのアクセス制御(RLS、ポリシー策定)
  • あらかじめ用意された堅牢な認証システム

柔軟なコスト

  • 無料プランから始められ、段階的な機能拡張が可能
  • 予期せぬ高額請求を防ぐ利用量制限機能

料金プラン

Supabase の料金体系は、ビジネスの成長に合わせて柔軟にスケールできる設計となっています。

4つの料金プラン

月額料金

機能

Free

無料

1GBのストレージ、5万MAUなど簡易的な基本機能

Pro

$25

100GBのストレージ、8GBのDB、10万MAU、Emailサポートなど現実的な本番運用可能プラン

Team

$599

Proプランに加えてSSO、バックアップ制御など中規模以上アプリ向けの機能など

Enterprise

相談

カスタム機能や公式からの密なサポート、専用のインフラなど大規模アプリ向けの機能

注意:Free プランは1週間アクセスがないと停止するので本番環境で利用するには Pro プラン以上が現実的です。

おわりに

Supabaseの機能やメリットについて、公式から1円も貰ってないのに駆け出しエンジニアが勝手に紹介してみました。

Supabaseは開発効率の向上を通してプロダクト開発における様々な面でメリットをもたらしてくれます。

例えば、弊社のように、得意とする UI/UX にリソースを割くことができるというのも非常に大きな選定動機になり得ます。

この記事を参考にぜひSupabaseを活用してみてください。

弊社では、Web制作×システム開発×マーケティング支援を軸に、企業の課題にワンストップで応えています。

プロジェクト実績はこちら

ぜひご気軽にお問い合わせください!

この記事をシェアする

Webプロモーション・業務改善は
ノベルティひとつで完結

はじめての依頼にも
全力でサポートさせていただきます

メールでのお問い合わせ
各種サービス案内などをダウンロード

おすすめ記事/ PICKUP

    記事カテゴリー/ CATEGORY

      Webプロモーションや業務改善・DX化

      企業の課題はノベルティひとつで完結

      ホームページ制作などのWeb制作をはじめ、
      システム開発やマーケティング支援などワンストップで対応
      まずはお気軽にお問い合わせください

      お問い合わせ

      お電話またはメールでお気軽にお問い合わせください。

      資料ダウンロード

      各種サービスの資料をご用意しています