Reactでメール送信機能を実装する

はじめに

Reactで、サーバレスでメール送信機能を追加する方法を紹介します。

環境/前提

上記ライブラリがインストールされていること。

手順

今回は「EmailJS」というサービスを使って実装していきます。

EmailJSにサービス登録

アカウントを作成すると↓みたいなダッシュボードが確認できます。

「Add New Service」からサービスを作成できます。
作成した「Service ID」を使って、ReactからEmailJSのサービスを利用できます。

EmailJSにテンプレート登録

次にメールの雛形になるテンプレートを作成します。

「Create New Template」からサービスを作成できます。

ここで中括弧で宣言してある部分に、Reactからのパラメータを埋め込むことができます。
作成した「Template ID」を使って、ReactからEmailJSのサービスを利用できます。

ここまででEmailJS側の設定は完了です。

ライブラリインストール

EmailJS用のnpmパッケージをインストールします。

npm i emailjs-com

ReactからEmailJSを呼び出し

index.ts

  import { init,emailjs } from 'emailjs-com';

  function onclickSendMail(){
      // emailjsのUser_IDを使って初期化
      init(process.env.GATSBY_USER_ID);

      // 環境変数からService_IDとTemplate_IDを取得する。
      const emailjsServiceId = process.env.GATSBY_EMAILJS_SERVICE_ID;
      const emailjsTemplateId = process.env.GATSBY_EMAILJS_TEMPLATE_ID;

      // emailjsのテンプレートに渡すパラメータを宣言
      const templateParams = {
          from_name: emailName,
          message: emailText
      };

      // ServiceId,Template_ID,テンプレートに渡すパラメータを引数にemailjsを呼び出し
      emailjs.send(emailjsServiceId,emailjsTemplateId, templateParams).
      then(()=>{
        // do something
      });
  }

以上の手順でReactからサーバレスでメール送信をすることができます。