メール開発の二、三のこと

メールの互換性の問題#

会社に入って以来、メール開発の仕事を担当しています。最初のメールを書いた時を思い出すと、HTML と CSS でデザインを再現して送信したら、変な表示になってしまいました。

いくつかの情報を検索した結果、メールクライアントが最新の HTML5 や CSS3 に対応していないことがわかりました。フレックスレイアウトにも対応しておらず、グリッドレイアウトなどはまったくサポートしていません。フレックスレイアウトに依存しているフロントエンド開発者にとって、フレックスレイアウトを使えないということは、死ぬよりもつらいです😇。他にも多くの互換性の問題がありますが、詳細は以下を参照してください。
https://www.infoq.cn/article/fxglbktqax4uztloxzd3
https://www.caniemail.com/

mjml#

その時（2021 年）には、オンラインで推奨されている解決策はすべてmjmlを使用することでした。公式ウェブサイトからの引用：MJML は、レスポンシブなメールのコーディングの手間を減らすために設計されたマークアップ言語です。その意味論的な構文は簡単で直感的であり、豊富な標準コンポーネントライブラリは開発時間を短縮し、メールのコードベースを軽量化します。MJML のオープンソースエンジンは、ベストプラクティスに準拠した高品質なレスポンシブ HTML を生成します。要するに、mjml はメール開発向けのコンポーネントライブラリであり、さまざまなコンポーネントを提供しています。互換性の問題を考慮する必要はありません。自動的にすべてのメールクライアントに対応します。

mjml コンポーネントの使用方法を簡単に学んだ後、公式ウェブサイトのtry it aliveページで開発を始め、mjml コードと変換された HTML コードを Git リポジトリにコピーしてバックアップを作成しました。これで 1 通のメールの開発が完了しました。

react-email#

その後の 2 年間、mjml の解決策を使用してさまざまなメールを作成しました。作業のスピードはますます速くなっていますが、まだいくつかの課題があります。例えば、自由度が足りない、エンジニアリング化が不十分、テストメールの送信がサポートされていないなどです。

約 1 年前、react-emailが 1.0 バージョンをリリースしました。当時、Twitter 上でいくつかの開発者が推薦していました。公式の説明は次のとおりです：React と TypeScript を使用して美しいメールを作成するための高品質なスタイルがないコンポーネントのコレクションです。フロントエンド開発者にとっては、これは断然魅力的です。私も黙って注目していましたが、まだ使用していませんでした。会社のメールページは毎回大きく変わらず、既存の mjml コードをコピーして少し変更するだけで済んでいました。やはり私の怠惰さが原因です😆

先週、ついに本格的に使用し始めました。多くの課題が解決されました。例えば、

よりシステマティックでエンジニアリング化された統合、コンポーネントの抽象化のサポート

email exportコマンドを使用して変換後の HTML コードをエクスポートできます。Cloudflare Pages パイプラインと組み合わせて、オンラインでメールのプレビューを簡単に実現できます。
デフォルトでResendが統合されており、開発中にいつでもテストメールを送信し、実際の効果をプレビューできます。
tailwind css をサポートしており、レスポンシブページの開発がより簡単になりました

import { Button } from '@react-email/button';
import { Tailwind } from '@react-email/tailwind';

const Email = () => {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              brand: '#007291',
            },
          },
        },
      }}
    >
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        Click me
      </Button>
    </Tailwind>
  );
};

いくつかの考察#

メール開発にはまだいくつかの課題があります。例えば、

複数のメールクライアントのリアルタイムプレビューのサポート方法（より良い開発体験）
Web フォントのサポートが不十分で、デザインの再現ができない
mjml や react-email の CSS プロパティの継承が直感に合わない互換性の問題（163 メールを指名批判）
会社のバックエンドメール送信には mailgun が統合されています。メールの HTML コードを手動でコピー＆ペーストする必要があります。Resend はより良い選択肢でしょうか？

~~エピローグ：このブログを考えるのに書くまで、1 週間もかかりました。私は本当に怠惰ですね。もっと勤勉にならなければなりません~~