Harmonic Society
オンライン予約 お問い合わせ
バックエンド・API

Supabase Edge Functionsの使い方完全ガイド｜初心者でも実践できる導入手順

kento_morota 24分で読めます

「サーバーの管理は面倒だけど、バックエンドの処理は必要」「ユーザーに近い場所で高速に処理を実行したい」――Supabase Edge Functionsは、サーバー管理不要で世界中のエッジロケーションからコードを実行できる仕組みです。

本記事では、Supabase Edge Functionsの基本から環境構築、デプロイ、認証連携まで、中小企業のIT担当者が実務で使えるノウハウを初心者向けに解説します。

Supabase Edge Functionsとは？基礎知識と活用メリット

「サーバーレス」「Edge Functions」という言葉を聞いて、難しそうだと感じていませんか？実は、中小企業の業務改善にこそ活用できる、とても実用的な技術です。

Supabase Edge Functionsは、サーバーを自分で管理することなく、必要な処理を世界中のエッジロケーション（ユーザーに近い場所）で実行できる仕組みです。コードを書いてデプロイするだけで、すぐに動き始めます。Supabaseの基本操作はSupabase入門ガイドで解説しています。

Edge Functionsの仕組みと特徴

Edge Functionsは、ユーザーに最も近いサーバーで処理を実行する仕組みです。同様のエッジコンピューティングサービスとしてCloudflare Workersも活用されています。従来のサーバーが一か所に固定されているのに対し、世界中に分散配置されています。

動作の流れは以下の通りです：

  1. ユーザーがWebアプリで操作を行う
  2. 最も近いエッジロケーションに送信される
  3. Edge Functionが処理を実行
  4. 結果がユーザーに返される

Supabase Edge FunctionsはDenoランタイムで動作し、TypeScriptやJavaScriptで記述できます。Web開発の知識があれば、すぐに始められるのです。

従来のサーバー・SaaSとの違い

従来のサーバー運用の課題：
- サーバーの設定・管理に専門知識が必要
- セキュリティアップデートやメンテナンスが継続的に発生
- 固定費が高く、小規模利用でもコストがかかる

SaaSツールの課題：
- 自社の業務フローに完全には合わない
- 月額費用が積み重なり、複数ツールで高額に
- データ連携が制限され、カスタマイズできない

Edge Functionsの特徴：
- サーバー管理が不要（サーバーレス）
- 使った分だけの従量課金で、小規模なら無料枠内で運用可能
- 自社の業務に必要な機能だけを実装できる
- 他のシステムやAPIと自由に連携可能

特に中小企業にとって重要なのは、初期コストが低く、段階的に拡張できる点です。まず小さく始めて、業務に合わせて機能を追加していく柔軟性が最大の魅力といえます。

中小企業での活用メリット

コスト面のメリット：
- 初期投資がほぼゼロ：サーバー購入やライセンス費用が不要
- 無料枠が充実：月間50万リクエストまで無料
- 従量課金で無駄がない：使った分だけの支払いで、固定費を削減

管理面のメリット：
- 専門的なインフラ知識が不要：Supabaseが自動でスケーリングや負荷分散を処理
- メンテナンス作業が最小限：OSアップデートやセキュリティパッチの適用が不要
- 属人化を防げる：コードとして管理されるため、担当者が変わっても引き継ぎやすい

向いている業務シーン

1. データ処理・集計業務
- Excelで管理している顧客データの自動集計
- 複数のスプレッドシートを統合したレポート生成

2. 外部サービスとの連携
- LINE公式アカウントからの問い合わせを自動でデータベースに保存
- Googleフォームの回答を受け取って、自動で顧客管理システムに登録

3. 認証・セキュリティが必要な処理
- 会員専用ページへのアクセス制御
- APIキーを使った安全な外部サービス呼び出し

4. 定型的な業務の自動化
- 毎週月曜日に売上レポートを自動生成してメール送信
- 在庫が一定数を下回ったら担当者に通知

開発環境の準備とセットアップ

実際にSupabase Edge Functionsを使い始めるには、いくつかの準備が必要です。パソコンとインターネット環境があれば、誰でも始められます。

必要なアカウントとツール

すべて無料で始められます。

1. Supabaseアカウント（必須）
- https://supabase.com/ から「Start your project」でアカウント作成
- GitHubアカウントでサインアップするのが最も簡単
- 無料プランで十分スタート可能（クレジットカード登録不要）

2. GitHubアカウント（推奨）
- コードのバージョン管理に使用
- https://github.com/ から無料で作成可能

3. Visual Studio Code（必須）
- コードを書くためのエディタ
- 無料で高機能、TypeScriptの補完機能が優秀

4. Node.js（必須）
- Supabase CLIを動かすために必要
- https://nodejs.org/ から最新のLTS版をダウンロード
- バージョン18以上を推奨

これらの準備は、初めての方でも30分〜1時間程度で完了します。

Supabase CLIのインストール

Supabase CLI（コマンドラインインターフェース）は、Edge Functionsの作成やデプロイを行うための必須ツールです。

Windowsの場合：

npm install -g supabase
supabase --version

Macの場合：

brew install supabase/tap/supabase

または、npmを使う方法も可能です：

npm install -g supabase

よくあるエラーと解決策：

  • 「npm: command not found」：Node.jsが正しくインストールされていません。Node.jsを再インストールしてください。
  • 「Permission denied」（Macの場合）：sudo npm install -g supabaseで実行してください。

インストールが完了したら、supabase loginコマンドでSupabaseアカウントと連携します。

開発環境のセットアップ

1. プロジェクト用フォルダの作成

Windowsの場合：

mkdir C:\Projects\my-edge-functions
cd C:\Projects\my-edge-functions

Macの場合：

mkdir ~/Projects/my-edge-functions
cd ~/Projects/my-edge-functions

2. Supabaseプロジェクトの初期化

supabase init

これにより、supabaseフォルダが作成され、必要な設定ファイルが生成されます。

3. VS Codeでプロジェクトを開く

VS Codeを起動し、「フォルダーを開く」から作成したプロジェクトフォルダを選択します。

4. 推奨拡張機能のインストール

VS Codeで以下の拡張機能をインストールすると、開発が効率的になります：
- Deno: Edge FunctionsはDenoランタイムで動作するため必須
- TypeScript: コード補完やエラーチェックに便利

5. Denoのインストール

Windowsの場合（PowerShell）：

irm https://deno.land/install.ps1 | iex

Macの場合：

curl -fsSL https://deno.land/install.sh | sh

初期設定のポイント

1. .gitignoreの設定

プロジェクトルートに.gitignoreファイルを作成し、以下を追加します：

.env
.env.local
node_modules/
supabase/.temp

機密情報や不要なファイルをGitにコミットしてしまうことを防げます。

2. 環境変数の管理

  • ローカル開発：.env.localファイルに記述
  • 本番環境：Supabaseダッシュボードから設定

決して、APIキーなどをコードに直接書き込まないでください。

3. Supabaseプロジェクトとの紐付け

supabase link --project-ref your-project-ref

your-project-refは、Supabaseダッシュボードの「Settings」→「General」で確認できます。

はじめてのEdge Function作成とデプロイ

準備が整ったら、実際にEdge Functionを作成してみましょう。最もシンプルな「Hello World」から始めて、段階的に理解を深めていきます。

プロジェクトのディレクトリ構成

基本的なディレクトリ構成は以下の通りです：

my-edge-functions/
├── supabase/
│   ├── functions/          # ここにEdge Functionsを作成
│   ├── config.toml         # Supabase設定
└── .env.local             # ローカル環境変数

重要なのはsupabase/functions/フォルダです。ここに、個別のEdge Functionをフォルダ単位で作成していきます。

シンプルな関数を作成する

1. 関数の作成コマンド

supabase functions new hello

これにより、supabase/functions/hello/index.tsファイルが自動生成されます。

2. コードの記述

生成されたindex.tsを開き、以下のコードに書き換えます：

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"

interface RequestBody {
  name?: string
}

interface ResponseData {
  message: string
}

serve(async (req) => {
  try {
    const { name }: RequestBody = await req.json()

    const data: ResponseData = {
      message: `Hello ${name || 'World'}!`,
    }

    return new Response(
      JSON.stringify(data),
      { headers: { "Content-Type": "application/json" } },
    )
  } catch (error) {
    return new Response(
      JSON.stringify({ error: error.message }),
      { status: 400, headers: { "Content-Type": "application/json" } },
    )
  }
})

このシンプルな関数は、POSTリクエストで送られた名前を受け取り、挨拶メッセージを返します。

ローカル環境でのテスト

作成した関数をいきなり本番環境にデプロイするのは危険です。必ずローカル環境でテストしましょう。

1. ローカルでSupabaseを起動

supabase start

初回起動時は、Dockerイメージのダウンロードに時間がかかります。

2. Edge Functionをローカルで実行

supabase functions serve hello

これで、http://localhost:54321/functions/v1/helloでアクセスできるようになります。

3. 動作確認

curlコマンドでテストします：

curl -X POST http://localhost:54321/functions/v1/hello \
  -H "Content-Type: application/json" \
  -d '{"name": "Taro"}'

期待される結果：

{
  "message": "Hello Taro!"
}

本番環境へのデプロイ

ローカルテストで問題がなければ、本番環境にデプロイします。

1. Supabaseプロジェクトへのログイン確認

supabase login

2. デプロイコマンドの実行

supabase functions deploy hello

デプロイが成功すると、以下のようなメッセージが表示されます：

Deployed Function hello
URL: https://your-project-ref.supabase.co/functions/v1/hello

3. 本番環境での動作確認

curl -X POST https://your-project-ref.supabase.co/functions/v1/hello \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_ANON_KEY" \
  -d '{"name": "Taro"}'

注意：本番環境ではAPIキーが必要です。YOUR_ANON_KEYは、Supabaseダッシュボードの「Settings」→「API」で確認できます。

デプロイのベストプラクティス：
1. 必ずローカルテストを実施
2. Gitでバージョン管理（コミット→デプロイの順）
3. デプロイ後は必ず動作確認

実務で使える実装パターン

Hello Worldが動いたら、次は実際の業務で使える実装パターンを学びましょう。

Supabase認証との連携

Edge Functionsでは、Supabaseの認証機能と連携して、ログインユーザーのみがアクセスできる処理を実装できます。

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

serve(async (req) => {
  try {
    const authHeader = req.headers.get('Authorization')
    if (!authHeader) {
      return new Response(
        JSON.stringify({ error: 'Authorization header required' }),
        { status: 401, headers: { "Content-Type": "application/json" } }
      )
    }

    const supabaseClient = createClient(
      Deno.env.get('SUPABASE_URL') ?? '',
      Deno.env.get('SUPABASE_ANON_KEY') ?? '',
      {
        global: {
          headers: { Authorization: authHeader },
        },
      }
    )

    const {
      data: { user },
      error: userError,
    } = await supabaseClient.auth.getUser()

    if (userError || !user) {
      return new Response(
        JSON.stringify({ error: 'Invalid token' }),
        { status: 401, headers: { "Content-Type": "application/json" } }
      )
    }

    const data = {
      message: `Hello ${user.email}!`,
      userId: user.id,
    }

    return new Response(
      JSON.stringify(data),
      { headers: { "Content-Type": "application/json" } }
    )
  } catch (error) {
    return new Response(
      JSON.stringify({ error: error.message }),
      { status: 500, headers: { "Content-Type": "application/json" } }
    )
  }
})

データベース操作を含む関数

Supabaseデータベースとの連携も簡単です：

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

serve(async (req) => {
  const supabaseClient = createClient(
    Deno.env.get('SUPABASE_URL') ?? '',
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
  )

  const { data, error } = await supabaseClient
    .from('customers')
    .select('*')
    .limit(10)

  if (error) {
    return new Response(
      JSON.stringify({ error: error.message }),
      { status: 500, headers: { "Content-Type": "application/json" } }
    )
  }

  return new Response(
    JSON.stringify(data),
    { headers: { "Content-Type": "application/json" } }
  )
})

外部APIとの連携

外部サービスのWebhookを受信する例：

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"

serve(async (req) => {
  const payload = await req.json()

  // Webhook検証（例：LINE Messaging API）
  const signature = req.headers.get('x-line-signature')
  // 署名検証ロジック...

  // データ処理
  console.log('Received webhook:', payload)

  // 外部APIへのリクエスト
  const response = await fetch('https://api.example.com/notify', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${Deno.env.get('EXTERNAL_API_KEY')}`
    },
    body: JSON.stringify(payload)
  })

  return new Response(
    JSON.stringify({ success: true }),
    { headers: { "Content-Type": "application/json" } }
  )
})

環境変数の安全な管理

ローカル環境での設定：

.env.localファイルを作成：

EXTERNAL_API_KEY=your_api_key_here
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_anon_key

本番環境での設定：

Supabaseダッシュボードから設定します：
1. 「Edge Functions」メニューを開く
2. 対象の関数を選択
3. 「Settings」→「Secrets」で環境変数を追加

運用時のトラブルシューティング

Edge Functionsの運用で遭遇しやすい問題と解決策を解説します。

よくあるエラーと対処法

エラー：「Function returned an error: Deno.env.get is not a function」
- 原因：環境変数が正しく設定されていない
- 対処法：Supabaseダッシュボードで環境変数を確認

エラー：「Authorization header required」
- 原因：APIキーが送信されていない
- 対処法：リクエストヘッダーにAuthorization: Bearer YOUR_KEYを追加

エラー：「Function execution timed out」
- 原因：処理に時間がかかりすぎている
- 対処法：処理を最適化するか、バックグラウンドジョブに分割

ログの確認とデバッグ

ログの確認方法：

Supabaseダッシュボードの「Edge Functions」→「Logs」で実行ログを確認できます。

デバッグのコツ：

console.log('Debug info:', { userId, timestamp: new Date() })
console.error('Error occurred:', error)

console.logやconsole.errorの出力は、Supabaseのログに記録されます。

パフォーマンス最適化

1. 不要な処理を削減
- データベースクエリは必要最小限に
- 外部APIの呼び出し回数を減らす

2. キャッシュの活用
- 頻繁にアクセスするデータはキャッシュする
- Supabase Storageを活用

3. 非同期処理の活用
- 並列実行可能な処理はPromise.allで実行

const [users, orders] = await Promise.all([
  supabaseClient.from('users').select('*'),
  supabaseClient.from('orders').select('*')
])

本番運用で気をつけるべきこと

1. エラーハンドリングの徹底
- すべての処理にtry-catchを実装
- エラー時は適切なステータスコードを返す

2. セキュリティ対策
- APIキーは環境変数で管理
- 入力値の検証を必ず実施
- CORS設定を適切に行う

3. 監視とアラート
- 定期的にログを確認
- エラー率が上昇したら通知を受け取る仕組みを構築

中小企業での活用事例

実際の業務でSupabase Edge Functionsをどう活用できるか、具体的な事例を紹介します。

Excel業務の自動化・Web化

事例：顧客リストの自動集計とレポート生成

従来はExcelで管理していた顧客データを、Supabaseデータベースに移行。Edge Functionで毎週月曜日に自動集計し、レポートをメール送信する仕組みを構築。

実装のポイント：
- Supabase Databaseで顧客データを管理
- Edge Functionで集計処理を実行
- 外部メールAPIと連携して自動送信

顧客管理・案件管理システムへの組み込み

事例：問い合わせフォームからの自動登録

Webサイトの問い合わせフォームから送信されたデータを、Edge Functionで受け取り、顧客管理システムに自動登録。担当者にSlack通知も送信。

実装のポイント：
- フォーム送信をEdge Functionで受信
- バリデーション後、データベースに保存
- Slack APIで担当者に通知

通知・レポート自動生成

事例：在庫アラート通知

在庫数が一定数を下回ったら、自動で担当者にメール通知する仕組み。

実装のポイント：
- データベースのトリガーでEdge Functionを実行
- 条件に応じてメール送信
- ログを記録して通知履歴を管理

「ちょうどいい仕組み」の作り方

大規模なSaaSは機能が多すぎて使いこなせない、かといってExcelでは限界がある。そんな課題を、Edge Functionsなら解決できます。

ポイント：
1. 小さく始める：まず1つの業務から自動化
2. 段階的に拡張：効果を確認しながら機能を追加
3. 必要な機能だけ実装：無駄な機能は作らない

まとめ：Supabase Edge Functionsで業務改善を始めよう

この記事で学んだこと

Supabase Edge Functionsは、中小企業の業務改善に最適な技術です。

重要なポイント：
- サーバー管理不要で、初期コストが低い
- 使った分だけの従量課金で無駄がない
- 自社の業務に必要な機能だけを実装できる
- TypeScript/JavaScriptで開発可能

基本的な使い方：
1. 開発環境を準備（Supabase CLI、VS Code、Node.js）
2. supabase functions newで関数を作成
3. ローカルでテスト後、デプロイ
4. 認証、データベース操作、外部API連携を実装

次のステップ

さらに学ぶためのリソース：
- Supabase公式ドキュメント：https://supabase.com/docs
- Deno公式ドキュメント：https://deno.land/manual
- TypeScript公式ドキュメント：https://www.typescriptlang.org/docs/

実践のヒント：
1. まず簡単な処理から始める
2. 既存の業務フローを見直し、自動化できる部分を探す
3. 小さく始めて、段階的に拡張していく

導入サポートのご案内

「自社で導入できるか不安」「技術的なサポートが欲しい」という方は、Harmonic Societyにご相談ください。

提供できるサポート：
- Supabase Edge Functionsを活用した業務システム開発
- AI活用による開発期間の短縮（従来の1/10の期間）
- 導入後の運用サポートまで一気通貫

中小企業向けの「ちょうどいい」システムを、短期間・低コストで構築します。まずはお気軽にご相談ください。

お問い合わせ：https://harmonic-society.co.jp/contact/

#Supabase#Edge#Functions
共有:

関連記事

Denoの使い方と特徴を初心者向けに解説｜Node.jsとの…

Denoの使い方と特徴を初心者向けに解説｜Node.jsとの違いと実践方法
【FastAPI入門】使い方を実例で解説！初心者でも安心のA…

【FastAPI入門】使い方を実例で解説！初心者でも安心のAPI開発ガイド
【Go言語入門】Web開発の始め方を実例で解説｜初心者でも作…

【Go言語入門】Web開発の始め方を実例で解説｜初心者でも作れるAPI開発

ちょっとした業務の悩みも、気軽にご相談ください。

まずは話だけ聞いてもらう