先生と生徒の会話形式で理解しよう

生徒

「Reactでサーバーにデータを送るにはどうすればいいんですか？」

先生

「そのときに使うのがFetch APIのPOSTリクエストです。」

生徒

「POSTリクエストって何ですか？書き方も教えてほしいです！」

先生

「では、ReactでFetch APIを使ってPOSTリクエストを送る方法を、やさしく解説していきましょう！」

1. POSTリクエストとは？

POST（ポスト）リクエストとは、アプリやWebサイトからサーバーへ「データを届ける」ための基本的な通信方法です。たとえば、会員登録フォームで入力した名前やメールアドレスを送信したり、日記アプリで新しい記事を登録したりするときに、このPOSTリクエストが使われます。画面から入力した情報を、サーバー側のデータベースへ安全に届ける役割を持っている、とイメージするとわかりやすいです。

日常のイメージにたとえると、書いた手紙を封筒に入れてポストへ投函するのとよく似ています。送りたい内容を紙に書いて封筒に入れ、宛先を書いてポストに入れると、郵便局を通じて相手に届きますよね。POSTリクエストも同じように、「送りたいデータをまとめて」「決められたルールにしたがって」「サーバーという相手に届ける」という流れで動きます。普段何気なく使っているお問い合わせフォームやログイン画面の裏側では、この仕組みが静かに働いています。

初心者向けのやさしいサンプル

ここでは、POST通信そのものではありませんが、「ボタンを押して何かを送るきっかけを作る」というイメージをつかむために、Reactのとても簡単なサンプルを見てみましょう。まずは「ユーザーがボタンを押すと、画面の表示が変わる」という体験をしておくと、後でFetch APIでPOSTリクエストを書くときにも流れが理解しやすくなります。


import React, { useState } from "react";

function Sample() {
  const [msg, setMsg] = useState("こんにちは！");

  return (
    <div>
      <p>{msg}</p>
      <button onClick={() => setMsg("ボタンがクリックされました！")}>
        送信イメージ
      </button>
    </div>
  );
}

export default Sample;

（画面に「こんにちは！」と表示され、ボタンを押すと「ボタンがクリックされました！」に変わります）

この小さなコンポーネントでは、「ボタンを押す」というユーザーの行動をきっかけに、表示しているメッセージが変化しています。実際のPOSTリクエストでは、この「ボタンが押されたタイミング」でサーバーにデータを送ります。つまり、ユーザーの操作 → データを用意する → サーバーへ届ける、という一連の流れのスタート地点がこのようなボタンのクリックなのです。まずはこのイメージをしっかり持っておくと、次の章でReactとFetch APIを使って本格的にPOSTリクエストを書くときにも、自然な流れで理解できるようになります。

2. ReactでPOSTリクエストを送る基本構文

Reactでサーバーへデータを送るときに中心となるのがfetch関数です。fetch は「サーバーにお願いを送る役目」を持っており、POST リクエストではそのお願いに「データを一緒に届ける」という動きが加わります。まずは、その流れを少しずつイメージできるように、シンプルな例から見ていきましょう。技術的な言葉をなるべく減らし、動作がつかみやすい形で説明します。

初心者向けのわかりやすいサンプル

以下の小さなサンプルは、実際にサーバーへ送信はしていませんが、「送信ボタンを押したら処理が始まり、結果が表示される」というPOSTリクエストの基本となる流れを体験できるものです。まずはこの感覚をつかんでおくと、次に fetch を使った本格的なPOST通信を理解しやすくなります。


import React, { useState } from "react";

function SamplePost() {
  const [message, setMessage] = useState("こんにちは！");

  function handlePost() {
    // 本来はここで fetch を使ってサーバーにデータを送るイメージ
    setMessage("データを送信中…");
    setTimeout(() => {
      setMessage("送信が完了しました！");
    }, 800);
  }

  return (
    <div>
      <p>{message}</p>
      <button onClick={handlePost}>送信イメージ</button>
    </div>
  );
}

export default SamplePost;

（画面に「こんにちは！」と表示され、ボタンを押すと「データを送信中…」→「送信が完了しました！」に変わります）

このコンポーネントでは、ユーザーがボタンを押すことで「送信のきっかけ」が生まれ、その直後に画面のメッセージが変わる仕組みになっています。実際のPOSTリクエストでも、まずは「ユーザーの操作」が始まり、その後に fetch が呼ばれ、サーバーへデータが送信されます。つまり、POST の一連の流れを理解するためには、この「ボタン → 処理開始 → 結果表示」という基本の動きがとても大切です。この感覚が自然につかめると、次のステップで実際に fetch を使ってデータを送るときにもスムーズに理解できるようになります。

3. fetchの設定内容を理解しよう

POSTリクエストを正しく送るためには、fetch関数に「通信方法」や「送るデータの種類」などを細かく設定する必要があります。これらを理解しておくと、今後さらに複雑なデータ送信にも応用できるようになります。まずは、fetchに渡す基本の設定項目を整理してみましょう。

method: "POST" …… サーバーに「データを送ります」と伝える設定です。
headers …… サーバーに「どんな形式のデータを送るのか」を知らせます。
body …… 実際に送信するデータ本体です。文字列である必要があります。

特に headers と body は初心者がつまずきやすい部分で、「形式」「送る内容」をサーバーと正しく共有するために欠かせないポイントです。

初心者向けのミニサンプル

ここでは POST 通信そのものではありませんが、「fetch の設定を適用すると画面が変化する」というイメージをつかむための簡単なサンプルを紹介します。


function FetchImageSample() {
  const [text, setText] = useState("こんにちは！");

  function handleFetch() {
    // 実際にはここに fetch の設定を書いていくイメージ
    setText("設定を読み込み中…");
    setTimeout(() => setText("設定が適用されました！"), 900);
  }

  return (
    <div>
      <p>{text}</p>
      <button onClick={handleFetch}>設定を試す</button>
    </div>
  );
}

（画面に「こんにちは！」と表示され、ボタンを押すと「設定を読み込み中…」→「設定が適用されました！」に変わります）

fetch の設定は難しく見えますが、「通信方法」「データ形式」「送る内容」の3つを押さえるだけで理解が大きく進みます。ここをしっかり身につけておくことで、このあと学ぶ本格的なPOSTリクエストもスムーズに扱えるようになります。

4. JSON.stringifyとは？

ReactでPOSTリクエストを送る際、サーバーに届けたいデータはそのままでは送れません。通常、JavaScriptで扱うデータはオブジェクトという形ですが、サーバー側が受け取れるのは文字列です。そのため、データを文字列に変換する必要があり、この変換をしてくれるのがJSON.stringify()という関数です。

たとえば、名前や年齢といった情報を一つのオブジェクトとしてまとめ、それをサーバーに送りたい場合を考えてみましょう。文字列化せずにそのまま送ると、サーバーは内容を正しく理解できず、データが壊れてしまうことがあります。そこで、JSON.stringify()が「オブジェクト → JSON文字列」に安全に変換してくれる役割を果たします。


const obj = { name: "田中", age: 25 };
const str = JSON.stringify(obj);
// 結果: '{"name":"田中","age":25}'

変換されたJSON文字列は、ちょうど「封筒にきれいにまとめられた手紙」のようなものです。サーバーはこの形式であれば中身を正しく読み取り、処理を進めることができます。つまり、JSON.stringify()はPOST通信で欠かせない“準備作業”のような存在なのです。初心者の方はまず「データはそのままでは送れない」「文字列にして初めて届けられる」という考え方を押さえておくと、後の実装で迷いにくくなります。

5. 成功時と失敗時の処理を分ける

fetchでPOSTを送ったとき、成功した場合と失敗した場合で処理を分けておくと安心です。

.then()：成功したときの処理
.catch()：失敗したときの処理

ユーザーに結果を伝えるためにも、画面にメッセージを表示する仕組みを取り入れると親切です。

6. 入力フォームからデータを送信するには？

実際のアプリでは、テキスト入力欄やフォームから送信されるケースが多いです。以下は、フォームから名前をPOSTする例です。


import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = () => {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: name }),
    })
      .then((res) => res.json())
      .then((data) => setMessage("送信成功！名前：" + data.name))
      .catch((err) => setMessage("エラー：" + err));
  };

  return (
    <div>
      <h1>名前を送信する</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="名前を入力"
      />
      <button onClick={handleSubmit}>送信</button>
      <p>{message}</p>
    </div>
  );
}

export default App;

（画面に名前入力欄とボタンが表示され、名前を入力して送信すると「送信成功！名前：〇〇」と表示されます）

7. よくあるエラーと注意点

初心者がPOSTリクエストでつまずきやすいポイントをまとめます。

Content-Typeが間違っている："application/json"を忘れないように！
bodyが文字列になっていない：JSON.stringify()を忘れると送れません。
fetchのURLが間違っている：テストAPIを使うときは公式のURLを確認。
CORSエラー：本番APIでは、別ドメイン制限（CORS）が原因で通信できないことがあります。

特に最初の2つのミスはよくあるので、fetchを書くときは毎回チェックする癖をつけましょう。

まとめ

ReactでFetch APIを使ってPOSTリクエストを送信する流れを振り返ると、画面上の操作とサーバー側へのデータ送信がどのようにつながっているのかがよく見えてきます。POSTリクエストは、ユーザーが入力した情報を安全にサーバーへ渡し、新しいデータを保存する重要な役割を持っています。フォーム送信、認証情報の登録、メッセージ投稿、アプリの設定変更など、多くのアプリで欠かせない機能であり、その基本をしっかり理解することで、実用的なアプリケーション開発が可能になります。今回の記事で解説したように、fetch関数にmethod・headers・bodyを指定するだけで、Reactからサーバーへデータを送る仕組みが簡単に構築できます。特に、Content-Typeを指定することや、データをJSON.stringifyで文字列に変換するなど、送信の前に必要な手順を正しく踏むことが大切です。

また、POSTリクエストでは成功時と失敗時の処理を分けておくことで、ユーザーにわかりやすいフィードバックを返せます。結果が画面に素早く反映されることで、送信が正しく行われたかどうかが瞬時にわかり、操作性を向上させることにもつながります。ReactではuseStateを用いて状態管理を行うため、送信結果のメッセージを状態として保持し、画面に表示するという流れは自然でわかりやすい構成になります。POSTリクエストは、アプリの規模が大きくなるほど重要性が増し、正確なデータ送信と画面の安定した動作を支える基盤として機能します。そのため、今回学んだ基本構文やエラーの原因を知っておくことは、開発の成功に直結する大きなポイントと言えます。

入力フォームからサーバーへデータを送信する実例を通じて、「ユーザーが入力した値がどのようにAPIへ渡っていくのか」を理解できるようになりました。Reactではフォーム入力の状態をuseStateで保持し、その値をPOSTリクエストのbodyに入れるという仕組みが基本となります。この一連の流れを理解しておくことで、ユーザー登録フォーム、コメント投稿欄、検索機能、プロフィール編集画面など、さまざまな場面で応用できます。Reactの強みは、画面の状態と送信処理が自然に結びつく構造にあり、入力内容をリアルタイムに確認しながらデータ送信を行える柔軟さです。これにより、データ送信と状態管理の仕組みがとてもわかりやすくなり、エラーが起きてもすぐに原因を追いやすくなるというメリットがあります。

さらに、初心者がつまずきやすいエラーへの理解も重要です。Content-Typeやbodyの形式が正しくないとサーバーが情報を受け取れず、意図した動作になりません。また、CORSの仕組みによって、別ドメインへの通信が制限されるケースがあることも知っておく必要があります。こうしたエラーは最初こそ難しく感じますが、実際には原因が明確であり、一つずつ確認することで解決できます。POSTリクエストの学習は、単にコードを書くだけでなく、通信の仕組みを理解するきっかけにもなります。データがどのように送られているのか、どの部分で変換が必要なのかなどの理解を深めることで、より確実で安全なデータ送信ができるようになります。

POSTリクエストの復習サンプル

今回は、より実用的なサンプルとして「複数の入力項目をまとめて送信する例」を示します。


import React, { useState } from "react";

function FormPostExample() {
  const [form, setForm] = useState({ name: "", email: "" });
  const [response, setResponse] = useState("");

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = () => {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(form),
    })
      .then((res) => res.json())
      .then((data) => setResponse("送信成功！ID: " + data.id))
      .catch((err) => setResponse("送信エラー: " + err));
  };

  return (
    <div className="card p-3" style={{ margin: "10px" }}>
      <h2>ユーザー情報を送信する</h2>
      <input
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="名前"
      />
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="メールアドレス"
      />
      <button onClick={handleSubmit}>送信</button>
      <p>{response}</p>
    </div>
  );
}

export default FormPostExample;

このサンプルでは、フォームの値をオブジェクトとして管理し、spread構文で更新しながら、POSTリクエストのbodyにそのまま渡しています。複数のフィールドをまとめて扱う基本的な方法であり、規模の大きいフォームでも応用できる柔軟な考え方です。

先生と生徒の振り返り会話

生徒

「POSTリクエストって複雑だと思っていたけれど、実際は流れが分かれば意外とシンプルですね！」

先生

「そうなんです。method・headers・bodyの3つを押さえておけば、ほとんどのPOST通信は書けるようになりますよ。」

生徒

「実際にフォームから送信する例を見て、アプリでの使い方がイメージしやすくなりました！」

先生

「フォーム送信は実務でもよく使うので、今回の理解はとても役立つはずです。」

生徒

「エラーの原因も知っておくと安心ですね。特にContent-Typeを忘れないように意識します！」