React Email 6.0

React Email 6.0とは？

React Email 6.0は、React Emailのオープンソースアップデートで、独自のアプリケーション内に埋め込めるビジュアルメールエディタを提供します。また、新しいテンプレートセットとReact Emailコンポーネントをインポートするための統一パッケージも含まれます。

React Email 6の主な目的は、チームがReactベースのワークフローでメールレイアウトを作成し、メール対応出力（HTML含む）を生成するのを支援することです。エディタは拡張性とカスタマイズ性を保ちます。

オープンソースのビジュアルエディタ（独立パッケージ）: @react-email/editorとしてエディタをインストールし、EmailEditorを使ってアプリに埋め込み。
アプリケーションへの埋め込み: 最小限のコンポーネント例（return <EmailEditor />）でReactに直接レンダリング。
コア＋拡張のエディタアーキテクチャ: ビルトインコアと拡張レイヤーに分離し、コアを変更せずにカスタムブロック/機能を追加可能。
カスタムブロック用の構成可能ノードAPI（EmailNode）: ブロックがHTMLにマッピングする方法とReact Email出力へのレンダリング方法を指定して新しいエディタブロックを定義。
テーマサポート: デフォルトテーマCSS（@react-email/editor/themes/default.css）を読み込むか、アプリのスタイルに合わせたカスタムテーマを作成。
新しいテンプレートコレクション: 認証フローやeコマースシーケンスなどの一般的なユースケース向けテンプレートをReact EmailテンプレートとFigmaファイルとして提供。
統一React Emailコンポーネントパッケージ: react-emailから単一パッケージとしてコンポーネントをインポート（エディタは別途インストール必要）。

パッケージのインストール/更新: React Email 5.0からの移行時はアップグレードセクションの指示に従う。
エディタを別途インストール（統一react-emailパッケージに含まれない）:
- npm i @react-email/editor
Reactアプリにエディタを埋め込み:
- @react-email/editorからEmailEditorをインポートし、コンポーネントでレンダリング。
エディタのスタイリング（オプション）:
- デフォルトテーマCSS（@react-email/editor/themes/default.css）をインポートするか、独自テーマを適用。
エディタのカスタマイズ（オプション）:
- 構成可能API（EmailNode）を使って、HTML解析（parseHTML）と出力生成（renderToReactEmail）を含むカスタムブロックを定義。
テンプレートから開始:
- 提供テンプレートをベースに使用するか、個別セクションを独自のReact Emailテンプレートに引き込む。

ウェブアプリにメール作曲エディタを埋め込み: ダッシュボードにビジュアルエディタを追加し、ユーザーが製品内でメールコンテンツを作成。
特定ワークフロー向けカスタムコンテンツブロックの構築: EmailNodeを定義してコールアウト、メディアアップローダー、埋め込みソーシャル投稿、インラインチャートなどのブロックを作成。
一般的なメールタイプのテンプレート標準化: 新しい認証フローとeコマーステンプレートを使って初期レイアウト作成時間を短縮。
既存UIスタイリングとの統合: デフォルトテーマをインポートして素早く開始し、カスタムテーマを作成してエディタをアプリケーションに適合。
保守可能なメールコンポーネントライブラリの開発: 統一react-emailパッケージから共通レイアウト/UIコンポーネントをインポートし、エディタを別途インストール。

統一react-emailパッケージにエディタは含まれていますか？
いいえ。エディタは@react-email/editorとして別途インストール。
Reactアプリにエディタを直接埋め込めますか？
はい。ドキュメントにEmailEditorのインポートとコンポーネント内レンダリングが記載。
エディタにカスタムブロックを追加する方法は？
EmailNode経由の構成可能APIを使って、ブロックのHTML解析（parseHTML）とReact Emailレンダリング出力（renderToReactEmail）を定義。
新しいテンプレートはどこにありますか？
React EmailテンプレートとFigmaファイルとして利用可能。認証とeコマーステンプレートを含む。
React Email 5.0から6.0へのアップグレードの違いは？
アップグレード手順で@react-email/componentsと@react-email/preview-serverを削除、react-email@latestと@react-email/ui@latestをインストール、react-emailへのインポートを@react-email/componentsから更新。

汎用メールHTMLエディタ/ビルダー（非React）: エディタUIのみ必要でReactベースのコンポーネントワークフローを望まない場合に有用だが、React Email統合モデルを失う。
テンプレート優先のReactメールライブラリ: アプリにビジュアルエディタを埋め込まない場合、エディタ拡張性なしでReactコンポーネント/テンプレートに依存。
HTML出力のWYSIWYGエディタ: メールHTML出力を生成可能だが、React Emailワークフローへのエディタ専用カスタムブロックの構成可能ノードアプローチを提供しない場合あり。
メールマークアップへの手動変換付きデザインツール: Figma優先チームはFigmaでレイアウトを作成し手動でメールコード実装。これはReact Emailテンプレートの直接使用やエディタワークフローによるメール対応出力生成と異なる。