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 サーバーと連携