見出し画像

Supabaseの機能と使用方法

やかん

インストール方法

1. Supabase CLIのインストール

Supabase CLIを使用すると、プロジェクトの管理やローカル開発環境のセットアップが簡単になります。

Node.jsのインストール

Supabase CLIはNode.jsのパッケージとして提供されています。まず、Node.jsをインストールしてください。

Supabase CLIのインストール

Node.jsがインストールされたら、以下のコマンドでSupabase CLIをグローバルにインストールします。

npm install -g supabase

Supabase CLIの使い方

  • プロジェクトの作成:

supabase init

  • ローカルデータベースの起動:

supabase start

  • Supabaseプロジェクトのデプロイ:

supabase deploy

2. Supabaseクライアントライブラリのインストール

SupabaseをJavaScriptやTypeScriptで使用する場合、クライアントライブラリをインストールします。

npmまたはyarnでのインストール

  • npmを使用する場合:

npm install @supabase/supabase-js

  • yarnを使用する場合:

yarn add @supabase/supabase-js

Supabaseクライアントのセットアップ

クライアントライブラリをインストールしたら、以下のコードでSupabaseクライアントを設定します。

//Javascript
import { createClient } from '@supabase/supabase-js'; 

// SupabaseのURLと匿名キーを設定します。 
const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

3. Supabaseプロジェクトのセットアップ

  1. Supabaseのアカウント作成:

  2. プロジェクトの作成:

    • ダッシュボードにログインし、「New Project」をクリックします。

    • プロジェクト名、データベースパスワード、リージョンを設定します。

  3. データベースの設定:

    • ダッシュボードで「Database」セクションに移動し、テーブルやスキーマの設計を行います。

  4. 認証の設定:

    • 「Authentication」セクションで、ユーザー認証の設定を行います。OAuthプロバイダーやメール認証の設定を追加できます。

  5. ストレージの設定:

    • 「Storage」セクションで、バケットを作成し、ファイルのアップロードと管理を行います。

主な機能とその詳細な使用例

1. データベース

Supabaseは、PostgreSQLをベースにしたリレーショナルデータベースを提供します。データベースの設計、クエリの実行、データの管理を簡単に行うことができます。

テーブルの作成とデータ操作

//sql
CREATE TABLE users ( 
  id SERIAL PRIMARY KEY, 
  name VARCHAR(255) NOT NULL, 
  email VARCHAR(255) UNIQUE NOT NULL, 
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP 
); 

CREATE TABLE orders ( 
  id SERIAL PRIMARY KEY, 
  user_id INTEGER REFERENCES users(id),
  total DECIMAL NOT NULL,
  status VARCHAR(50) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP 
);
//sql
INSERT INTO users (name, email) VALUES ('Alice', 'alice@example.com'); 
INSERT INTO orders (user_id, total, status) VALUES (1, 99.99, 'completed');
//sql
SELECT * FROM users; 
SELECT * FROM orders WHERE user_id = 1;
//sql
UPDATE orders SET status = 'shipped' WHERE id = 1;
DELETE FROM users WHERE id = 1;

JavaScriptからの利用

//javascript
import { createClient } from '@supabase/supabase-js';

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

async function addUser(name, email) {
  const { data, error } = await supabase
    .from('users')
    .insert([{ name, email }]);
  if (error) console.error('Error:', error.message);
  else console.log('Data:', data);
}

async function getUsers() {
  const { data, error } = await supabase.from('users').select('*');
  if (error) console.error('Error:', error.message);
  else console.log('Users:', data);
}

2. 認証とユーザー管理

Supabaseには、ユーザー認証の機能が組み込まれています。メールアドレスとパスワード、OAuthプロバイダー（Google、GitHubなど）を利用したサインアップやログインがサポートされています。

サインアップ

//javascript
async function signUp(email, password) {
  const { user, error } = await supabase.auth.signUp({ email, password });
  if (error) console.error('Sign up error:', error.message);
  else console.log('User signed up:', user);
}

ログイン

//javascript
async function logIn(email, password) {
  const { user, error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) console.error('Login error:', error.message);
  else console.log('User logged in:', user);
}

ログアウト

//javascript
async function logIn(email, password) {
  const { user, error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) console.error('Login error:', error.message);
  else console.log('User logged in:', user);
}

認証の設定

  1. Supabaseダッシュボードで「Authentication」セクションに移動します。

  2. OAuthプロバイダーやメール認証の設定を行います。

3. リアルタイム機能

データベースの変更をリアルタイムで受け取ることができます。これにより、チャットアプリやライブデータフィードなど、リアルタイムで更新が必要なアプリケーションを簡単に構築できます。

リアルタイムリスナーのセットアップ

//javascript
const channel = supabase
  .channel('public:messages')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'messages' }, (payload) => {
    console.log('Change received:', payload);
  })
  .subscribe();

メッセージの送信

//javascript
async function sendMessage(userId, content) {
  const { data, error } = await supabase
    .from('messages')
    .insert([{ user_id: userId, content }]);
  if (error) console.error('Send message error:', error.message);
  else console.log('Message sent:', data);
}

4. ストレージ

画像や動画などのファイルをアップロードし、管理するためのストレージ機能も提供されています。ファイルのアップロード、ダウンロード、削除が簡単に行えます。

画像のアップロード

//javascript
async function uploadImage(file) {
  const { data, error } = await supabase
    .storage
    .from('images')
    .upload(`public/${file.name}`, file);
  if (error) console.error('Upload error:', error.message);
  else console.log('File uploaded:', data);
}

画像の取得

//javascript
async function getImageUrl(fileName) {
  const { publicURL, error } = supabase
    .storage
    .from('images')
    .getPublicUrl(`public/${fileName}`);
  if (error) console.error('Get URL error:', error.message);
  else console.log('Image URL:', publicURL);
}

ストレージの設定

  1. Supabaseダッシュボードで「Storage」セクションに移動します。

  2. 新しいバケットを作成し、適切なアクセス制御を設定します。

5. API生成

Supabaseは、自動的にRESTful APIを生成します。これにより、データベースに対するCRUD（作成、読み取り、更新、削除）操作が簡単に行えます。/

APIの利用

//javascript
// データの操作例
async function fetchData() {
  const { data, error } = await fetch('YOUR_SUPABASE_URL/rest/v1/your_table', {
    headers: {
      'apikey': 'YOUR_SUPABASE_ANON_KEY',
      'Authorization': `Bearer YOUR_SUPABASE_ANON_KEY`
    }
  }).then(response => response.json());
  if (error) console.error('Fetch error:', error);
  else console.log('Fetched data:', data);
}

APIキーの管理

  • Supabaseダッシュボードで「API」セクションに移動し、APIキーの管理を行います。

6. ダッシュボード

ウェブベースのダッシュボードが提供されており、データベースの管理、設定、ユーザーの管理などが視覚的に行えます。

ダッシュボードの利用

  1. Supabaseダッシュボードにログインします。

  2. プロジェクトの設定やデータベースの管理、認証設定、ストレージの設定を視覚的に行います。


いいなと思ったら応援しよう！