React Email - Reactでメールテンプレートを作る時代がきた

はじめに

メールのHTMLテンプレート開発、やったことある人なら分かると思うんですが、正直かなりしんどいんですよね。

テーブルレイアウトを駆使して、GmailとOutlookの両方で崩れないように調整して、インラインスタイルをひたすら書いて...。2025年になってもこの状況かと思うと、ちょっとげんなりします。

そんな中で登場したのがReact Emailです。名前の通り、Reactでメールテンプレートを書けるライブラリなんですが、これが意外と実用的で、個人的にはもうこれ一択だと思っています。

GitHubのスター数は17,500を超えていて、Resend社が開発しているという点でも信頼感があります。

React Emailの特徴

Reactコンポーネントでメールが書ける

一番の特徴はこれですね。普段Reactを書いている人なら、学習コストほぼゼロでメールテンプレートが作れます。

import { Button, Html, Head, Body, Container, Text } from "@react-email/components";

const WelcomeEmail = () => {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif" }}>
        <Container>
          <Text>ご登録ありがとうございます。</Text>
          <Button
            href="https://example.com/dashboard"
            style={{
              backgroundColor: "#000",
              color: "#fff",
              padding: "12px 20px"
            }}
          >
            ダッシュボードへ
          </Button>
        </Container>
      </Body>
    </Html>
  );
};

export default WelcomeEmail;

これ、普通のReactコンポーネントとほぼ同じ書き方なんですよ。TypeScriptも使えるし、propsで動的に内容を変えることもできます。

メールクライアント間の差異を吸収

Gmail、Outlook、Apple Mail、Yahoo!メール...それぞれレンダリングが微妙に違うんですが、React Emailのコンポーネントはこの差異を内部で吸収してくれます。

個人的にはこれが一番ありがたいポイントですね。Outlookだけ表示が崩れる問題に何度悩まされたことか。

Tailwind CSSにも対応

スタイリングにTailwind CSSを使うこともできます。

import { Tailwind, Button } from "@react-email/components";

const StyledEmail = () => {
  return (
    <Tailwind>
      <Button className="bg-blue-500 text-white px-4 py-2 rounded">
        クリック
      </Button>
    </Tailwind>
  );
};

普段Tailwindを使っている人にとっては、これでさらに開発速度が上がると思います。

便利な組み込みコンポーネント

17種類以上のコンポーネントが用意されています。

Html, Head, Body - 基本構造
Container, Section, Row, Column - レイアウト
Button, Link - インタラクション
Img - 画像
Heading, Text - テキスト
Hr - 区切り線
Preview - プレビューテキスト

これらを組み合わせるだけで、大抵のメールテンプレートは作れます。

インストール方法

セットアップは簡単です。

新規プロジェクトの場合

npx create-email@latest

これで必要なファイル構成が自動で生成されます。

既存プロジェクトに追加する場合

npm install @react-email/components -E

-Eオプションは正確なバージョンでインストールするためのものです。メールテンプレートは安定性が重要なので、バージョンを固定しておくのがおすすめですね。

基本的な使い方

1. テンプレートを作成

emailsディレクトリを作って、そこにコンポーネントを配置するのが一般的です。

// emails/notification.tsx
import {
  Html,
  Head,
  Body,
  Container,
  Section,
  Text,
  Link,
  Hr,
} from "@react-email/components";

interface NotificationEmailProps {
  userName: string;
  message: string;
}

const NotificationEmail = ({ userName, message }: NotificationEmailProps) => {
  return (
    <Html>
      <Head />
      <Body style={main}>
        <Container style={container}>
          <Section>
            <Text style={heading}>{userName}さんへ</Text>
            <Text style={paragraph}>{message}</Text>
            <Hr style={hr} />
            <Link href="https://example.com" style={link}>
              詳細を確認する
            </Link>
          </Section>
        </Container>
      </Body>
    </Html>
  );
};

const main = {
  backgroundColor: "#f6f9fc",
  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
};

const container = {
  backgroundColor: "#ffffff",
  margin: "0 auto",
  padding: "20px",
  maxWidth: "600px",
};

const heading = {
  fontSize: "20px",
  fontWeight: "bold",
  marginBottom: "16px",
};

const paragraph = {
  fontSize: "16px",
  lineHeight: "1.6",
};

const hr = {
  borderColor: "#e6ebf1",
  margin: "20px 0",
};

const link = {
  color: "#5469d4",
  textDecoration: "underline",
};

export default NotificationEmail;

2. プレビューで確認

開発サーバーを起動してブラウザでプレビューできます。

npx react-email dev

これでリアルタイムにメールの見た目を確認しながら開発できます。ホットリロードにも対応しているので、変更が即座に反映されます。

3. HTMLに変換

作成したテンプレートはHTMLに変換して送信します。

import { render } from "@react-email/render";
import NotificationEmail from "./emails/notification";

const html = await render(
  <NotificationEmail
    userName="田中"
    message="新しいコメントがあります"
  />
);

// このhtmlを任意のメール送信サービスで使用

実践的なユースケース

Resendと組み合わせる

React Emailを作っているResend社のメール送信サービスとの組み合わせが最もスムーズです。

import { Resend } from "resend";
import WelcomeEmail from "./emails/welcome";

const resend = new Resend("re_xxxxx");

await resend.emails.send({
  from: "noreply@example.com",
  to: "user@example.com",
  subject: "ようこそ",
  react: <WelcomeEmail userName="田中" />,
});

HTMLへの変換すら不要で、Reactコンポーネントをそのまま渡せます。

SendGrid、AWS SESとの連携

他のメール送信サービスを使う場合は、HTMLに変換してから送信します。

import { render } from "@react-email/render";
import sgMail from "@sendgrid/mail";

const html = await render(<WelcomeEmail userName="田中" />);

await sgMail.send({
  to: "user@example.com",
  from: "noreply@example.com",
  subject: "ようこそ",
  html: html,
});