Supabase（スーパーベース・スパベース）の使い方2回目。今回はSupabaseでデータベースを使ってみます。
社内備品を管理するためのWebアプリのデーターベースを作ってみよう♪
あら、なんだか実践的でワクワクするわ。
事前準備（備品管理アプリを作る）
今回は社内備品管理用のWebアプリのデータベースとして、Supabaseを使うという想定でいきます。Claude Code等を使って、下記のようなプロンプトで、ReactによるWebアプリを作っておきます。
【Webアプリ開発用プロンプト例】
CRUD処理っていうのは、データを新規作成・更新・削除・表示する処理のこと。データベースを使う場合は、多くの場合、このCRUDを実装しています。
確かに。何か作ったら、編集したり、消したり、表示したりするわ。
まずはシンプルなCRUD処理のデータベースとしてSupabase連携を試してみましょ。
こんな社内備品管理アプリをつくっておきます。
Supabaseのアカウントを作成
それでは早速、Supabase操作に入っていきます。もしまだの場合には、まずはSupabaseでアカウントを作成します。
プロジェクトを新規作成
Supabase内でNew Projectをクリックして新規プロジェクトを作ります。設定はデフォルトでOKです。
データベースを新規作成
プロジェクト作成後に表示される【Create a new table】 ボタンをクリックして、データベーステーブルを作成します。
ちなみにtableは、英語でデータベース内の表のこと。
なるほど。
Nameは「bihins」とし、お好みでDescriptionもいれます。
Enable Row Level Security（RLS）はデフォルトでチェックが入っています。こちらはセキュリティ上とても大事なのですが、テストの際にはここにチェックが入っているとエラーになります。テスト時には、まずはチェックを外しておきましょう。
RLSって？
データベースへのアクセスを制御できる機能。チェックが入っていることで、ルールで許可した人しかアクセスできなくできるの。
あら、なんて厳重な。
ね。でもテストのときは、まずはだれでもアクセス可能な形にしたいから、チェックを外しておくと便利。
ただ、本番環境では必ずRLSを有効にしてね。
下の方にはカラム設定欄があります。[id]と[created_at]カラムはデフォルトで存在しています。
ここに「Add columns」ボタンを押して、[name]と[number]カラムを追加します。Typeはそれぞれ[varchar]と[int2]にします。
一番左の三本線をクリックして、お好みに応じて、カラムの順序の入れ替えます。
Typeは、どんなタイプ（型）のデータをいれるか。varcharは文字（テキスト）をいれる型で、int2は2バイトの整数。今回みたいな在庫数をいれるなら、これで十分かな。
いちいちタイプをいれるのって、めんどくさいわね。
確かに。でもこうしておくと、変なデータをいれられにくくなるし、メンテもしやすくなるよ。Supabaseは、こんなふうに分かりやすく設定できるのが良いところなの。
なおSupabaseでは、Null値許容かどうかなどの設定も、手軽に実施できます。デフォルトではNull値許容となっていますが、各カラムの横の歯車マークを押して、簡単に設定を変えることができます。
えっと、ぬる（Null）って？
この部分が空っぽでもOKかってこと。最初は考えなくてもデフォルトのままでOK。ただ、こういった設定も手軽に行えるって覚えておいて。
最後に「Save」ボタンを押せば、データベースの完成です。
テーブル作成用の公式マニュアルはこちら。
SupabaseとWebアプリの連携
ローカル上のWebアプリとSupabaseを連携する場合には、連携用のコードの追加が必要となります。ここからは、ローカルでの作業になります。作成したWebアプリがあるディレクトリの中で作業していきましょう。
.envファイルの追加
まずはWebアプリが入っているディレクトリの中に、.envファイルを作り、そこに今回のプロジェクトの情報をいれておきましょう。
【.env】
|
1 2 |
VITE_SUPABASE_URL=××× VITE_SUPABASE_PUBLISHABLE_KEY=××× |
URLとKey情報は、Supabaseのプロジェクトトップ画面に記載されています。「VITE_SUPABASE_URL」には「Project API」のProject URLを、「VITE_SUPABASE_PUBLISHABLE_KEY」には、とAPI Key情報をいれます。
Supabaseライブラリのインストール
次に、ローカルのWebアプリに、Supabaseライブラリをインストールします。下記コマンドを実行します。
|
1 |
npm install @supabase/supabase-js |
ライブラリを入れた後、プロジェクト内の srcディレクトリ内にlibディレクトリを作成します。その中に、supabase.tsファイルを作成し、下記コードをいれます。
【supabase.ts】
|
1 2 3 4 5 6 |
import { createClient } from "@supabase/supabase-js"; export const supabase = createClient( import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY ); |
.envファイルに書いた連携情報を読み込むファイルとなります。
なおライブラリはインストールせず、CDNでも利用できます。公式マニュアルはこちら。
既存のコードの変更
最後に既存のコードも変更しておきます。これも生成AIに頼んでしまいましょう。
下記はプロンプトの書き方例です。
【Supabase連携用コードを書くためのプロンプト例】
コードを書き変える時は、不要なコード削除の指示もいれておくといいよ。
それぐらい気を利かしてほしいけど。生成AIには丁寧に言わないと伝わらないのね。
テストしてみる
これでOKです。Webアプリを立ち上げて、連携をテストしてみてください。下記は、わたしの環境で開発した備品管理用アプリとなります。
備品を新規登録したら、Supabaseのデータベースにも反映されているかチェックしてみてくださいね。
あら！ちゃんと登録されているわ。すごい。
データベース登録が目で確認できると嬉しいよね。
React以外のWebアプリ
なおReact以外にも、Supabaseは色々なWebアプリと連携が可能です。有名どころでいえば、Next.jsとの連携が挙げられます。
使用するものによって連携方法が異なります。下記の公式サイトのサイドバーから、ご利用の環境を選択して、連携方法を確認できます。
さいごに
Supabaseのデータベース、いかがでしたか？
とりあえずの連携はできましたが、まだまだお伝えしたいことはあります。たとえばRLSを使って、セキュリティをしっかり高めていく方法をご紹介したいところ。
今回、とりあえず使わなくしたRLSね。
そう！これが実はとっても大事で、Supabaseの特徴でもあるの。
そのために、まずは認証機能をつけるところから始めていきましょう。次回、Supabaseの認証機能のつけ方は、こちらご覧ください。
URL（準備中）
気になったら、次回もぜひ見て下さいね。更新した時はXなどでお知らせします。よかったらフォローしてください。
