【React】nodemailerでメール送信機能を実装する｜ポートフォリオサイトの作り方

動画で解説を見る

1 開発環境
2 Reactでnodemailerを使ったメール送信の機能を実装する手順
3 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:v18.14.0
npm:9.3.1
react:18.2.0
react-dom:18.2.0
react-router-dom:6.8.2
typescript:4.9.5
mui:5.11.10
mui/icons-material:5.11.11
chart.js:4.4.0
react-chartjs-2:5.2.0
axios:1.5.0
cors:2.8.5
express:4.18.2
nodemailer:6.9.5

Reactでnodemailerを使ったメール送信の機能を実装する手順

Reactでnodemailerを使ったメール送信の機能を実装する手順について解説します。

nodemailerをインストールする

まずはnodemailerをインストールします。

そのほかにNode.jsのWebアプリケーションフレームワークである「Express.js」、HTTP通信を簡単に行えるJavaScriptのライブラリ「axios」、異なるドメイン内のリソースと通信するために「cors」をインストールします。

npm install express nodemailer axios cors

1	npm install express nodemailer axios cors

この4つのライブラリやフレームワークを組み合わせることにより、サーバーサイド側でメール送信を行える仕組みを作っていきます。

nodemailerの公式サイト：https://nodemailer.com/
axiosの公式サイト：https://axios-http.com/ja/
Express.jsの公式サイト：https://expressjs.com/ja/

サーバーサイドでメール送信機能を実装する

次にサーバーサイドでメール送信機能を実装していきます。

const express = require('express');
const cors = require('cors');
const nodemailer = require('nodemailer');
const port = 3001;

const app = express();
app.use(cors());
app.use(express.json());

app.post('/send-mail', async(req, res) => {
    // メール送信の処理を記述する
    const { email, message } = req.body;
    // メール送信の設定
    const transporter = nodemailer.createTransport({
        service: 'Gmail',
        auth: {
            user: 'メールアドレス', // ユーザー名
            pass: 'アプリパスワード', // 2段階認証を行い、アプリパスワードする
        },
    });

    const SendMailOptions = {
        fron: 'メールアドレス', //送信元のメールアドレス
        to: email, // 送信先のメールアドレス
        subject: 'お問い合わせありがとうございます。', // 件名
        text: message, // メール本文
    }

    const ReceiveMailOptions = {
        fron: 'メールアドレス', //送信元のメールアドレス
        to: 'メールアドレス', // 送信先のメールアドレス
        subject: 'ホームページからのお問い合わせ', // 件名
        text: `Email: ${email}\n\n本文: ${message}`, // メール本文
    }

    try {
        await transporter.sendMail(SendMailOptions);
        await transporter.sendMail(ReceiveMailOptions);
        res.status(200).json({ message: 'メールが送信されました。'});
    } catch(error) {
        console.log(error);
        res.status(500).json({ message: 'メールの送信に失敗しました。'});
    }

})

app.listen(port, () => {
    console.log(`サーバがポート ${port} で起動しました。`)
});

const express = require('express');

const cors = require('cors');

const nodemailer = require('nodemailer');

const port = 3001;

const app = express();

app.use(cors());

app.use(express.json());

app.post('/send-mail', async(req, res) => {

// メール送信の処理を記述する

const { email, message } = req.body;

// メール送信の設定

const transporter = nodemailer.createTransport({

service: 'Gmail',

auth: {

user: 'メールアドレス', // ユーザー名

pass: 'アプリパスワード', // 2段階認証を行い、アプリパスワードする

});

const SendMailOptions = {

fron: 'メールアドレス', //送信元のメールアドレス

to: email, // 送信先のメールアドレス

subject: 'お問い合わせありがとうございます。', // 件名

text: message, // メール本文

}

const ReceiveMailOptions = {

fron: 'メールアドレス', //送信元のメールアドレス

to: 'メールアドレス', // 送信先のメールアドレス

subject: 'ホームページからのお問い合わせ', // 件名

text: `Email: ${email}\n\n本文: ${message}`, // メール本文

}

try {

await transporter.sendMail(SendMailOptions);

await transporter.sendMail(ReceiveMailOptions);

res.status(200).json({ message: 'メールが送信されました。'});

} catch(error) {

console.log(error);

res.status(500).json({ message: 'メールの送信に失敗しました。'});

}

})

app.listen(port, () => {

console.log(`サーバがポート ${port} で起動しました。`)

});

上記は「/send-mail」のリクエストされた場合にポート番号「3001」で処理を実行する形になっています。

今回は一番利用率が高いであろう「Gmail」で実装していますが、「メールアドレス」と「アプリパスワード」はご自身のアカウントに差し替えてください。

「SendMailOptions」はユーザーに送信する内容、「ReceiveMailOptions」は運営側に通知する内容になっています。

ここまでの処理ができていれば、下記のコマンドでサーバーサイドが立ち上がるかを確認してみてください。

node server.js

1	node server.js

「サーバがポート 3001 で起動しました。」と表示が出ていれば実装は完了です。

お問い合わせフォームの処理を修正する

最後にお問い合わせフォームの処理を修正していきます。

import React, { useState } from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import CircularProgress from "@mui/material/CircularProgress";
import axios from "axios";

const ContactForm: React.FC = () => {
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');
    const [emailSent, setEmailSent] = useState(false);
    const [isSending, setIsSending] = useState(false);

    const handleEmailchange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setEmail(event.target.value);
    };

    const handleMessagechange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setMessage(event.target.value);
    };

    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        try {
            setIsSending(true);
            // 送信する処理
            await axios.post('http://localhost:3001/send-mail', {
                email: email,
                message: message,
            })
            console.log("メールが送信されました。")
            // メール送信が終わったあと
            setEmailSent(true);
        } catch (error) {
            console.log(error);
        } finally {
            setIsSending(false);
        };
        console.log('送信されたメール：', email)
        console.log('送信されたメッセージ：', message)
    };

    return(
        <>
            <Grid container rowSpacing={2} columnSpacing={2}>
                <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                    <Typography component="h2" variant="h2">
                        Contact
                    </Typography>
                </Grid>
                <Grid item xs={12} md={12}>
                    {emailSent ? (
                        <Box sx={{ width: "100%", textAlign: "center" }}>
                            メールが送信されました。
                        </Box>
                    ) : (
                        <Stack sx={{ width: "100%" }} component="form" spacing={2} onSubmit={handleSubmit} autoComplete="off">
                            <TextField required fullWidth label="メールアドレス" name="email" variant="outlined" value={email} onChange={handleEmailchange} />
                            <TextField required fullWidth multiline rows={4} label="お問い合わせ内容" name="message" variant="outlined" value={message} onChange={handleMessagechange} />
                            {isSending ? (
                                <Button variant="contained" color="primary">
                                    <CircularProgress />
                                </Button>
                            ) : (
                                <Button type="submit" variant="contained" color="primary">
                                    送信
                                </Button>
                            )}
                        </Stack>
                    )}
                </Grid>
            </Grid>
        </>
    );
};

export default ContactForm;

import CircularProgress from "@mui/material/CircularProgress";

import axios from "axios";

const ContactForm: React.FC = () => {

const [email, setEmail] = useState('');

const [message, setMessage] = useState('');

const [emailSent, setEmailSent] = useState(false);

const [isSending, setIsSending] = useState(false);

const handleEmailchange = (event: React.ChangeEvent<HTMLInputElement>) => {

setEmail(event.target.value);

};

const handleMessagechange = (event: React.ChangeEvent<HTMLInputElement>) => {

setMessage(event.target.value);

};

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {

event.preventDefault();

try {

setIsSending(true);

// 送信する処理

await axios.post('http://localhost:3001/send-mail', {

email: email,

message: message,

})

console.log("メールが送信されました。")

// メール送信が終わったあと

setEmailSent(true);

} catch (error) {

console.log(error);

} finally {

setIsSending(false);

};

console.log('送信されたメール：', email)

console.log('送信されたメッセージ：', message)

};

HTTP送信をするために「axios」をインポートしています。

また、お問い合わせフォームを作成するために使用していたsleep関数は不要なので削除しておきます。

31行目から34行目でaxiosライブラリを使用してHTTP リクエストメソッドは「POST」、リクエストURLは「http://localhost:3001/send-mail」、HTTPリクエストボディに「emailとmessage」を渡してサーバーサイド側にHTTPリクエストを送っています。

以上でメール送信の実装は完成です。

おわりに

Reactでnodemailerを使ったメール送信の機能を実装する手順を解説してきましたが、いかがだったでしょうか。

Reactはクライアントサイドのライブラリなのでメール送信はサーバーサイド側で操作する必要がありますが、メール送信用のAPIを提供している「SendGrid」「Mailgun」「Amazon SES」「EmailJS」などを利用すればサーバーサイドの構築は不要になります。

是非、メール送信をするための仕組みをどのようにするべきか、ご参考にしていただければと思います。