React Web アプリケーションからメールを送信する

Oluwafisayo Oluwatayo 2023年6月21日

React React Email

EmailJS API を使用してメールアプリを作成する
Expressjs と Mailgun でメールを送信する
まとめ

理想的には、React はアプリのユーザーインターフェイスを構築するためのフロントエンドフレームワークです。 React の柔軟性と依存関係のインストールの容易さにより、React を使用して、フロントエンドとバックエンドの両方を持つ完全なアプリケーションを構築できます。

これは、サーバー間でデータを交換する必要がある電子メールアプリのアプリケーションを構築する場合にも当てはまりますが、React を使用して電子メールアプリを構築するにはどうすればよいでしょうか?

EmailJS API を使用してメールアプリを作成する

EmailJS は、ユーザーが React フレームワーク内でメールアプリを作成できるようにする依存関係の 1つです。依存関係のおかげで、アプリがサーバー側を処理するため、アプリのバックエンドを構築する必要はありません。正しいコードを入力するだけです。

まず、emailjs.com にアクセスしてアカウントを作成します。アカウントを確認したら、メールサービスを設定します。

Web サイトの左側のサイドバーで、[Email Services] をクリックし、リストから [Gmail] を選択します。ポップアップが表示されます。 [アカウントを接続] をクリックし、サービスに接続するメールを選択してから、[サービスを追加] を選択してメールサービスを作成します。

これが成功したら、サービス ID と、サービスに接続した電子メールに送信されたテスト電子メールを取得する必要があります。

次に、左側のサイドバーで [メールテンプレート] を選択し、[新しいテンプレートを作成] をクリックしてメールテンプレートを作成します。満足のいく結果が得られたら、[保存] をクリックします。

テンプレート ID が作成されます。これはコード内で必要になります。

次に、React プロジェクトフォルダーの作成に進みます。これが完了したら、プロジェクトフォルダーに移動し、以下を使用して EmailJS 依存関係をインストールします。

npm install emailjs-com

ここで、依存関係を App.js ファイルにインポートしてから、次のようなコードを追加します。

コードスニペット - App.js:

import React from 'react';
import emailjs from 'emailjs-com';

export default function ContactUs() {

  function sendEmail(e) {
    e.preventDefault();

    emailjs.sendForm('service_j0q23dh', 'template_rhntbdy', e.target, 'ehCd9ARJUiDG1yjXT')
      .then((result) => {
        window.location.reload()
      }, (error) => {
        console.log(error.text);
      });
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <input type="hidden" name="contact_number" />
      <label>Name</label>
      <input type="text" name="from_name" />
      <label>Email</label>
      <input type="email" name="from_email" />
      <label>Subject</label>
      <input type="text" name="subject" />
      <label>Message</label>
      <textarea name="html_message" />
      <input type="submit" value="Send" />
    </form>
  );
}

emailjs.sendForm('YOUR_SERVICE_ID' 'YOUR_TEMPLATE_ID' target, 'YOUR_USER_ID') 内で、各要素を作成した要素に置き換えます。

メールが正常に送信された後、window.location.reload() 関数はページを更新し、別のタスクの準備をします。次に、メールページの作成に進みます。

onSubmit イベントハンドラを送信ボタンに割り当てます。クリックすると、メールが送信されます。

出力：

React Send Email With EmailJS

Expressjs と Mailgun でメールを送信する

今回は、フルスタックの React メール送信アプリを作成します。フロントエンドとバックエンドの両方があり、独自のサーバーからメールを送信します。

フロントエンドから始めるには、新しい React アプリを作成し、いくつかの依存関係をインストールします。 npm install axios で Axios をインストールします。これは、バックエンドに送信するリクエストを処理します。

次は、npm install react-toastify で Toastify をインストールします。この依存関係は、メールの送信に成功したときなどにポップアップするスタイリッシュな通知を作成するのに役立ちます。

App.js ファイル内で、以下に示すようにインストール済みの依存関係をインポートし、これらのコードを追加します。

コードスニペット - App.js:

import './App.css';
import { useState } from 'react';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import axios from 'axios';

function App() {
  const [email, setEmail] = useState('');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);

  const submitHandler = async (e) => {
    e.preventDefault();
    if (!email || !subject || !message) {
      return toast.error('Please fill email, subject and message');
    }
    try {
      setLoading(true);
      const { data } = await axios.post(`/api/email`, {
        email,
        subject,
        message,
      });
      setLoading(false);
      toast.success(data.message);
    } catch (err) {
      setLoading(false);
      toast.error(
        err.response && err.response.data.message
          ? err.response.data.message
          : err.message
      );
    }
  };
  return (
    <div className="App">
      <ToastContainer position="bottom-center" limit={1} />
      <header className="App-header">
        <form onSubmit={submitHandler}>
          <h1>Send Email</h1>
          <div>
            <label htmlFor="email">Email</label>
            <input
              onChange={(e) => setEmail(e.target.value)}
              type="email"
            ></input>
          </div>
          <div>
            <label htmlFor="subject">Subject</label>
            <input
              id="subject"
              type="text"
              onChange={(e) => setSubject(e.target.value)}
            ></input>
          </div>
          <div>
            <label htmlFor="message">Message</label>
            <textarea
              id="message"
              onChange={(e) => setMessage(e.target.value)}
            ></textarea>
          </div>
          <div>
            <label></label>
            <button disabled={loading} type="submit">
              {loading ? 'Sending...' : 'Submit'}
            </button>
          </div>
        </form>
      </header>
    </div>
  );
}

export default App;

ページ上の要素の状態が変化するため、各コンポーネントを useState 関数に割り当ててから、各フィールド内に入力されるデータを処理するように Axios を設定します。

これは submitHandler コンポーネント内で行われます。 Toastify は通知をチェックし、適切に中継します。

次に、メールアプリのフォームパーツを作成します。送信ボタンは submitHandler 関数に割り当てられ、onSubmit イベントハンドラーのおかげで、送信ボタンがクリックされるとトリガーされます。

ページを美しくするには、次のように、このスタイルのスニペットを App.css ファイル内に含めます。

コードスニペット - App.css:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

form > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem;
}
form > div > label {
  margin: 1rem;
}
form > div > input,
form > div > textarea {
  padding: 0.5rem;
  min-width: 20rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

では、バックエンドに行きましょう。プロジェクトフォルダーの外に新しいフォルダーを作成し、backend という名前を付けます。次に、ターミナル内でこのフォルダーをナビゲートし、npm init -yと入力してノードを開始します。

次に、.gitignore ファイルを見つけて開きます。プロジェクトフォルダーのpackage.jsonファイルのすぐ上、srcフォルダーのすぐ下にあります。

node_modules の後ろにある / を削除します。これにより、backend フォルダー内の node-modules がアクティブになります。

それでも、プロジェクトフォルダーで、package.json ファイルを開きます。 name 入力の後、次の行にこれを追加します: "proxy": "http://localhost:4000/",; これは、バックエンドが実行されるプロキシです。

これらの依存関係を次のように同時にインストールします。

npm install dotenv express mailgun-js

dotenv は、プライベート API キーなど、コード内で使用する重要なデータを保護するのに役立ちます。 express はバックエンドからのサーバー接続を処理し、mailgun はメールアプリを提供するために必要な API キーを提供します。

次に、server.js と .env の 2つのファイルを作成します。 server.js ファイル内に、次のコードを記述します。

コードスニペット - server.js:

const express = require('express');
const dotenv = require('dotenv');
const mg = require('mailgun-js');

dotenv.config();

const mailgun = () =>
  mg({
    apiKey: process.env.MAILGUN_API_KEY,
    domain: process.env.MAILGUN_DOMIAN,
  });

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post('/api/email', (req, res) => {
  const { email, subject, message } = req.body;
  mailgun()
    .messages()
    .send(
      {
        from: 'John Doe <john@mg.yourdomain.com>',
        to: `${email}`,
        subject: `${subject}`,
        html: `<p>${message}</p>`,
      },
      (error, body) => {
        if (error) {
          console.log(error);
          res.status(500).send({ message: 'Error in sending email' });
        } else {
          console.log(body);
          res.send({ message: 'Email sent successfully' });
        }
      }
    );
});

const port = process.env.PORT || 4000;
app.listen(port, () => {
  console.log(`serve at http://localhost:${port}`);
});

ダウンロードした依存関係をインポートし、コードを作成して使用します。 mailgun.com に登録するときに取得する API とドメインキーは、次のように .env ファイル内に記述されています。

コードスニペット - .env:

MAILGUN_DOMIAN=sandbox540579ee3e724d14a5d72e9d087111a6.mailgun.org
MAILGUN_API_KEY=68fb630dbe57d3ba42d3a13774878d62-1b8ced53-29cac61a

それらを server.js ファイルにインポートします。次に、電子メールの要求と応答、およびサーバーを実行するポートを設定します。

.env ファイル内のキーを取得するには、mailgun.com に進み、登録します。次に、左側のサイドバーの [送信] に進み、[ドメイン] をクリックすると、ドメインキーである sandboxXXXXmailgun.org が表示されます。

上記の .env ファイルに表示されているようにコピーして貼り付け、ドメインキーをクリックします。右端に API キーが表示されます。プライベート API キーを明らかにし、それをコピーして .env ファイルに貼り付けます。

引き続きドメインページの右端に [Authorized Recipients] が表示され、送信するメールを入力します。そのメールに移動して、mailgun プロファイルからメールを受信することを確認します。

次に、ドメインページに戻り、更新して、受信者の電子メールが確認されていることを確認します。

ターミナルに戻り、プロジェクトフォルダーに進み、npm startと入力してアプリを起動します。別のターミナルタブ、cd をバックエンドフォルダーに開き、node server.js と入力してバックエンドフォルダーをキックスタートします。

アプリに移動してメールを送信します。

出力：

Expressjs と Mailgun を使用した React メール送信

まとめ

これまでのところ、React フレームワークを使用してほぼすべてのアプリを作成できます。これは、複数のコンポーネント、API、および依存関係をまとめて、軽量で柔軟性がありながら非常に効果的で効率的な Web アプリケーションを作成できる柔軟性があるためです。

著者： Oluwafisayo Oluwatayo

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

EmailJS API を使用してメール アプリを作成する

Expressjs と Mailgun でメールを送信する

まとめ

EmailJS API を使用してメールアプリを作成する