React でメールを書いて送る: React Email と送信サービスの選び方

React Email で書き、Resend で送る

React Email の公式ドキュメントでは、コンポーネントを react-email から読み込み、resend と react-email の二つのパッケージを入れる手順が示されています。テンプレートは通常の React コンポーネントです。

// email.tsx
import * as React from 'react';
import { Html, Button } from "react-email";

export function Email(props) {
  const { url } = props;

  return (
    <Html lang="ja">
      <Button href={url}>確認する</Button>
    </Html>
  );
}

export default Email;

送信側では、Resend の react パラメーターにコンポーネントを渡します。HTML への変換は Resend が行うため、自分で render を呼ぶ必要はありません。キーは環境変数に置き、From には認証済みドメインのアドレスを使います（onboarding@resend.dev は動作確認用です）。

import { Resend } from 'resend';
import { Email } from './email';

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

await resend.emails.send({
  from: 'Acme <onboarding@resend.dev>',
  to: ['delivered@resend.dev'],
  subject: 'ご登録ありがとうございます',
  react: <Email url="https://example.com" />,
});

Resend 以外のサービスを使う場合は、render でコンポーネントを HTML 文字列にします。同じドキュメントには、プレーンテキスト版を作る toPlainText と、テキスト出力から要素を除く data-skip-in-text="true" の説明もあります。

import { render, toPlainText } from 'react-email';
import { Email } from './email';

const html = await render(<Email url="https://example.com" />);
const text = toPlainText(html);

ローカルでの確認には、手動セットアップのガイドにある email dev のプレビューを使います。送信先を実在のアドレスにせずに崩れを見たい場合は、Mailtrap のようなテスト用受信箱も選択肢です。

Tailwind を使うときの注意

Tailwind コンポーネントは、メール本文を囲んでクラスをインライン化します。ドキュメントは、ほとんどのメールクライアントはスタイルの対応が限られると明記しています。既定の rem 単位に対応しないクライアントがあるため、pixelBasedPreset を指定して 16px 基準に切り替えます。

import { Tailwind, pixelBasedPreset, Button } from "react-email";

const Email = () => {
  return (
    <Tailwind
      config={{
        presets: [pixelBasedPreset],
        theme: { extend: { colors: { brand: "#007291" } } },
      }}
    >
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        開く
      </Button>
    </Tailwind>
  );
};

使えないものも決まっています。prose（@tailwindcss/typography）、space-*、一つのクラス検索より複雑なセレクターに解決されるクラスは動きません。メディアクエリはインライン化できず、hover: はクライアントの対応が乏しいため、必要になる場面は多くないと書かれています。Tailwind の中に React の context provider を置くと子要素から useContext を使えないので、provider は Tailwind の外側に出します。

CSS はどこまで効くか: caniemail.com のデータ

React のコンポーネントで書いても、最後にメールクライアントが解釈する CSS は変わりません。caniemail.com のデータ（最終更新 2026年9月16日）から、設計に影響しやすい機能を抜粋します。表の値は各機能ページのデスクトップ向けの最新項目です。

この表から読み取れる設計上の結論は二つです。一つは、Outlook for Windows を対象にするなら flex や grid、角丸、メディアクエリに頼ったレイアウトは成立しない、という点です。もう一つは、CSS 変数やダークモード用のメディアクエリは Gmail で効かないため、「効く環境でだけ良くなる」上積みとして扱う、という点です。

MJML との違い

MJML は、<mj-section> や <mj-column> のようなタグでレスポンシブなメールを書き、エンジンが HTML を出力するフレームワークです。公式ガイドによれば、npm install mjml で入れ、CLI で mjml input.mjml -o output.html のようにコンパイルします。mjml -w でファイルを監視でき、検証レベルは skip、soft、strict の三つで、既定は soft です。

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="https://mjml.io/assets/img/logo-small.png"></mj-image>
        <mj-divider border-color="#F45E43"></mj-divider>
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

# ビルド: mjml input.mjml -o output.html

実務上の違いは、HTML を作るタイミングです。MJML は多くの場合ビルド時に HTML を生成してリポジトリに置き、送信側で変数を差し込みます。React Email は送信時に render するので、props を型付きで渡せます。変数の置換を送信サービスのテンプレート側で行いたいか、アプリのコードで行いたいか、で選ぶと迷いません。詳しい比較はMJML と React Email の比較、Tailwind を使うチームはReact Email と Maizzle の比較を読んでください。Maizzle は公式の説明で Vue と Tailwind CSS で HTML メールを作るフレームワークとされています。

送信側の落とし穴

二重送信。Resend は、同じ Idempotency-Key のリクエストを 24 時間以内なら再送せずに同じ応答を返します。キーは 256 文字までで、welcome-user/123456789 のような形式が例として挙げられています。リトライ処理があるコードでは必ず付けます。

await resend.emails.send(
  {
    from: 'Acme <onboarding@resend.dev>',
    to: ['delivered@resend.dev'],
    subject: 'hello world',
    html: '<p>it works!</p>',
  },
  {
    idempotencyKey: 'welcome-user/123456789',
  },
);

SES のサンドボックス。新しいアカウントでは、検証済みのアドレスとドメイン宛にしか送れず、24 時間あたり 200 通、1 秒あたり 1 通までです。本番利用を申請するまで、ユーザー宛てのメールは出せません。

Postmark の Webhook。Postmark の Webhook は署名されず、提供元は URL への Basic 認証と許可する IP アドレスの一覧を勧めています。HMAC の検証を前提に実装すると動きません。

Stripe など外部 Webhook からの送信。送信ハンドラーは失敗時に再実行されるため、上記のキーで冪等にします。

送信を始める前に必要なもの

どのサービスも、キーを取ればすぐ本番で使える、というわけではありません。最初に当たる準備と制限を並べます。

月間の送信数ごとの費用

送信サービスだけの費用です。テンプレートに使う React Email と MJML は無料なので、ここには含めません。

状況別の選び方

• 個人開発や社内ツール（月数千通まで）: React Email と Resend の Free。1 日 100 通の上限に注意します。
• パスワードリセットや領収書など、届かないと困る通知: Postmark のメッセージストリームで一斉配信と分ける構成。
• 月数万通以上で、AWS を既に使っている: SES。ただし本番申請、バウンス処理、評判管理は自分で用意します。
• Tailwind と Vue のチーム: Maizzle も検討。React ならまず Tailwind コンポーネントの制約を確認します。
• HTML をビルド時に確定させたい: MJML と、好きな送信 API の組み合わせ。

本番前の確認項目

1. HTML と一緒に、toPlainText で作ったテキスト版も送る。
2. Outlook（Windows）では flex、grid、角丸、メディアクエリに頼れない前提で、レイアウトを見直す。
3. Tailwind を使うなら pixelBasedPreset を指定し、space-* のようなクラスを使っていないか確認する。
4. 送信のリトライがあるコードには Idempotency-Key を付ける。
5. 外部 Webhook を受けるハンドラーは、同じイベントが二度届いても同じ結果になるようにする。
6. Postmark の Webhook は署名がないので、Basic 認証と IP の許可リストで守る。
7. SES を使うなら、サンドボックス解除の申請が通っていることを確認してからユーザーに送る。

CSS の対応を設計に落とす方法はメールの CSS ガイド、ダークモードはダークモード設計、クライアントごとの検証はクライアント互換性ガイドにまとめています。