Supabase Clientでアプリを接続する
Supabase JavaScriptクライアントをインストールし、プロジェクトURLとanon keyで初期化して、最初のリクエストを実行して接続を確認します。
「Supabase Clientでアプリを接続する」はCoddyKit上の無料Supabase Backend as a Serviceレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSupabase Backend as a Service学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Supabase Backend as a Serviceコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
From Dashboard to Code
Dashboard done — now you talk to Supabase from code using its client library. For JavaScript and TypeScript, reach for supabase-js.
Installing the Client
Add the official supabase-js package to your project with your package manager.
npm install @supabase/supabase-jsWhere to Find Your Keys
Under Project Settings > API you will find your Project URL, the browser-safe anon key, and the service_role key for servers only.
Creating the Client
Call createClient once with your URL and anon key, then reuse that single instance everywhere in your app.
import { createClient } from '@supabase/supabase-js';
const supabase = createClient(
'https://your-project.supabase.co',
'your-anon-key'
);Keep Secrets in Env Vars
Never hardcode keys in committed code — read them from environment variables instead.
const url = process.env.SUPABASE_URL;
const key = process.env.SUPABASE_ANON_KEY;
console.log('Configured:', Boolean(url && key));Your First Query
Run your first query with select. The client returns a data array and an error object, never throwing on its own.
const { data, error } = await supabase
.from('todos')
.select('*');
if (error) console.error(error.message);
else console.log(data);Always Handle the Error
Supabase will not throw on a failed query, so check error every time before you touch data.
function handle(result) {
if (result.error) return 'Failed: ' + result.error;
return 'Got ' + result.data.length + ' rows';
}
console.log(handle({ data: [1, 2], error: null }));Inserting Data
Write a row with insert, passing an array of objects. Add select to get the inserted rows back.
const { data, error } = await supabase
.from('todos')
.insert([{ title: 'Learn Supabase', done: false }])
.select();Client vs Server Keys
The anon key is guarded by Row-Level Security and safe in the browser. The service_role key bypasses RLS, so keep it server-only.
Confirming the Connection
Quick health check: select a single row. Real data or a clear permission error (not a network error) means your client is wired correctly.
Reusing One Instance
Export your configured client from one module and import it everywhere. A single instance avoids duplicate connections and config drift.
Quick Check
Test your understanding of connecting with the client.
Recap
Recap: you installed supabase-js, built a client from env vars, ran your first select and insert, and learned why anon keys are browser-safe.
AI チューターと学ぶ Supabase Backend as a Service — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 11
- レッスン
- 40
よくある質問
「Supabase Clientでアプリを接続する」レッスンは無料ですか？
はい。「Supabase Clientでアプリを接続する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Supabase Backend as a Serviceコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Supabase Backend as a Serviceコースには全4レッスンが含まれています。
「Supabase Clientでアプリを接続する」で何を学びますか？
Supabase JavaScriptクライアントをインストールし、プロジェクトURLとanon keyで初期化して、最初のリクエストを実行して接続を確認します。 ブラウザで直接実行するハンズオンコードでSupabase Backend as a Serviceを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Supabase Backend as a Serviceを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSupabase Backend as a Serviceは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Supabase Clientでアプリを接続する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSupabase Backend as a Serviceレッスンでコードを書いて実行できますか？
はい。すべてのSupabase Backend as a Serviceレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- BaaSとSupabase入門
- 最初のプロジェクトを設定する
- Supabaseダッシュボードツアー
- Supabase Clientでアプリを接続する