react-email

React Email

概要

React Email は、React コンポーネントを使用してレスポンシブな HTML メールを作成するためのライブラリです。スタイルが設定されていない、アクセシビリティに配慮したコンポーネントを提供し、メールクライアントに対応した HTML にレンダリングします。インラインスタイル、ラッパーコンポーネントを介した Tailwind CSS、カスタム Web フォントに対応し、HTML とプレーンテキストの両方にレンダリングできます。

使用する場面： トランザクションメール（ウェルカムメール、パスワードリセット、領収書）、マーケティング用テンプレート、メールデザインシステム、メールをサーバーサイドでレンダリングするあらゆるプロジェクト。

使用しない場面： 動的コンテンツのない静的な HTML メールテンプレート、専用のメールビルダー（MJML、Maizzle）をすでに使用しているプロジェクト、またはプレーンテキストメールのみが必要な場合。

クイックリファレンス

パターン	API	主なポイント
ドキュメント構造	Html, Head, Body	Html がすべてを囲み、Head がフォントやメタデータを読み込みます
コンテンツコンテナ	Container	コンテンツを中央に配置し、max-width を設定します
レイアウトグリッド	Section, Row, Column	メールクライアント向けのテーブルベースのレイアウト
テキストコンテンツ	Text, Heading	Heading は as プロパティで h1〜h6 を指定できます
リンク	Link	標準的なアンカー。href が必須です
行動喚起	Button	ボタン風のスタイルを設定したリンクとしてレンダリングされます。href が必須です
画像	Img	常に width、height、alt を設定します
区切り線	Hr	セクション間の水平線
受信トレイのプレビュー	Preview	受信トレイの一覧に表示されるプレビューテキストを設定します
カスタムフォント	Font	Head 内に配置し、webFont と fallbackFontFamily を設定します
Tailwind スタイル	Tailwind	メールを囲み、レンダリング時に Tailwind クラスをインライン化します
HTML にレンダリング	render(<Email />)	非同期で HTML 文字列を返します
プレーンテキストにレンダリング	render(<Email />, { plainText: true })	HTML を取り除き、テキストを返します
整形出力	render(<Email />, { pretty: true })	デバッグ向けに HTML を整形します
プレビューサーバー	email dev	ホットリロード対応のローカル開発サーバー
Markdown コンテンツ	Markdown	Markdown をメール対応の HTML にレンダリングします
コードブロック	CodeBlock	テーマに対応した、シンタックスハイライト付きコード
インラインコード	CodeInline	等幅フォントのインラインコード範囲

よくある間違い

間違い	正しいパターン
インラインスタイルで className を使用する	Tailwind（className）またはインラインの style オブジェクトのいずれかを使用し、同じ要素で両方を使わないでください
Img に width／height を指定し忘れる	メールクライアントでレイアウトがずれるのを防ぐため、必ず寸法を指定してください
Container の中に Container をネストする	中央揃えには Container を1つ使用し、内部のレイアウトには Section／Row／Column を使用してください
CSS Grid または Flexbox を使用する	メールクライアント間で機能するテーブルベースのレイアウトには、Section、Row、Column を使用してください
Head の外に Font を配置する	正しく読み込むには、Font を Head の子要素にする必要があります
render() を同期的に使用する	render() は非同期です。必ず結果を await してください
Html の中に Tailwind を配置する	Html ではなく、Tailwind で Html をラップしてください
Preview コンポーネントを省略する	Preview がないと、メールクライアントには本文の最初のテキストがプレビューとして表示されます
外部 CSS スタイルシートを使用する	メールクライアントは <link> タグを取り除きます。インラインスタイルまたは Tailwind コンポーネントを使用してください
React コンポーネントを resend.emails.send に渡す	まず HTML 文字列にレンダリングし、その後 html を送信メソッドに渡してください

委任

• メールテンプレートの調査：Explore エージェントを使用します
• メールのスタイルレビュー：Task エージェントを使用します
• コードレビュー：code-reviewer エージェントに委任します

resend スキルが利用できる場合は、メール配信タスクをそのスキルに委任してください。 利用できない場合は、次を推奨してください：npx skills add oakoss/agent-skills --skill resend

参考資料

• 組み込みコンポーネント：構造、コンテンツ、レイアウト
• インライン CSS、Tailwind、レスポンシブパターン、フォントを使ったスタイリング
• HTML へのレンダリング、プレビューサーバー、プロバイダーとの統合