こんにちは😊
最近、Webサービスやスマホアプリ開発の現場でよく耳にするようになった「Supabase（スーパーベース）」。
「名前は聞いたことあるけど何ができるの？」
「Firebaseとの違いは？」
「どうやって始めればいいの？」
そんな方のために、今回はSupabaseのファーストステップを初心者向けに分かりやすくまとめてみました✨
🌱 Supabaseとは？
Supabaseは、簡単に言うと
「アプリ開発に必要なサーバー機能をまとめて提供してくれるサービス」
です。
本来なら・・・
✅ データベース構築
✅ ログイン機能作成
✅ API開発
✅ ファイル保存機能
✅ 権限管理
などを一つずつ作る必要があります💦
しかしSupabaseなら、これらを数分で利用開始できます🎉
🏃 ファーストステップ① アカウント作成
まずは公式サイトへアクセスします。
GitHubアカウントがあれば簡単に登録できます。
登録後は
「New Project」
をクリックしましょう✨
🏃 ファーストステップ② プロジェクト作成
必要事項を入力します。
入力項目
- Project Name
- Database Password
- Region（東京推奨）
例
Project Name
口コミブースター
Region
Northeast Asia (Tokyo)パスワードは必ず保存しておきましょう🔐
🏃 ファーストステップ③ テーブルを作る
プロジェクト作成後、
「Table Editor」
を選択します。
今回は簡単な顧客管理テーブルを作成してみます😊
customers
| カラム名 | 型 |
|---|---|
| id | uuid |
| name | text |
| text | |
| created_at | timestamp |
作成後はデータを直接登録できます✨
🏃 ファーストステップ④ データを登録する
「Insert Row」から
名前
山田太郎
メール
test@example.comなどを入力して保存します。
するとデータベースへ即時保存されます🎉
🏃 ファーストステップ⑤ APIを確認する
Supabaseの凄いところはここ！
テーブルを作っただけでAPIが自動生成されます✨
つまり
顧客一覧取得
顧客追加
顧客更新
顧客削除が既に使える状態になります😊
🏃 ファーストステップ⑥ Next.jsと接続する
インストール
npm install @supabase/supabase-js設定ファイル
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)🏃 ファーストステップ⑦ データ取得
顧客一覧を取得
const { data, error } = await supabase
.from('customers')
.select('*')
console.log(data)これだけでデータ取得完了です✨
🔐 ファーストステップ⑧ ログイン機能を試す
Authenticationメニューから
有効化
をONにします。
その後
await supabase.auth.signInWithPassword({
email,
password
})だけでログイン機能が完成します🎉
💡 初心者が最初に作るべきもの
おすすめは以下です✨
レベル1
- お問い合わせ管理
- 顧客管理
- タスク管理
レベル2
- 予約管理システム
- 在庫管理システム
- 勤怠管理
レベル3
- SaaS
🚀 ZERONANA的おすすめ
サービスを作るなら
Next.js
↓
Supabase
↓
Google Business Profile API
↓
LINE Messaging APIの組み合わせが非常に強力です✨
昔はサーバー構築だけで数日かかりましたが、今はSupabaseのおかげで数時間でサービスの土台が作れる時代になりました😊
「まずは小さく作ってみる」
これがSupabaseを覚える一番の近道です！
コメント