SveltekitプロジェクトでSupabaseにデータを保存する

By /

はじめに

この記事では、SveltekitとSupabaseのチュートリアルシリーズの第5部を取り上げ、ユーザーデータをSupabaseデータベースに保存する方法について説明します。この企画の目的は、認証機能付きのポケモンチーム選択アプリを1から構築することです。

このチュートリアルを通して、Supabaseプラットフォームを使ってアプリケーションのバックエンドとデータベース部分を管理し、Sveltekitフレームワークのパワーをフロントエンド開発に活かしていきます。

YouTubeで動画を視聴する

Supabaseでプロファイルテーブルを作成する

ビデオでは、説明文とポケモンIDの配列を持つプロファイルオブジェクトについて説明しています。このデータを保存するため、SupabaseにユーザーID、メールアドレス、説明文、ポケモンIDを含む「profiles」テーブルを作成します。

SupabaseのSQL編集画面でこの「profiles」テーブルの作成プロセスを説明しています。Supabaseが生成した「users」テーブルを参照することで、ユーザーアカウントに対応するプロファイルデータを1対1で関連付けることができます。

「profiles」テーブルを作成することで、チーム選択アプリに不可欠なユーザーのチョイスしたポケモンチームと個人情報を保存・取得することができます。

ユーザーデータをSupabaseに保存する

「profiles」テーブルが設定できたので、次はSveltekitアプリケーションからSupabaseにデータを保存する機能を実装します。ビデオではSupabaseクライアントライブラリを使ってデータベースと連携する方法を紹介しています。

まずはSupabaseクライアントを初期化し、プロジェクトの詳細情報（Supabase URL、パブリックAPIキー）を設定する必要があります。これらの情報はSupabaseダッシュボードから取得できます。

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

const supabase = createClient(
  'https://your-supabase-url.supabase.co',
  'your-supabase-public-api-key'
);

次に、ユーザーデータの保存処理を行う関数を作成します。この関数には、ユーザーのプロファイル情報（説明文、選択したポケモン）を渡し、Supabaseクライアントを使って「profiles」テーブルにデータを挿入します。

async function saveProfile(userId, description, pokemonIds) {
  const { data, error } = await supabase.from('profiles').insert({
    user_id: userId,
    description,
    pokemon_ids: pokemonIds
  });

  if (error) {
    console.error('プロファイルの保存に失敗:', error);
  } else {
    console.log('プロファイルを正常に保存しました:', data);
  }
}

このように、Sveltekitのコンポーネントから「saveProfile」関数を呼び出すことで、ユーザーフローに沿ってデータ保存の処理を統合できます。

ユーザーデータをSupabaseから取得する

データの保存に加えて、ユーザーのプロファイル情報をSupabaseから取得する必要があります。ビデオでは、Supabaseクライアントを使ってプロファイルデータを「profiles」テーブルから取得する方法を説明しています。

async function fetchProfile(userId) {
  const { data, error } = await supabase
    .from('profiles')
    .select('*')
    .eq('user_id', userId)
    .single();

  if (error) {
    console.error('プロファイルの取得に失敗:', error);
    return null;
  }

  return data;
}

この「fetchProfile」関数は、ユーザーIDを引数として受け取り、Supabaseクライアントの「select」と「eq」メソッドを使って「profiles」テーブルからデータを取得します。「single」メソッドを使うことで、1件のレコードのみを返すようにしています。

この「fetchProfile」関数をSveltekitコンポーネントに統合することで、ユーザーの保存済みプロファイル情報（説明文、選択したポケモン）を表示することができます。

まとめ

この記事では、SveltekitプロジェクトでSupabaseデータベースにユーザーデータを保存する方法について説明しました。「profiles」テーブルを作成し、Supabaseクライアントライブラリを活用することで、ポケモンチーム選択アプリにデータ保存と取得の機能を簡単に統合できます。

このような機能は、ユーザーが選択したポケモンチームやプロファイル情報を保存できるようにするため、アプリの使い勝手を高める上で不可欠です。今後、この機能をさらに拡張していくことで、より魅力的で機能的なアプリを構築していくことができます。

ポイント:

  • ユーザーデータ（説明文、選択したポケモン）を保存するための「profiles」テーブルをSupabaseに作成した
  • SveltekitアプリケーションでSupabaseクライアントを初期化し、ユーザープロファイルの保存と取得を実装した
  • ユーザープロファイル情報の保存と取得のための関数を作成し、Sveltekitコンポーネントに統合した
  • これらの機能を組み合わせることで、ポケモンチーム選択アプリにシームレスなユーザー体験を提供できるようになった

これらの技術を習得することで、SveltekitとSupabaseを使ってパワフルで使いやすいポケモンチーム選択アプリを構築できるようになります。

上部へスクロール