🎄
ReactとMicroCMSでお問い合わせフォームの作成
ディレクトリ構成
my-app/
backend/
node_modules/
package-lock.json
package.json
.env
server.js
frontend/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
フロントエンドのセットアップ
まず、既存のmy-appプロジェクトにContactFormを作成します。
必要なライブラリのインストール
以下のコマンドを実行して、HTTPリクエスト用ライブラリ（axios）を追加します：
cd my-app
cd frontend
npm install axios
ディレクトリ構成の調整
プロジェクト内に新しいコンポーネントを追加するため、src/components/ContactForm.jsファイルを作成します。
mkdir src/components
touch src/components/ContactForm.js
ContactFormコンポーネントの実装
import React, { useState } from "react";
import axios from "axios";
const ContactForm = () => {
const [formData, setFormData] = useState({
name: "",
email: "",
message: "",
});
const [status, setStatus] = useState("");
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post(
process.env.REACT_APP_MICROCMS_ENDPOINT,
formData,
{
headers: {
"Content-Type": "application/json",
"X-API-KEY": process.env.REACT_APP_MICROCMS_API_KEY,
},
}
);
if (response.status === 200) {
setStatus("Success: Your message has been sent!");
setFormData({ name: "", email: "", message: "" });
}
} catch (error) {
console.error(error);
setStatus("Error: Something went wrong. Please try again.");
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
required
/>
</div>
<div>
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
required
/>
</div>
<div>
<label>Message:</label>
<textarea
name="message"
value={formData.message}
onChange={handleChange}
required
></textarea>
</div>
<button type="submit">Send</button>
{status && <p>{status}</p>}
</form>
);
};
export default ContactForm;
APIやURLは自身のMicroCMSから取得。
App.jsでコンポーネントを利用
src/App.jsでContactFormをインポートし、使用します
import React from "react";
import ContactForm from "./components/ContactForm";
function App() {
return (
<div className="App">
<h1>Contact Us</h1>
<ContactForm />
</div>
);
}
export default App;
MicroCMSのセットアップ
MicroCMSプロジェクトを作成
MicroCMSにアクセスしてアカウントを作成します。
新しいサービスを作成し、"contact"という名前のエンドポイントを作成します。
フィールドの設定
"name"（テキストフィールド）
"email"（テキストフィールド）
"message"（テキストエリア）
APIキーの確認
管理画面から「API設定」にアクセスし、APIキーを取得します。
APIエンドポイントの確認
MicroCMSの管理画面で、「エンドポイントURL」を確認します。
APIルールの設定
管理権限からAPIのルールを設定します。
今回使用するのはPOSTのみなので、「POST」にチェックを入れます。
バックエンドの構築
Node.jsとExpressのセットアップ
新しいディレクトリを作成してバックエンドをセットアップします。
mkdir backend
cd backend
npm init -y
npm install express body-parser axios cors dotenv
ディレクトリ構成は以下
backend/
server.js
.env
package.json
.envファイルの作成
.envファイルにMicroCMSのAPIキーとエンドポイントを記述します。
MICROCMS_API_KEY=YOUR_MICROCMS_API_KEY
MICROCMS_ENDPOINT=https://YOUR_MICROCMS_ENDPOINT/contact
バックエンドコードの作成
server.jsに以下を記述します。
require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const axios = require("axios");
const cors = require("cors");
const app = express();
const PORT = 5000;
app.use(cors());
app.use(bodyParser.json());
// Contact API
app.post("/api/contact", async (req, res) => {
const { name, email, message } = req.body;
try {
const response = await axios.post(
process.env.MICROCMS_ENDPOINT,
{ name, email, message },
{
headers: {
"Content-Type": "application/json",
"X-API-KEY": process.env.MICROCMS_API_KEY,
},
}
);
res.status(200).json({ message: "Message sent successfully!" });
} catch (error) {
console.error("Error sending data to MicroCMS:", error.message);
res.status(500).json({ message: "Failed to send message." });
}
});
app.listen(PORT, () => {
console.log(`Backend server is running on http://localhost:${PORT}`);
});
フロントエンドの変更
フロントエンドのエンドポイントを変更
ContactForm.jsのリクエスト先をバックエンドに変更します。
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post(
"http://localhost:5000/api/contact", // バックエンドのエンドポイント
formData
);
if (response.status === 200) {
setStatus("Success: Your message has been sent!");
setFormData({ name: "", email: "", message: "" });
}
} catch (error) {
console.error("Error sending data:", error.message);
setStatus("Error: Something went wrong. Please try again.");
}
};
ローカル環境での動作確認
バックエンドを起動:
cd backend
node server.js
フロントエンドを起動:
cd ../my-app
npm start
フォームを送信して、データがMicroCMSに保存されることを確認してください。
デプロイ
バックエンドのデプロイ
HerokuやRenderなどのプラットフォームを使用してバックエンドをデプロイします。
環境変数（MICROCMS_API_KEYとMICROCMS_ENDPOINT）をデプロイ時に設定してください。
フロントエンドのエンドポイント変更
バックエンドをデプロイしたURLに合わせて、フロントエンドのエンドポイントを変更します。
例:
const response = await axios.post(
"https://your-backend-url/api/contact",
formData
);
フロントエンドのデプロイ
VercelやNetlifyを使ってデプロイしてください。
Discussion