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からサーバレスでメール送信をすることができます。
Author And Source
この問題について(Reactでメール送信機能を実装する), 我々は、より多くの情報をここで見つけました https://qiita.com/Annoske/items/11bc6be57266d2c0dbe6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .