最終更新：2026年6月1日

CursorとSupabaseを連携させると、AIによるコード補完とスケーラブルなバックエンドを組み合わせた開発環境が手に入る。この記事では、環境構築から実際のデータ操作まで、ゼロから動かせる手順を解説する。読了時間：約8分。

目次

  1. CursorとSupabaseの連携開発とは何か
  2. 必要なツールと選び方
  3. 連携開発の手順
  4. よくある失敗と対処法
  5. 関連ツールの詳細
  6. よくある質問（FAQ）
  7. まとめ

CursorとSupabaseの連携開発とは何か

CursorとSupabaseの連携開発とは、AIエディタのCursorでコードを書きながら、Supabaseが提供するPostgreSQLベースのバックエンドをリアルタイムで操作する開発手法である。

CursorはAIがコンテキストを理解してコード補完・生成を行うエディタで、Supabaseは認証・データベース・ストレージをワンセットで提供するBaaS（Backend as a Service）だ。両者を組み合わせると、バックエンド構築のボイラープレートをAIに任せながら、本番品質のデータ基盤をすぐに使える状態になる。

最初は何から始めればいいか分からない人がほとんどだが、手順は思っているより単純だ。

CursorとSupabaseの連携開発に必要なツールと選び方

必須ツール一覧と選定基準

ツール役割無料プラン選ぶ理由
CursorAIコードエディタあり（月500回補完）GPT-4oベースのコード生成精度が高い
SupabaseBaaS（DB・認証・API）あり（500MB DB）PostgreSQLに直接アクセスでき移行コストが低い
Node.js（v20以上）ローカル実行環境無料supabase-jsの動作に必要
supabase-jsクライアントSDK無料TypeScript対応・型生成が強力

Supabaseを選ぶ最大の理由はPostgreSQLの完全互換性だ。 Firebaseのような独自クエリ言語ではなく、標準SQLが使えるため、既存のバックエンド知識をそのまま活かせる。

代替としてPlanetScaleやNeonもあるが、認証・ストレージまで一括で揃うのはSupabaseだけだ。個人開発からチーム開発まで無料枠で十分スタートできる点も選定理由になる。

CursorとSupabaseの連携開発の手順

ステップ1：Supabaseプロジェクトの作成とAPIキーの取得

  1. supabase.com にアクセスし、GitHubアカウントでサインアップする
  2. ダッシュボードから「New Project」をクリックし、プロジェクト名・パスワード・リージョン（日本ならap-northeast-1）を設定する
  3. プロジェクト作成後、左メニューの「Project Settings」→「API」を開く
  4. Project URLとanon publicキーをメモしておく

この2つの値を後で.envファイルに設定する。ここをメモし忘れると、後の手順で必ず詰まります。 サービスロールキー（service_role）は絶対にフロントエンドに埋め込んではいけない。

ステップ2：Cursorでプロジェクトを初期化する

mkdir my-supabase-app && cd my-supabase-app
npm init -y
npm install @supabase/supabase-js

次に.envファイルをプロジェクトルートに作成する。

SUPABASE_URL=https://xxxxxxxx.supabase.co
SUPABASE_ANON_KEY=your-anon-key-here

Cursorを開いてプロジェクトフォルダを読み込んだら、Ctrl+K（Mac: Cmd+K）でAIチャットを起動する。

ステップ3：SupabaseクライアントをCursorのAIで生成する

Cursorのチャット欄に以下のように指示する。

「supabase-jsを使ってSupabaseクライアントを初期化するTypeScriptファイルを作ってください。環境変数からSUPABASE_URLとSUPABASE_ANON_KEYを読み込む構成にしてください」

AIが生成するコードはおおむね以下のような構成になる。

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

const supabaseUrl = process.env.SUPABASE_URL!
const supabaseKey = process.env.SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseKey)

正直なところ、筆者も最初はCursorに「どこまで任せていいか」が分からなかった。答えは「スキーマを先に定義してからAIに渡す」ことで、生成コードの精度が大幅に上がる。

ステップ4：Supabaseでテーブルを作成し、型定義を生成する

  1. Supabaseダッシュボードの「Table Editor」からテーブルを作成する（例：todosテーブル、カラム：id, title, is_done, created_at）
  2. ローカルで以下のコマンドを実行し、TypeScript型定義を自動生成する
npx supabase gen types typescript --project-id your-project-id > types/supabase.ts
  1. 生成された型ファイルをCursorで開き、AIチャットに「この型定義を使ってtodosテーブルにCRUD操作する関数を作ってください」と渡す

この型定義をAIに渡す手順を省くと、後で型エラーが大量に出て確実に詰まります。 型ファイルを先に生成することがこの連携の最大のポイントだ。

ステップ5：Row Level Security（RLS）を設定して本番品質に仕上げる

Supabaseはデフォルトでテーブルへの全アクセスをブロックするRLS（行レベルセキュリティ）を持つ。

  1. Supabaseダッシュボードの「Authentication」→「Policies」を開く
  2. 対象テーブルを選択し「New Policy」をクリックする
  3. テンプレートから「Enable read access for all users」を選んで保存する

開発中はRLSを無効にしてテストしたくなるが、本番環境でRLSを切ったまま公開すると全データが外部から読み書き可能になります。 必ず本番前に有効化する。

よくある失敗と対処法

失敗1：環境変数が読み込まれずクライアント初期化に失敗する

.envファイルを作成しても、Node.jsがデフォルトでは読み込まないケースがある。

対処法： dotenvパッケージをインストールし、エントリーポイントの先頭でrequire('dotenv').config()を呼び出す。Next.jsを使っている場合は.env.localファイルを使うと自動で読み込まれる。

npm install dotenv

失敗2：RLSポリシーが原因でデータ取得が空配列になる

クエリが成功しているのにデータが返ってこない場合、RLSがブロックしている可能性が高い。

対処法： Supabaseダッシュボードの「SQL Editor」で以下を実行してRLSポリシーを確認する。

SELECT * FROM pg_policies WHERE tablename = 'todos';

ポリシーが存在しない場合は、「全ユーザーに読み取りを許可するポリシー」を追加するか、開発環境に限りRLSを一時的に無効化して原因を切り分ける。

失敗3：supabase-jsのバージョン違いでメソッドが存在しないエラーが出る

これが意外と盲点になりやすい。supabase-js v1とv2ではAPIが大きく異なり、ネット上のサンプルコードがv1ベースのことが多い。

対処法： package.jsonで@supabase/supabase-jsのバージョンを確認し、v2系（^2.x.x）を明示的に指定する。v1のfrom()チェーンとv2のselect()チェーンは構文が異なるため、バージョンを統一してからCursorに「v2の書き方で書き直してください」と依頼する。

関連ツールの詳細

Cursor

CursorはVSCodeをフォークして構築されたAIネイティブなコードエディタだ。コードベース全体をコンテキストとして理解したうえで補完・生成・リファクタリングを行える。個人プランは月500回の補完が無料で使え、月20ドルのProプランに移行するとAI使用が無制限になる。Supabase連携では型定義ファイルを読み込ませることでDBスキーマを理解した状態でクエリを生成できる。

Supabase

SupabaseはオープンソースのFirebase代替として設計されたBaaSだ。PostgreSQL・認証・リアルタイムサブスクリプション・ストレージ・Edge Functionsを一つのプラットフォームで提供する。無料プランはDBストレージ500MB・月50,000MAUまで対応しており、個人開発や小規模プロダクトであれば無料枠で十分運用できる。

よくある質問（FAQ）

Q. CursorとVSCodeのSupabase連携に違いはありますか？

A. 基本的な手順は同じだが、CursorはコードベースをAIが理解した状態でクエリ生成を行えるため、スキーマに沿ったコードが最初から出やすい。VSCodeでは都度AIに型定義を貼り付ける手間が発生する。

Q. Supabaseの無料プランで本番環境を運用できますか？

A. 月間アクティブユーザーが50,000以下かつDBが500MB以内であれば無料プランで運用可能だ。ただし、無料プロジェクトは7日間アクセスがないと一時停止される仕様がある。継続運用が必要な場合はProプラン（月25ドル）への移行を検討する。

Q. CursorのAIはSupabaseのリアルタイム機能にも対応できますか？

A. 対応できる。supabase.channel()とon()を使ったリアルタイムサブスクリプションのコードも、型定義ファイルとテーブル名を渡せばCursorが正確に生成する。リアルタイム機能はRLSポリシーと連動しているため、ポリシー設定を先に終わらせてから実装に入ることを推奨する。

まとめ

CursorとSupabaseの連携は、型定義の生成とRLSの設定さえ正しく行えば、バックエンドを伴うアプリを最速で動かせる開発環境になる。

手順の核心はシンプルだ。Supabaseでプロジェクトを作り、型定義をCursorに渡し、AIにクエリ生成を任せる。この流れを一度通しで動かせば、次からは応用がきく。

やってみると分かるのだが、最初の動作確認まで30〜60分もあれば十分たどり着ける。まずは無料プランで動かすことを目標に、ステップ1から始めてほしい。

最終更新日：2026年6月1日

関連記事