📧
【React】React Hook Form & EmailJSでお問い合わせフォーム実装

2024/11/24に公開
React
React Hook Form
emailjs
tech
前回の記事の引き続きです。

今回は、React Hook Formを活用して作成した入力フォームに、送信ボタンをクリックすると指定したメールアドレスにフォームの内容をメール送信できる機能を追加しました。

この機能を追加するにあたって利用したのはEmailJSというツールです。本記事ではこのEmailJSの設定手順についてまとめたいと思います。
また、記事の最後では、問い合わせフォームに関連するセキュリティ懸念について、セキュリティ未熟者の筆者なりに調べた内容もまとめています。お読みいただけると嬉しいです。

 EmailJSとはEmailJSは、サーバーサイドのコードを必要とせず、クライアントサイドから直接メールを送信できる便利なツールです。特に静的サイトや小規模なアプリケーションに適しており、他のツール（例: SendGridやMailgun）と比べて、初期設定が非常に簡単で、無料プランでも手軽に試せる点が魅力です。

EmailJSではあらかじめメール送信先やメールテンプレートを設定しておき、React側のフォームSubmit時のコールバック関数としてトリガーすることで、簡単にメールを送信できます。

https://www.emailjs.com/

EmailJSには複数の料金プランが用意されています。無料プランの主な制限は以下の通りです。
1ヶ月あたり200リクエストまで
登録可能なメールテンプレートは2つまで
利用履歴のダッシュボード表示は過去7日間分まで

など制約はありますが、個人開発で利用する分には無料プランでも十分問題ないと思います。

 EmailJSの設定はじめに、EmailJSのユーザー登録を行います。

「Sign up」画面で必要事項を入力すると、登録したメールアドレスに認証確認メールが送信されます。認証後サインインすると以下のようなダッシュボード画面に移ります。

なお、EmailJSの機能でメールを受信するメールアドレスは後の手順で設定できるので、ここで問い合わせフォームの受信者として登録するメールアドレスと同じにしておく必要はありません。


 1. Email Serviceの設定まずは、EmailJSと連携するメールサービスを登録します。「Email Services」の画面から、「Add New Service」をクリックします。

Gmailの他、Outlookなどのメールクライアントを受信先として設定することができます。今回はGmailを利用します。Gmailを選択すると、以下のような入力画面が表示されます。

「Name」には自分がわかる名前を入力します。「ServiceID」は自動発番されますが、自身で任意のものを設定することもできます。

「Connect Account」でアカウントの認証を済ませたら「Create Service」をクリックします。

そうすると以下のように、サービスが登録されます。



ここに表示されている「Service ID」は後ほどReact側で使用します。

 2. Email Templateの作成次にサイドメニューの「Email Templates」をクリックし、「Create New Template」を選択します。以下のような画面が表示されるので、「Content」タブから、入力フォームから入力された内容を元に生成されるお問い合わせメールの雛形を作成します。



「Subject」と「Content」の入力エリアのところにある{{ }}で囲まれた部分に入力フォームから受け取った入力値が反映されます。
ここで、前回作成した入力フォームを確認しておきます。



このフォームのうち、「お名前」、「フリガナ」、「メールアドレス」、「お問合せ内容」の各フィールドに入力された値をそれぞれメールの本文に反映したいので、EmailJS側で受け入れるパラメータ名を以下のように{{ }}で囲みます。



こうすることで、React側からEmailJS側にリクエストを送る際、name、furigana、email、contentというパラメータ名にReact側の値を割り当てれば、メール本文にその内容を反映できるようになります。
テンプレートを作成後、Saveボタンをクリックするとダッシュボードの「Email Templates」に先ほど作成したテンプレートが追加されているのが確認できます。



ここで表示されている「Template ID」は後ほどReact側で使用します。

 3. APIキーを確認するサイドメニューの「Account」からAPIキーを確認します。



今回はこのうち「Public Key」を使用します。
以上がEmailJS側の設定となります。

ここまでの設定の中で確認できた、以下の3つの情報が以降の設定で必要になりますので、整理しておきましょう。
Service ID
Template ID

Public Key

これでEmailJSの設定は完了です。次にReact側での設定を進めていきます。

 ReactにEmailJSを導入するここからはReact側からEmailJSが利用できるよう設定していきます。

導入手順や詳細設定にあたっては以下ドキュメントも合わせてご確認ください。

https://www.emailjs.com/docs/sdk/installation/

 1.必要なパッケージをインストールするまずは、必要パッケージをインストールするために、以下コマンドを実行します。
npm install --save @emailjs/browser

 2.環境変数を設定する先ほど確認できたService ID、Template ID、Public Keyの3つを環境変数として.envファイルに記述します。（この部分はそれぞれのケースに適した認証情報管理方法に沿ってご対応ください）
REACT_APP_EMAIL_API_KEY=//確認したPublic key//
REACT_APP_EMAIL_SERVICE_ID=//確認したService ID//
REACT_APP_EMAIL_TEMPLATE_ID=//確認したTemplate ID//

 3.フォーム送信時のコールバック関数を実装する前回React Hook Formを使って実装した入力フォームのonSubmit時のコールバック関数を実装します。

現在はconsole.log(data)でフォームの各フィールド入力値をdataオブジェクトとして出力するのみでした。ちなみに、以下にフォーム入力例とそれに対応するdataオブジェクトの中身を示しておきます。
  const onsubmit = async (data: InputTypes) => {
    console.log(data)
  };
フォーム入力例とdata出力内容

これを踏まえて、フォームコンポーネントの内容を以下のように変更します。
import { init, send } from '@emailjs/browser';

// ...

const TestForm = () => {
	const { register, handleSubmit, reset, formState: { errors } } = useForm<InputTypes>();

  const onsubmit = async (data: InputTypes) => {
    // 環境変数から必要なEmailJSのキーを取得
    const userID = process.env.REACT_APP_EMAIL_API_KEY
    const serviceID = process.env.REACT_APP_EMAIL_SERVICE_ID
    const templateID = process.env.REACT_APP_EMAIL_TEMPLATE_ID

    if (userID && serviceID && templateID) {
      // EmailJSを初期化
      init(userID)

      // EmailJSに渡すパラメータを作成
      const params = {
        name: data.name,
        furigana: data.furigana,
        email: data.email,
        content: data.content
      }

      try {
        // メール送信実行
        await send(serviceID, templateID, params, userID)
　　　　　// 送信に成功すればダイアログ表示と、フォーム入力内容をリセットする
        alert('この度はお問い合わせ頂き、ありがとうございます。\nお問い合わせを受け付けました。。')
        reset()
      } catch (error) {
　　　　　// 失敗した場合のダイアログ表示
        alert('お問い合わせの受付に失敗しました。\n大変恐れ入りますが、しばらく時間をおいてから再度お試しください。')
      }
    }
  }
  
  // ..,
}
関数の構成としては、以下の通りとなります。
@emailjs/browserからinit関数と、send関数をインポートします。
init関数はEmailJSのサービスを初期化するための関数で、引数にEmailJSのPublic APIキー（userID）を設定し、EmailJS APIと通信する準備を行います。

今回は環境変数からuserID, serviceID, templateIDがそれぞれ適切に取得できた場合に初期化を行うようにしています。
send関数はEmailJSサービスを使ってメールを送信する関数です。引数にサービスID、テンプレートID、テンプレートパラメータ、オプションを指定して呼び出します。

今回はEmailJSのメールテンプレート側で{{name}}, {{furigana}, {{email}}, {{content}}を用意したのでparamsのプロパティ名はそれぞれname, furigana, email, contentとします。
そしてそれぞれに対応する値としては、React Hook Formのdataオブジェクトを利用します。

先ほど確認したdataオブジェクトから、各フィールドに対応する値を抜き出し、それぞれのプロパティに対応させています。
send関数の実行結果に応じてtry/catchでそれぞれの実行結果に応じた処理を実装しています。

処理が成功し無事にメールが送られた場合はその旨を伝えるダイアログ表示と、フォームに入力された内容をクリアするためのreset関数を呼び出しています。このreset関数はReact Hook Formから提供されるもので、useFormから取り出して利用しています。

なお、エラー時は単純にダイアログを表示するのみとしています。
これで実装は完了となります。

以下のフォームから実際にメール送信を試してみます。

すると、設定した宛先にフワちゃんからメールが届きました！なんか怖い！

うまく受信できない場合は以下の２点で切り分けて考えると良さそうです。
フォームの送信ボタンをクリックしても何もおこらない

if節のuserID && serviceID && templateIDの条件を満たしていないと思われるので、Public KeyやService IDなどが環境変数などから適切に渡されているかを確認する。

catch節に流れる(404エラー)

パラメータのプロパティ名がEmailJS側で設定したものと一致しているかどうかを確認する。
以上が、React Hook FormとEmailJSを使って、フロントエンド実装のみでお問い合わせフォームを実装する手順となります。

これでとりあえず動く状態にはなりましたが、実装中にどうしてもセキュリティ面はどうなっているのだろうか…と気になったので、次回はWebサイト上にお問い合わせフォームを設置する上で懸案すべきセキュリティ事項についてまとめたいと思います。

お読みいただきありがとうございました。ではまた。
EmailJSとは

EmailJSの設定

1. Email Serviceの設定

2. Email Templateの作成

3. APIキーを確認する

ReactにEmailJSを導入する

1.必要なパッケージをインストールする

2.環境変数を設定する

3.フォーム送信時のコールバック関数を実装する

Discussion
