React でお問い合わせフォームを EmailJS と統合する

React は、フロントエンド アプリケーションのユーザー インターフェイスを構築するためのフロントエンド ライブラリです。また、React は再利用可能なコンポーネントを使用するため、アプリケーションを作成するときに役立ちます。

フロントエンド開発者にとって常に存在する問題は、バックエンド機能の記述や知識がなくても、フォーム データからの要求を処理する方法です。バックエンド サーバーの構築は面倒な場合があり、ロジックを記述する手間を軽減するために、このタスクにはサードパーティ サービスを使用する必要があります。

EmailJS とは何ですか?

EmailJS は、React、Vue、Angular などのクライアント側アプリケーションを使用してメールを送信するのに役立つサービスで、構成とセットアップ中にサーバーを使用しません。

このチュートリアルでは、フロントエンド ライブラリの React を EmailJS に接続して、ゼロから構築するストレスなしに Web サイトやモバイル アプリケーションでユーザー メッセージを受信する方法を学習します。

デモ

このリポジトリのスターター コードで有利なスタートを切るか、新しい React アプリケーションを作成してください。

前提条件

チュートリアルを進めるには、次のものが必要です。

• ノード >= 14.0.0 および npm >= 5.6がローカル マシンにインストールされている
• React の基本の理解
• サービスを試すためのEmailJS アカウント。

入門

新しいプロジェクトを構築する最初のステップは、構築を簡単にする開発ツールを用意することです。ターミナルで、次のコマンドを実行します。

npx create-react-app react-contact-form-with-emailjs

上記のコマンドは、react アプリのすべてのファイルとパッケージを含むcreate-react-appコマンドを使用してボイラープレートを作成します。

EmailJS のインストール

依存関係として、コマンドを実行して EmailJS SDK を React アプリにインストールします。

npm install @emailjs/browser

プロジェクトの実行

React アプリケーションを実行するには、プロジェクト ディレクトリに移動し、ホット リロード機能を備えた開発サーバーを実行します。これにより、開発中に加えられた変更でアプリケーションが更新されます。

次のコマンドを実行します。

 cd react-contact-form-with-emailjs npm start

アプリケーションはhttp://localhost:3000でアクセスできます。

お問い合わせフォームの作成

連絡先フォームを介してユーザーからの応答を収集して受信することは、訪問者の目には信頼できるものになるため、Web サイトに必要な重要な機能です。

それでは、お問い合わせフォームを作成しましょう。 App.js ファイルに、次のコードをコピーして貼り付けます。

 // src/App.js import React from 'react' import './App.css'; function App() { return ( <div> <h1>Contact Form</h1> <form className='cf'> <div className='half left cf'> <input type='text' placeholder='Name' name='user_name' /> <input type='email' placeholder='Email address' name='user_email' /> </div> <div className='half right cf'> <textarea name='message' type='text' placeholder='Message'></textarea> </div> <input type='submit' value='Submit' id='input-submit' /> </form> </div> ); } export default App;

お問い合わせフォームのスタイリング

アプリケーションのユーザー インターフェイスは、ユーザーにとって美しく見える必要があるため、 App.cssファイルに次のコードをコピーして貼り付けます。

 // src/App.css @import url(https://fonts.googleapis.com/css?family=Merriweather); html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; } form { max-width: 600px; text-align: center; margin: 20px auto; } input, textarea { border: 0; outline: 0; padding: 1em; border-radius: 8px; display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; resize: none; } #input-submit { color: white; background: #e74c3c; cursor: pointer; } #input-submit:hover { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2); } textarea { height: 126px; } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; }

すべてが正しく行われたページは次のようになります。

EmailJS のセットアップ

メッセージを送信する機能のないお問い合わせフォーム ページが完成したら、フォームの内容をメールで送信するサービスを設定しましょう。

メール サービスを追加する

このセクションでは、EmailJS とメール サーバーの統合について説明します。 EmailJS ダッシュボードで、[メール サービス] タブからGmailサービスを選択すると、 config serviceという新しいページが開きます。

次に、名前とサービス IDパラメーターを変更します。サービス IDは、後で連絡先フォームを初期化して EmailJS に接続する際に使用されます。 [アカウントを接続してサービスを作成] ボタンをクリックして、変更を確認してください。

メール テンプレートの作成

メール テンプレートは、ユーザーが Web サイトのクライアント側からメッセージを送信するときに、メールの件名、メールに含まれるコンテンツ、受信トレイの宛先を含める場合に不可欠です。

ダッシュボードで、[ Email Template] タブをクリックし、[ Create New Template ] をクリックします。

次に、 [設定] タブをクリックして、[名前] と [テンプレート ID ] を任意のものに変更する必要があります。次の図に示すように、テンプレート IDは後で使用されます。

[コンテンツ] タブに戻ると、波括弧内の値は、 message 、 user_name 、およびuser_emailなど、コンタクト フォームの<form>要素で定義されているものと同じ値を持つ必要がある動的変数です。

環境変数の作成

環境変数.envは、共有したくない公開鍵とその他の値を格納するファイルであり、あなただけに公開されます。

プロジェクト ディレクトリのルートで、ファイル.envを作成し、次を貼り付けます。

 // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY

公開鍵については、[ Account ] タブをクリックし、 public keyセクションに示されている値をコピーすることで見つけることができます。

EmailJS の初期化

React アプリケーションで、インストール済みパッケージ@emailjs/browserパッケージをインポートします。

以下をコピーして貼り付けます。

 // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( <div> // form element </div> ); } export default App;

フォーム送信の処理

useRefフックは、連絡先フォームの送信を処理します。

App.jsファイルのコードをコピーして更新します。

 // src/App.js import React, { useRef } from 'react'; // imports function App() { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs .sendForm( process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_PUBLIC_KEY ) .then( (result) => { alert('message sent successfully...'); console.log(result.text); }, (error) => { console.log(error.text); } ); }; return ( <div> <h1>Contact Form</h1> <form className='cf' ref={form} onSubmit={sendEmail}> // div container with input element </form> </div> ); } export default App;

上記のコードでは、次のことが起こります。

• useRefフックがインポートされ、form という変数で初期化されます。
• フックuseRefは参照として使用され、 <form>要素に割り当てられます
• sendEmail関数で、フォームにはページの更新を停止するpreventDefaultメソッドがあります。
• それでも、 sendEmail関数では、 sendForm関数が呼び出され、 service ID 、 template ID 、 refのform .currentプロパティ、およびpublic keyで初期化されます。
• .then()メソッドで発生する成功ケースと失敗ケースのコールバック関数

では、このプロジェクトの結果を見てみましょう。

確認メール

結論

アプリケーションのクライアント側でデータ リクエストを処理するために EmailJS を使用することは、連絡フォームからの応答を受け取る優れた方法です。 EmailJS は探索する他の機能を提供し、サーバーを構築したり、バックエンド開発の知識がなくても、堅牢なエクスペリエンスを提供します。ボンネットの下ですべてを行います。

以前に EmailJS を使用したことがありますか?上記の私のアプローチについてどう思いますか？以下のコメントでお知らせください！