Resendでメール送信を実装する 個人開発に使えるAPIの基本

結論

Resendのセットアップは、アカウント作成→APIキー取得→ドメイン設定（オプション）→コード実装の4ステップで30分以内に完了する。JavaScriptからfetchでPOSTするだけでメールが送れるため、バックエンドに組み込みやすい。

アカウント作成とAPIキーの取得

1. アカウント作成

resend.comにアクセスし、GitHubアカウントでサインインする。メールアドレスでも登録できる。

2. APIキーの生成

ダッシュボード → API Keys → 「Create API Key」を選択する。

Name: my-project-key
Permission: Full access（または Sending access）
Domain: All domains（または特定のドメインに限定）

生成されたAPIキー（re_から始まる）をコピーして安全な場所に保存する。このキーは作成直後しか表示されない。

3. 環境変数に設定する

.envに追加する：

RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

コードに直接書かず、必ず環境変数として管理する。

最もシンプルな実装（fetchを使う）

Node.js・Deno・Edge Functionsなど、fetchが使える環境ならどこでも動く。

async function sendEmail({ to, subject, text }) {
  const res = await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.RESEND_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      from: 'Meliorra <noreply@your-domain.com>',
      to: [to],
      subject,
      text,
    }),
  });

  if (!res.ok) {
    const error = await res.json();
    throw new Error(`Email send failed: ${JSON.stringify(error)}`);
  }

  return res.json();
}

// 使い方
await sendEmail({
  to: 'user@example.com',
  subject: 'お問い合わせを受け付けました',
  text: 'お問い合わせありがとうございます。内容を確認次第ご連絡します。',
});

公式SDKを使う方法（Node.js）

Resendの公式SDKを使うとより型安全に実装できる。

npm install resend

import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

const { data, error } = await resend.emails.send({
  from: 'お問い合わせ <noreply@your-domain.com>',
  to: ['your-email@example.com'],
  subject: 'テストメール',
  text: 'これはテストメールです。',
});

if (error) {
  console.error('送信エラー:', error);
}

HTMLメールを送る

テキスト形式のほかにHTMLメールも送れる。htmlパラメータにHTMLを渡すだけだ。

await resend.emails.send({
  from: 'noreply@your-domain.com',
  to: ['user@example.com'],
  subject: 'お問い合わせを受け付けました',
  html: `
    <h2>お問い合わせありがとうございます</h2>
    <p>以下の内容でお問い合わせを受け付けました。</p>
    <table>
      <tr><th>お名前</th><td>${name}</td></tr>
      <tr><th>メール</th><td>${email}</td></tr>
    </table>
    <p>3営業日以内にご連絡いたします。</p>
  `,
  text: `お問い合わせありがとうございます。${name}様のお問い合わせを受け付けました。`,
});

htmlとtextの両方を設定すると、HTMLに対応していないメールクライアントにはプレーンテキストが表示される。

カスタムドメインの設定

noreply@your-domain.comのような自分のドメインから送信するには、DNSの設定が必要だ。

1. ドメインの追加

Resendダッシュボード → Domains → 「Add Domain」でドメインを追加する。

2. DNSレコードの設定

Resendが表示するDNSレコードをドメインレジストラに追加する。

# SPFレコード（送信元の正当性を証明）
TXT @ "v=spf1 include:amazonses.com ~all"

# DKIMレコード（メールの改ざん検知）
CNAME resend._domainkey.your-domain.com → [Resendが指定する値]

DNSの反映を待つ（通常1〜24時間）。Resendダッシュボードで「Verified」になったら設定完了だ。

3. 送信元メールアドレスの設定

ドメインが認証されると、任意の名前@your-domain.comから送信できるようになる。

Supabase Edge Functionsからの使い方

// supabase/functions/send-notification/index.ts
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts';

serve(async (req) => {
  const { to, subject, message } = await req.json();
  
  const resendApiKey = Deno.env.get('RESEND_API_KEY');
  
  const res = await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${resendApiKey}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      from: 'notifications@your-domain.com',
      to: [to],
      subject,
      text: message,
    }),
  });

  const data = await res.json();
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' },
  });
});

Supabase secretsにAPIキーを設定する：

supabase secrets set RESEND_API_KEY=re_xxxxxxxxxx

問い合わせフォームとの組み合わせ実装は問い合わせフォームをSupabase+Resend+Slackで作るで、Slack通知の実装はSlack Incoming Webhookで通知を作るで解説している。

エラーハンドリングとデバッグ

よくあるエラー：

エラーメッセージ	原因	対処
401 Unauthorized	APIキーが間違い・未設定	環境変数を確認
422 Unprocessable Entity	fromアドレスのドメインが未認証	ドメイン認証を完了させる
429 Too Many Requests	送信レート制限に達した	しばらく待ってから再送信

テスト用のメールアドレス：

ドメインを設定していない場合でも、Resendが提供するテスト用の送信元アドレス（onboarding@resend.dev）を使えばすぐに送信テストができる。

from: 'onboarding@resend.dev',  // テスト用

本番環境では必ず自分のドメインに切り替える。

まとめ

Resendのメール送信実装は、APIキーを取得してfetchでPOSTするだけだ。公式SDKを使えばより型安全に実装できる。カスタムドメインの設定はDNSレコードの追加が必要だが、一度設定すれば自分のドメインから専門的なメールが送れる。Supabase Edge Functionsからも同じfetchを使って実装できるため、サーバーレスのバックエンドとも組み合わせやすい。