Tailwind Logo

React Email のサンプルを動かす

Send

公開日: 2024-02-13

今回は React / TypeScript でメールを作成することができる React Email のサンプルを動かしてみたいと思います。

React Email とは?

HTML メールを作成する際には、基本は HTML を書く、ツールを利用する、メール配信ツールについている HTML メールデザインツールを利用する、という形になります。今回はこの HTML メールの作り方に関して綺麗なメールを TypeScript で書くためのツール、React Email を紹介します。

まずは Web サイトでサンプルを見ていきます。以下のページを開くと、Amazon のレビューに関するメールが表示されています。

このメール自体は、TypeScript で記述されており、コードを参照すると以下のように表示されます。

reactmail01.png

実際の React の部品に関しては、ボタンなども含めて色々と用意されています。どういう部品があるかは、Web サイトを参照してください。

サンプルのように部品を並べていくと、メールを作成することができる、という仕組みです。

サンプルを手元で動かす

では実際にサンプルを動かしてみたいと思います。トップページに記載されているコマンドを実行します。

注意: React Email 2.0.0 に関しては Windows の環境では動作しないため、WSL を利用するなどで回避してください
PowerShell
npx create-email@latest

実行結果は以下の通りです。

reactmail02.png

フォルダが完成しました。cd react-email-starter のフォルダを開くと、以下のようなフォルダ構成になっています。

reactmail03.png

ローカルで動作させるために、以下のコマンドを順に実行していきます。

PowerShell
npm install
npm run dev
reactmail04.png

サイトが起動するので、アクセスをすると下記の画面が表示されます。

reactmail05.png

左側に含まれているファイル名をクリックすると、そのメールのプレビューを見ることができます。

reactmail06.png

emails のフォルダの下に入れているファイルが左側に表示されて、クリックをするとそのコードを利用して HTML メールが表示されている、という形になります。

まとめ

今回は React Email がどういうものなのか?を確認して、軽くサンプルを動かしただけとなります。次回は、Next.js のサイトに追加して動作確認をしていきたいと思います。

関連タグ