📨

React Email を使ってメールを配信する

2022/12/22に公開約3,500字

はじめに

こんにちは。
弁護士ドットコム クラウドサイン事業本部の @tttttt_621_s です。
普段はフロントエンドの開発に従事しております。

先日 React Email というものがリリースされました。

https://react.email/

React Email は、React + TypeScript で HTML メールを構築できるようです。

Web アプリケーションにおいてメール配信は重要な機能です。
その部分を React + TypeScript で実装できる点に興味が湧きさわってみました。

この記事では、React Email と SendGrid を使ってメールの配信をやってみます。

React Email とは

前述のとおり、 React Email を使うことで React + TypeScript で HTML メールを構築できます。

具体的には、React Email から提供されているパッケージを使い React コンポーネントを作成します。
https://github.com/zenorocha/react-email/tree/main/packages

最終的に 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

https://react.email/docs/integrations/sendgrid

  • 次に以下のようにディレクトリ構成とファイルを修正しました。
.
├── src
│   ├── index.tsx
│   ├── Email.tsx
├── package-lock.json
├── package.json
└── README.md
src/index.tsx
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)
src/Email.tsx
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 キーの取得は会員登録後以下の記事を参考にしました。

https://sendgrid.kke.co.jp/docs/Tutorials/A_Transaction_Mail/manage_api_key.html

  • ビルドして生成された js ファイルを実行するとメールが届きました。

テストを書く

作成したメールのコンポーネントに対してテストを書くこともできます。
テストには jest と testing-library を使用しました。

  • jest と testing-library をインストールします。
npm install --save-dev jest @testing-library/react
  • テストを 1 つ作成してみます。
src/__tests__/Email.test.tsx
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 に応じてメールの内容を変えることができたり、テストを書ける点が嬉しいなと思いました。

この記事で作成したコードは以下のリポジトリにあります。
https://github.com/TakaShinoda/react-email-sample

明日の担当は @namizatork さんです。お楽しみに。

GitHubで編集を提案

Discussion

ログインするとコメントできます