React Email を使ってメールを配信する
はじめに
こんにちは。
弁護士ドットコム クラウドサイン事業本部の @tttttt_621_s です。
普段はフロントエンドの開発に従事しております。
先日 React Email というものがリリースされました。
React Email は、React + TypeScript で HTML メールを構築できるようです。
Web アプリケーションにおいてメール配信は重要な機能です。
その部分を React + TypeScript で実装できる点に興味が湧きさわってみました。
この記事では、React Email と SendGrid を使ってメールの配信をやってみます。
React Email とは
前述のとおり、 React Email を使うことで React + TypeScript で HTML メールを構築できます。
具体的には、React Email から提供されているパッケージを使い React コンポーネントを作成します。
最終的に render というメソッドで React コンポーネントを HTML に変換しています。
メールクライアントは以下をサポートしています。
- Gmail
- Apple Mail
- Outlook
- Yahoo! Mail
- HEY
- Superhuman
セットアップ
Automatic Setup と Manual Setup の 2 通りありますが、 Automatic Setup を選択しました。
- 以下を実行すると自動的にすべての設定が行われ、テンプレートが生成されます。
npx create-email@latest
npm install
- デフォルトのディレクトリ構成は以下のとおりです。
.
├── emails
│ ├── notion-magic-link.tsx
│ ├── plaid-verify-identity.tsx
│ ├── stripe-welcome.tsx
│ └── vercel-invite-user.tsx
├── package-lock.json
├── package.json
└── readme.md
セットアップはこれでおしまいです。
動かしてみる
- この記事では、メールサービスプロバイダーの SendGrid を使うので SDK をインストールします
npm install @react-email/render @sendgrid/mail
- 次に以下のようにディレクトリ構成とファイルを修正しました。
.
├── src
│ ├── index.tsx
│ ├── Email.tsx
├── package-lock.json
├── package.json
└── README.md
import { render } from '@react-email/render'
import sendgrid from '@sendgrid/mail'
import { Email } from './Email'
sendgrid.setApiKey(process.env.SENDGRID_API_KEY)
const emailHtml = render(<Email url="https://example.com" />)
const options = {
from: 'you@example.com',
to: 'user@gmail.com',
subject: 'hello world',
html: emailHtml,
}
sendgrid.send(options)
import { FC } from 'react'
import { Button } from '@react-email/button'
type Props = {
url: string
}
export const Email: FC<Props> = ({ url }) => {
return (
<Button href={url} data-testid="button">
Click me
</Button>
)
}
- SendGrid の API キーの取得は会員登録後以下の記事を参考にしました。
- ビルドして生成された js ファイルを実行するとメールが届きました。
テストを書く
作成したメールのコンポーネントに対してテストを書くこともできます。
テストには jest と testing-library を使用しました。
- jest と testing-library をインストールします。
npm install --save-dev jest @testing-library/react
- テストを 1 つ作成してみます。
import { render, screen } from '@testing-library/react'
import { Email } from '../Email'
describe('Email.tsx', () => {
const defaultUrl = 'https://example.com'
test('Click me と表示されていること', () => {
render(<Email url={defaultUrl} />)
const element = screen.getByTestId('button')
expect(element).toHaveTextContent('Click me')
})
})
- テストも PASS しました。
PASS src/__tests__/Email.test.tsx
Email.tsx
✓ Click me と表示されていること (30 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
おわりに
React Email は現在 Beta（2022/12/22 時点）ですが、今後が楽しみです。
個人的に、props に応じてメールの内容を変えることができたり、テストを書ける点が嬉しいなと思いました。
この記事で作成したコードは以下のリポジトリにあります。
明日の担当は @namizatork さんです。お楽しみに。
Discussion