reactでメール送信を実装

はじめに

reactでメール送信を実装した忘備録です。

##フロントエンドの準備

ターミナル

npm install axios

##EmailForm.jsを作成

EmailForm.js

import axios from "axios";
import React, { useState } from "react";
import "./EmailForm.css";

const EmailForm = () => {
  const [to, setTo] = useState("");
  const [subject, setSubject] = useState("");
  const [text, setText] = useState("");
  const [responseMessage, setResponseMessage] = useState("");
  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post("http://localhost:5000/send-email", {
        to,
        subject,
        text,
      });
      setResponseMessage(response.data.message);
    } catch (error) {
      console.error("リクエストエラー:", error); // エラーのログ出力
      setResponseMessage("メール送信に失敗しました");
    }
  };

  return (
    <div>
      <h1>メール送信フォーム</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="to">宛先:</label>
          <input
            type="email"
            id="to"
            value={to}
            onChange={(e) => setTo(e.target.value)}
            required
          />
        </div>
        <div>
          <label htmlFor="subject">件名:</label>
          <input
            type="text"
            id="subject"
            value={subject}
            onChange={(e) => setSubject(e.target.value)}
            required
          />
        </div>
        <div>
          <label htmlFor="text">本文:</label>
          <textarea
            id="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
            required
          />
        </div>
        <button type="submit">送信</button>
      </form>
      {responseMessage && <p>{responseMessage}</p>}
    </div>
  );
};

export default EmailForm;

EmailForm.css

/* EmailForm.css */

div {
  margin-bottom: 1rem;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

form {
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

input,
textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

p {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-top: 1rem;
}

バックエンドの作成し

モジュールをインストール

npm install dotenv
npm install express
npm install nodemailer

.envを一番上の階層に作成

メールアドレスとパスワードを設定

EMAIL_USER=mats*******@gmail.com
EMAIL_PASS=sed*****

server.jsを作成

server.js

const express = require("express");
const nodemailer = require("nodemailer");
const cors = require("cors");
require("dotenv").config();

const app = express();
const PORT = process.env.PORT || 5000;

// ミドルウェアの設定
app.use(express.json());
app.use(cors());

// メール送信のためのトランスポート設定
const transporter = nodemailer.createTransport({
  service: "gmail",
  auth: {
    user: process.env.EMAIL_USER,
    pass: process.env.EMAIL_PASS,
  },
});

// メール送信エンドポイント
app.post("/send-email", (req, res) => {
  const { to, subject, text } = req.body;

  // 受信者が指定されていない場合はエラーレスポンスを返す
  if (!to) {
    return res
      .status(400)
      .json({ message: "受信者のメールアドレスが必要です" });
  }

  // メールオプションをリクエストから取得した値に設定
  const mailOptions = {
    from: process.env.EMAIL_USER,
    to: to, // クライアントからの宛先
    subject: subject || "No Subject", // クライアントからの件名、指定がない場合は "No Subject"
    text: text || "No Content", // クライアントからの本文、指定がない場合は "No Content"
  };

  // メール送信
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error("メール送信エラー:", error);
      return res
        .status(500)
        .json({ message: "メール送信に失敗しました", error: error.toString() });
    }
    res.status(200).json({ message: "メールが送信されました", info });
  });
});

// サーバーの起動
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

サーバーを起動

ターミナル

node server.js

フロントエンドを起動

ターミナル

npm start