1. はじめに

React で外部 API との通信を学び始めるとき、
「サーバー側がまだ無いけど、リクエストの書き方を練習したい」
という場面がありますよね。

今回はそんなときに便利な JSONPlaceholder を使い、
axios で GET / POST を実行する React のハンズオンを行います。

この記事で学べること：

JSONPlaceholder の役割と使い方
axios を使った GET / POST の基本
React アプリから API を扱う流れ
データ取得処理の流れ（Mermaid 図解つき）

実際に動く最小構成のアプリを作ってみましょう。

2. JSONPlaceholderとは何か

JSONPlaceholder は、学習・検証用に使える「無料のモックAPIサービス」です。
アカウント登録なしで REST API にアクセスでき、投稿データ・コメント・ユーザーなどの
ダミーデータを返してくれます。

JSONPlaceholder の特徴

無料で利用できる
認証不要
GET / POST / PUT / PATCH / DELETE を試せる
データは「保存されない」ため何度でも試せる
React の学習教材で定番

データ取得の流れ（図解）

3. 今回のハンズオンで作るもの

React から GET と POST のリクエストを試す簡易アプリを作ります。

GET：投稿の一覧を API から取得して表示
POST：新しい投稿（ダミー）を送信し、一覧に追加

完成イメージの流れはこちらです。

4. プロジェクトの準備

Vite で React プロジェクトを作ります。（create-react-appでも可）

npm create vite@latest react-axios-sample -- --template react
cd react-axios-sample
npm install

axios を追加します。

npm install axios

準備はこれだけです。

5. GETリクエストしてみよう

まずは投稿一覧を取得します。
JSONPlaceholder の endpoint は次の通りです。

GET https://jsonplaceholder.typicode.com/posts

6. POSTリクエストしてみよう

次に、ボタンを押したら新規投稿（ダミー）を送る処理を作ります。

POST https://jsonplaceholder.typicode.com/posts

※JSONPlaceholder の POST は「成功したように見せるだけ」で、
実際にサーバーに保存はされません。

POST 時の body の例：

{
  "title": "新しい投稿",
  "body": "これはダミー投稿です。",
  "userId": 1
}

7. GET / POST をまとめた簡易アプリを完成させよう

ここで最小構成の React + axios サンプルを紹介します。
（以下、Qiita掲載を想定して適度に省略しつつ必要十分なコードだけ掲載しています）

App.jsx（完成版）

import { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [posting, setPosting] = useState(false);

  // GET: 投稿を取得
  const fetchPosts = async () => {
    setLoading(true);
    try {
      const res = await axios.get(
        "https://jsonplaceholder.typicode.com/posts",
        { params: { _limit: 5 } }
      );
      setPosts(res.data);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchPosts();
  }, []);

  // POST: 新規投稿
  const addPost = async () => {
    setPosting(true);
    try {
      const res = await axios.post(
        "https://jsonplaceholder.typicode.com/posts",
        {
          title: "新しい投稿",
          body: "これはダミー投稿です。",
          userId: 1,
        }
      );
      setPosts((prev) => [res.data, ...prev]);
    } finally {
      setPosting(false);
    }
  };

  return (
    <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
      <h1>React × axios × JSONPlaceholder</h1>

      <button onClick={addPost} disabled={posting}>
        {posting ? "送信中..." : "POST: 新規投稿を追加する"}
      </button>

      {loading && <p>読み込み中...</p>}

      <ul>
        {posts.map((p) => (
          <li key={p.id} style={{ margin: "12px 0" }}>
            <h3>{p.title}</h3>
            <p>{p.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

8. まとめ

今回は、React から axios を使って JSONPlaceholder に
GET / POST を送るハンズオンを行いました。

JSONPlaceholder は「学習に最適なモックAPI」
axios は
- 自動 JSON パース
- エラー時の reject
- リクエスト/レスポンスのインターセプター
  などが便利
React + axios の基本的な流れを掴めば、
実際の API への接続もスムーズに進む

次のステップとしては、以下もおすすめです。

React Query / SWR を組み合わせて通信を最適化
PUT / PATCH / DELETE を試して CRUD を完成
自作の API サーバーと連携