✉️

ReactフォームからAPIにデータを送信してみた

2025/05/10に公開

🌟 目標

フォームを作ってデータをサーバーに送ってみる

Reactでフォーム（名前とかメールアドレスとか）
Submitしたときにaxios.post()でAPIにデータを送る
Express側でapp.post('/api/submit', (req, res) => { ... })を書いて、データを受け取ってレスポンスを返す

ひとつめ：

ふたつめ：

1. Express（APIサーバー）側の準備

POST用のエンドポイントを作る

index.js（APIサーバー）に以下のコードを追記

index.js

app.post('/api/submit', (req, res) => {
  console.log('受け取ったデータ:', req.body);  // サーバー側でデータ確認

  res.json({
    message: `こんにちは、${req.body.name}さん！データを受け取りました😊`
  });
});

URL: http://localhost:3001/api/submit
リクエスト内容: { name: '入力した名前' }
レスポンス: {"message": "こんにちは、〇〇さん！データを受け取りました😊"}
が返る

2. React側の準備

App.tsxを編集する

App.tsx

import { useState } from 'react';
import axios from 'axios';

function App() {
  const [name, setName] = useState('');
  const [responseMessage, setResponseMessage] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();  // ページリロードを防ぐ

    axios.post('http://localhost:3001/api/submit', { name })
      .then((response) => {
        console.log('サーバーからのレスポンス:', response.data);
        setResponseMessage(response.data.message);
      })
      .catch((error) => {
        console.error('APIエラー:', error);
        setResponseMessage('エラーが発生しました。');
      });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>名前を送信してみよう</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="あなたの名前"
          required
        />
        <button type="submit">送信</button>
      </form>

      <div style={{ marginTop: '20px' }}>
        {responseMessage && <p>{responseMessage}</p>}
      </div>
    </div>
  );
}

export default App;

コード解説

🧩 部分	やっていること
`useState('')`	入力フォーム用の名前を保存する状態
`<form onSubmit={handleSubmit}>`	Submit時に`handleSubmit`が呼ばれる
`axios.post(...)`	`{ name: 入力値 }`をAPIに送信
`.then(...)`	サーバーからのメッセージを画面に表示
`.catch(...)`	エラー時の処理
`{responseMessage && <p>...`	レスポンスがあるときだけ結果を表示する

3. 動作確認

Reactアプリ（Vite）を起動 → npm run dev
APIサーバーも起動 → node index.js
Reactのフォームに適当な名前を入力して送信！

👇 期待される動き

入力した名前がAPIに送られる
サーバー側（ターミナル）に👇のようなログが出る
Reactアプリに👇のように表示される

🌟 目標

1. Express（APIサーバー）側の準備

2. React側の準備

3. 動作確認

Discussion