2022年2月28日こんにちは、MSKです。今ポートフォリアサイトを作っているのですが、その中で問い合わせフォームを作ってメールを送信できるようにしたので、紹介します。スポンサーリンクEmailJS今回お問い合わせフォームに入力された情報をメールで投げる機能として使うのは「EmailJS」です。本来問い合わせフォームでメールを送るためにはメールサーバーを契約して、PHPやRuby、Pythonなどバックエンドの処理が必要になります。ポートフォリオサイトでのお問い合わせ処理にそのようなバックエンド処理を準備するのは面倒です。そこで、EmailJSを使います。EmailJSはメール送信を行えるWebサービスです。EmailJSを使うにはユーザー登録を行う必要があります。ユーザー名、メールアドレス、パスワードを入力して、登録します。Services登録が終わりマイページに遷移したら、送信用のメールサービスを設定します。今回はGmailを使うのですが、普段使っているアカウントではなく、EmailJS用に新規登録したアカウントを紐づけていきます。Servicesを選択します。Serviceをクリックします。使うサービスの選択画面になるので、Gmailを選択します。Accountをクリックします。IDは後で使うのでどこかにメモっておきます。Accountをクリックすると使用するGoogleのアカウントを聞かれるので、準備しておいて送信用アカウントを入力します。メール送信の権限などを聞かれるので許可を押して進みます。紐づけが終了すると前の画面に戻って、紐づいたGoogleアカウントが表示されます。Templates次にメールのテンプレートを作ります。Templatesを選択します。Templateをクリックします。次のような雛形が表示されるので、自分の好みの内容に書き変えます。{{}}で囲まれたものはReact側から埋め込むことができるパラメータです。ちなみに僕は次のように書き変えました。お問い合わせを受け付けました。:{{to_name}}様,お問い合わせありがとうございます。以下の内容で受付を完了しました。{{message}}このメールは送信専用となっております。返信をいただいてもご連絡できませんので、ご注意ください。保存して戻ると次のようにテンプレートが作成されています。IDは後で使用するのでメモっておきます。IDをメモっておきます。これで準備はOKです。Reactでメールを送信するReactからメールを送信してみます。EmailJS用のパッケージをインストールします。emiljs-comReactからEmailJSの機能を呼び出します。initというメソッドを呼び出して初期化します。ID)その後にsendメソッドを呼び出して、メールを送信します。ID、テンプレートを書くときにパラメータ({{}}でくくったもの)として設定したものをまとめたものが必要になります。send関数は非同期処理なので、送信後の処理をthenをつなげることで記述することができます。{送信後の処理});僕が作ったのは以下のようなプログラムです。Contactというコンポーネントとして送信フォームを作成しました。Contactテストで送信してみると設定したメールアドレスにメールが来ることが確認できました。IDなどは環境変数を使いました。Reactではプロジェクト直下に.envファイルを準備して記述するとprocess.env.(環境変数)という形でReact側から取得することができます。1つ注意なのは、Reactで環境変数を取得する場合REACT_ATT_から始めなければならないということです。これを知らなくて少し苦戦しました。最後にバックエンドやメールサーバーを用意しなくても簡単にメール送信の機能を使えるEmailJSを使ってみました。月200件までなら無料で使えますし、少し増えてきても1000件までなら4$で使えます。設定も簡単ですし、送信する部分の実装も容易です。最後までご覧頂き、ありがとうございます。「Reactで問い合わせ画面を作って、メールを送信できるようにした!」でした。MEMSK九州在住の組み込み系エンジニアです。2児の父親でもあります。数学やプログラミングが趣味です。最近RustとReact、結び目理論と曲面結び目理論にはまっています。MSKもちのき研究所C言語の学習におすすめの本3選!Reactでページ遷移をやってみた!組み込み系エンジニアMSKソフトウェア関連の技術が好きな30代男性です。最近は、Webアプリ開発にチャレンジ中。