【ITニュース解説】Supabase with Supabase CLI, React + TypeScript – Part 2: APIs and Edge Functions

この解説では、Webアプリケーション開発において重要な「バックエンド」の機能を、Supabaseというサービスと「Edge Functions」という技術を使ってどのように実現するかを、システムエンジニアを目指す初心者にも分かりやすく説明する。前回はReactとTypeScriptを使ったアプリでユーザー認証機能（サインアップ、ログイン、ログアウト）をSupabaseでシンプルに実装する方法を扱ったが、今回は一歩進んで、認証やデータベースだけでなく、さらに高度な機能、つまり「カスタムAPI」を構築し、それをフロントエンドから利用する方法に焦点を当てる。これにより、Supabaseが単なる認証・データベースサービスではなく、従来のフルスクラッチのバックエンド開発に近い柔軟性を提供できることが理解できるだろう。

まず、Supabase Edge Functionsとは何か。これはDenoというJavaScript/TypeScriptの実行環境を基盤とした「サーバーレス関数」だ。サーバーレスとは、開発者がサーバーの管理を意識せずにコードをデプロイできるという意味で、必要な時にだけコードが実行されるため、コスト効率が良い。そして、「エッジ」で実行されるという点が非常に重要である。エッジとは、ユーザーに最も近いネットワークの地点を指し、この場所で関数が実行されることで、データの処理やAPIへの応答が驚くほど速くなる。ユーザー体験の向上に直結するこの高速性が、Edge Functionsの大きな魅力の一つだ。また、ロールベースのアクセス制御やAPIキーによって安全に保護され、ビジネスロジックの実行、外部APIとの連携、Webフックの処理、さらにはデータベースにデータを保存する前の変換など、非常に柔軟な用途で利用できる。

Edge Functionsを利用するためには、まずSupabase CLI（コマンドラインインターフェース）をセットアップする必要がある。CLIは、開発者がコマンドを入力することでSupabaseプロジェクトと直接やり取りできるツールである。npm install supabase --save-devというコマンドでCLIをプロジェクトにインストールし、次にnpx supabase loginで自分のSupabaseアカウントにログインする。そして、npx supabase link --project-ref your-project-refというコマンドで、ローカルの開発環境とSupabase上のプロジェクトを紐付ける。これにより、ローカルで開発した関数をSupabaseにデプロイしたり、Supabaseの情報を取得したりできるようになる。

次に、具体的なEdge Functionを作成する。ここでは、ユーザーの一覧を取得するシンプルなAPIを例に挙げる。npx supabase functions new get-all-usersというコマンドを実行すると、「get-all-users」という名前の新しい関数が作成され、functions/get-all-users/index.tsというファイルが生成される。このファイルに、APIの実際の処理内容をTypeScriptで記述していく。

コードの冒頭では、DenoのHTTPサーバー機能とSupabaseクライアントライブラリをインポートしている。これにより、HTTPリクエストを処理したり、Supabaseのデータベースにアクセスしたりする機能が利用可能になる。次に、CORS（Cross-Origin Resource Sharing）ヘッダーを生成するヘルパー関数が定義される。CORSは、Webセキュリティの一種で、異なるドメイン（例えば、Webサイトがexample.comで、APIがapi.example.comの場合）からのリクエストを安全に許可するために必要な設定だ。

そして、createClient関数を使ってSupabaseクライアントを初期化する。この際、SUPABASE_URLとSUPABASE_ANON_KEYという環境変数からSupabaseプロジェクトのURLと匿名公開キーを取得している。環境変数を使用することで、APIキーなどの機密情報をコードに直接書き込まずに済み、セキュリティを高めることができる。

serve関数が、Edge Functionの本体となる。この関数はHTTPリクエストを受け取り、それに応答する。リクエストのorigin（どこからリクエストが来たか）を取得し、リクエストメソッドがOPTIONS（CORSのプリフライトリクエスト）の場合は、適切なCORSヘッダーを付けて204 No Contentのステータスで応答する。これは、実際のデータリクエストの前にブラウザが行うセキュリティチェックに対応するためのものだ。

実際のAPIロジックでは、まずリクエストのURLからuserIdというクエリパラメータ（例：/?userId=123の123部分）を取得する。もしuserIdが提供されていなければ、400 Bad Requestのエラーを返す。userIdが存在すれば、supabase.from("users").select("*").eq("auth_user_id", userId)というコードで、Supabaseのデータベースにあるusersテーブルから、指定されたauth_user_idを持つすべてのユーザー情報を取得する。select("*")はすべての列を選択し、eq("auth_user_id", userId)はauth_user_id列が指定されたuserIdと一致する行をフィルターする条件である。データベースクエリの実行中にエラーが発生した場合は、そのエラーを捕捉して500 Internal Server Errorとして応答する。データが正常に取得できた場合は、取得したデータをJSON形式に変換し、200 OKのステータスとJSON形式であることを示すヘッダーを付けてクライアントに返す。

このEdge Functionの実装が完了したら、npx supabase functions deploy get-all-usersというコマンドで、Supabaseのエッジサーバーにデプロイする。これにより、世界中のユーザーに近い場所で、このAPIが利用可能になる。

次に、このEdge FunctionをReactアプリケーションから呼び出す方法を説明する。フロントエンドでは、Supabaseクライアントを使って、先ほどデプロイした関数を呼び出す。supabase.functions.invoke("get-all-users")というメソッドは、指定した名前（ここではget-all-users）のEdge Functionを呼び出し、その結果を非同期で受け取る。もし呼び出し中にエラーが発生すれば、それをコンソールにログ出力し、そうでない場合は取得したユーザーデータを返す。

Reactコンポーネント内では、useEffectフックを使って、コンポーネントが表示された際に一度だけgetAllUsers関数を呼び出す。取得したデータはuseStateフックで管理されるusersという状態変数に保存され、その後、コンポーネントのJSX内でこのusersデータをループ処理して、テーブル形式で画面に表示する。これにより、フロントエンドとバックエンドが連携し、ユーザー情報を動的に取得・表示するWebアプリケーションが完成する。

Edge Functionsのセキュリティも重要な側面である。デフォルトでは、Edge Functionsは安全であり、Supabaseのサービスロールキーを持つリクエストか、認証済みのユーザーから送信されたトークン付きのリクエストでしかアクセスできない。これは、意図しないアクセスや悪意のある攻撃からAPIを保護するための基本的な設定だ。しかし、もし特定の関数を認証なしで一般公開したい場合は、supabase/config.tomlファイルに[functions.get-all-all-users] verify_jwt = falseという設定を追加し、再度デプロイすることで、その関数を公開状態にできる。この設定は慎重に行う必要があり、公開する情報が機密性を持たない場合にのみ適用すべきだ。

Edge Functionsは、実際の開発現場で様々な場面で活用される。例えば、ユーザーが購入を完了した際にトランザクションメール（購入確認メールなど）を自動で送信したり、SendGridやResendといった外部のメールサービスと安全に連携したりすることが可能だ。また、他のサードパーティAPI（決済サービス、地図サービスなど）との連携ロジックをEdge Functions内に閉じ込めることで、セキュリティを確保しつつフロントエンドの負担を減らせる。定期的に実行する必要のある処理（バッチ処理、データ集計など）を「cronジョブ」としてスケジュール設定したり、データベースにデータを保存する前に特定の形式に変換したりするカスタムデータ処理にも利用できる。

今回の内容を通じて、Supabase Edge Functionsがいかに強力で柔軟なツールであるかが理解できたはずだ。Edge Functionsは、サーバーの管理を意識せずにコードをデプロイできるサーバーレスの利点と、ユーザーに近い場所で高速に動作するエッジコンピューティングの利点を兼ね備えている。これにより、Supabaseプロジェクトに従来のフルバックエンドに匹敵する柔軟性をもたらしつつ、Backend as a Service（BaaS）としてのシンプルさを維持できる。開発者は、インフラの心配をせずにビジネスロジックの記述に集中できるため、より迅速かつ効率的にアプリケーションを開発できるようになるだろう。