【React】nodemailerでメール送信機能を実装する｜ポートフォリオサイトの作り方
開発環境
- 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」をインストールします。
1npm install express nodemailer axios cors
この4つのライブラリやフレームワークを組み合わせることにより、サーバーサイド側でメール送信を行える仕組みを作っていきます。 nodemailerの公式サイト：https://nodemailer.com/ axiosの公式サイト：https://axios-http.com/ja/ Express.jsの公式サイト：https://expressjs.com/ja/
サーバーサイドでメール送信機能を実装する
次にサーバーサイドでメール送信機能を実装していきます。
1// server.js 2const express = require('express'); 3const cors = require('cors'); 4const nodemailer = require('nodemailer'); 5const port = 3001; 6 7const app = express(); 8app.use(cors()); 9app.use(express.json()); 10 11app.post('/send-mail', async(req, res) => { 12 // メール送信の処理を記述する 13 const { email, message } = req.body; 14 // メール送信の設定 15 const transporter = nodemailer.createTransport({ 16 service: 'Gmail', 17 auth: { 18 user: 'メールアドレス', // ユーザー名 19 pass: 'アプリパスワード', // 2段階認証を行い、アプリパスワードする 20 }, 21 }); 22 23 const SendMailOptions = { 24 fron: 'メールアドレス', //送信元のメールアドレス 25 to: email, // 送信先のメールアドレス 26 subject: 'お問い合わせありがとうございます。', // 件名 27 text: message, // メール本文 28 } 29 30 const ReceiveMailOptions = { 31 fron: 'メールアドレス', //送信元のメールアドレス 32 to: 'メールアドレス', // 送信先のメールアドレス 33 subject: 'ホームページからのお問い合わせ', // 件名 34 text: `Email: ${email}\n\n本文: ${message}`, // メール本文 35 } 36 37 try { 38 await transporter.sendMail(SendMailOptions); 39 await transporter.sendMail(ReceiveMailOptions); 40 res.status(200).json({ message: 'メールが送信されました。'}); 41 } catch(error) { 42 console.log(error); 43 res.status(500).json({ message: 'メールの送信に失敗しました。'}); 44 } 45 46}) 47 48app.listen(port, () => { 49 console.log(`サーバがポート ${port} で起動しました。`) 50});
上記は「/send-mail」のリクエストされた場合にポート番号「3001」で処理を実行する形になっています。 今回は一番利用率が高いであろう「Gmail」で実装していますが、「メールアドレス」と「アプリパスワード」はご自身のアカウントに差し替えてください。 「SendMailOptions」はユーザーに送信する内容、「ReceiveMailOptions」は運営側に通知する内容になっています。 ここまでの処理ができていれば、下記のコマンドでサーバーサイドが立ち上がるかを確認してみてください。
1node server.js
「サーバがポート 3001 で起動しました。」と表示が出ていれば実装は完了です。
お問い合わせフォームの処理を修正する
最後にお問い合わせフォームの処理を修正していきます。
1// src/components/ContactForm.tsx 2 3import CircularProgress from "@mui/material/CircularProgress"; 4+ import axios from "axios"; 5 6const ContactForm: React.FC = () => { 7 const [email, setEmail] = useState(''); 8 const [message, setMessage] = useState(''); 9 const [emailSent, setEmailSent] = useState(false); 10 const [isSending, setIsSending] = useState(false); 11 12 const handleEmailchange = (event: React.ChangeEvent<HTMLInputElement>) => { 13 setEmail(event.target.value); 14 }; 15 16 const handleMessagechange = (event: React.ChangeEvent<HTMLInputElement>) => { 17 setMessage(event.target.value); 18 }; 19 20 const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => { 21 event.preventDefault(); 22 23 try { 24 setIsSending(true); 25 // 送信する処理 26+ await axios.post('http://localhost:3001/send-mail', { 27+ email: email, 28+ message: message, 29+ }) 30 console.log("メールが送信されました。") 31 // メール送信が終わったあと 32 setEmailSent(true); 33 } catch (error) { 34 console.log(error); 35 } finally { 36 setIsSending(false); 37 }; 38 console.log('送信されたメール：', email) 39 console.log('送信されたメッセージ：', message) 40 };
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」などを利用すればサーバーサイドの構築は不要になります。 是非、メール送信をするための仕組みをどのようにするべきか、ご参考にしていただければと思います。