はじめに
メールの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,
});
スパムチェック機能
React Emailには送信前にメールのスパム判定をチェックする機能もあります。これ、意外と重要で、せっかく作ったメールが迷惑メールフォルダに入ってしまったら意味がないですからね。
まとめ
React Emailは、メールテンプレート開発の苦痛をかなり軽減してくれるライブラリです。
おすすめポイント
- Reactを使っているなら学習コストほぼゼロ
- メールクライアント間の差異を自動で吸収
- TypeScriptによる型安全性
- Tailwind CSSも使える
- プレビュー機能で開発効率アップ
向いているケース
- Next.jsやReactベースのプロジェクトでメール送信機能を実装したい
- トランザクションメール(会員登録、パスワードリセットなど)を作りたい
- チームでメールテンプレートを管理したい
正直なところ、2025年にメールテンプレートを新規で作るなら、React Email一択だと思います。テーブルレイアウトと格闘する時代は終わりました。
参考リンク