Zenn
✉️

React EmailでHTMLメールを作る

2022/12/11に公開
React
TypeScript
メール
tech

WebのHTMLに比べてメールのHTMLは特殊です。メールクライアントがHTML5に対応していないことを考慮してHTML4.01やXHTML1.0を使ったり、tableで組んだり、CSSをすべてインラインで書かなければいけなかったり、メール独特のお作法が多くあります。

HTMLメールを作る場合は以下のようなものを利用することが多いと思います。

  • SendGridやMailchimpのようなESP(Email Service Provider)の提供するHTMLメール作成機能
  • Web上で公開されているテンプレート
  • Foundation for Emails2やMJMLなどのフレームワーク

React Emailとは？

フレームワークは導入の敷居が高いイメージ（たとえばMJMLはMJMLタグを理解しなければいけない）ですが、最近ではフロントエンドの技術をそのままメールの世界に適用しようとする流れがあります。React Emailはその1つです。

Reactでコンポーネントベースに画面を構築すると、メールのHTMLに変換してくれます。以下の画面はReact Emailで作ったメールをプレビューする画面です。右下は私がReact Emailで作ったメールで、前にPayIDで受信したメールを模倣して作ったものです。

なお、公式のExamplesにはDropboxのパスワードリセットやNotionのログインコード、Stripeのアカウント発行通知、Vercelの招待メールなど様々な形式のものが用意されています。

セットアップ

ドキュメントにはAutomatic SetupとManual Setupの2つが紹介されています。私はいくつかのLinux環境のNode 18や19で試したのですが、Automatic Setupはうまくいきませんでした。

Automatic Setup

以下エラーで失敗...エラーをググると色々ヒットするので試したのですがうまく解決できませんでした。

npx create-email@latest
Need to install the following packages:
  create-email@0.0.4
Ok to proceed? (y) y
/usr/bin/env: 'node --no-warnings': No such file or directory
/usr/bin/env: use -[v]S to pass options in shebang lines

Manual Setup

こちらは手順通りにうまくできました。

作業ディレクトリの作成と初期化

react-email-starterという作業ディレクトリを作成してnpm initでプロジェクトの初期化を行います。

mkdir react-email-starter
cd react-email-starter
npm init

React Emailのインストール

続いてReact Emailで利用するコンポーネントをインストールします。

npm install react-email @react-email/button @react-email/html -E

package.jsonの修正

package.jsonのtestを消して

package.json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

以下を追加しました。

package.json
"scripts": {
  "dev": "email dev"
},

index.tsxを作成

続いてemailsというフォルダを作成して、以下のファイルを置きます。

index.tsx
import { Button } from '@react-email/button';
import { Html } from '@react-email/html';
import * as React from 'react';

export default function Email() {
  return (
    <Html>
      <Button
        pX={20}
        pY={12}
        href="https://example.com"
        style={{ background: '#000', color: '#fff' }}
      >
        Click me
      </Button>
    </Html>
  );
}

実行

以下のコマンドで実行します。

npm run dev

ローカルにサービスが立ち上がったあと、 http://localhost:3000/preview/index にアクセスすると以下のとおりボタンが表示されます。

この次は？

私はてっきり、コンポーネントにstyleなどもある程度含まれているものと勘違いしていて、この後どうすればいいの？という感じになってしまいました。examplesの例を見ると、styleは自分で定義する必要があるんですね。

Containerを追加して

npm install react-email @react-email/container -E

container用のstyleを追加します。

index.tsx
import { Button } from '@react-email/button';
import { Html } from '@react-email/html';
import { Container } from '@react-email/container';
import * as React from 'react';

export default function Email() {
  return (
    <Html lang="ja">
      <Container style={container}>
        <Button
          pX={20}
          pY={12}
          href="https://example.com"
          style={{ background: '#000', color: '#fff' }}
        >
          Click me
        </Button>
      </Container>
    </Html>
  );
}

const container = {
    margin: '0 auto',
    padding: '20px 0 48px',
    textAlign: 'center' as const,
    backgroundColor: '#ffffff',
};

少しメールっぽくなりました。

こんな感じで必要なコンポーネントを追加しながら、styleを定義して作っていきます。

Discussion