ReactでAxiosを使ったJSONデータの扱い方を完全ガイド！初心者でもわかるAPI通信の基本
生徒
「Reactでサーバーから送られてくるJSONデータってどうやって扱うんですか？」
先生
「JSONデータはサーバーとやり取りするための共通のデータ形式です。Axiosを使えば簡単に取得して扱うことができますよ。」
生徒
「JSONってなんだか難しそうですが、Reactでどうやって使えばいいのか具体的に知りたいです。」
先生
「それではAxiosでJSONデータを扱う方法を具体的に見ていきましょう。」
1. JSONデータとは？初心者向けに解説
JSON（ジェイソン）は「JavaScript Object Notation」の略で、データをやり取りするためのフォーマットです。人間が読んでも理解しやすく、コンピュータが処理するのも簡単という特徴があります。
例えば、ユーザーの名前や年齢をサーバーから受け取るときに、次のような形で送られてきます。
{
"name": "太郎",
"age": 25
}
このJSONをReactで受け取って画面に表示するのが、API通信の基本的な流れです。
2. AxiosでJSONデータを取得する基本
Axiosを使えば、サーバーからJSONデータを簡単に取得できます。取得したデータはJavaScriptのオブジェクトとして扱えるため、すぐにReactの状態（state）に保存して使えます。
import React, { useEffect, useState } from "react";
import axios from "axios";
function App() {
const [user, setUser] = useState(null);
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/users/1")
.then(response => {
setUser(response.data);
})
.catch(error => {
console.error("データ取得エラー:", error);
});
}, []);
return (
<div>
{user ? (
<div>
<h2>{user.name}</h2>
<p>メール: {user.email}</p>
</div>
) : (
<p>読み込み中...</p>
)}
</div>
);
}
export default App;
3. JSONデータをリストとして表示する方法
JSONデータは配列で送られてくることも多いです。例えば「ユーザー一覧」を取得すると複数のデータが返されます。Reactではmap関数を使ってリスト表示が可能です。
import React, { useEffect, useState } from "react";
import axios from "axios";
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/users")
.then(res => setUsers(res.data))
.catch(err => console.error("エラー:", err));
}, []);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name} ({user.email})</li>
))}
</ul>
);
}
export default UserList;
4. JSONデータをPOSTで送信する
サーバーにデータを送るときもJSON形式を使います。Axiosではオブジェクトを渡すだけで自動的にJSONに変換して送信してくれます。
import React, { useState } from "react";
import axios from "axios";
function PostData() {
const [title, setTitle] = useState("");
const [response, setResponse] = useState("");
const handleSubmit = async () => {
try {
const res = await axios.post("https://jsonplaceholder.typicode.com/posts", {
title: title,
body: "これはテスト投稿です",
userId: 1
});
setResponse(JSON.stringify(res.data));
} catch (e) {
setResponse("送信エラーが発生しました");
}
};
return (
<div>
<input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
<button onClick={handleSubmit}>送信</button>
<div>{response}</div>
</div>
);
}
export default PostData;
5. JSONデータのエラーハンドリング
通信時にはエラーが起こることもあります。例えばサーバーが停止していたり、間違ったURLにアクセスしている場合です。Axiosではcatchを使ってエラー処理を追加できます。
エラーが起きたときに「データを取得できませんでした」と表示することで、ユーザーにわかりやすく伝えられます。
6. JSONデータを使った実務での工夫
実際の開発では、取得したJSONデータを整形して表示することがよくあります。例えば日付を読みやすく変換したり、不要なフィールドを除外したりします。
また、大量のデータを一度に取得すると画面が重くなるため、ページネーション（ページ分割）や検索機能を組み合わせて使うのが一般的です。
7. 検索エンジンに役立つ関連キーワード
React Axios JSONデータ、API通信、初心者向け、取得、送信、使い方、リスト表示、エラーハンドリング、POST、GET、サンプルコード、状態管理、配列、オブジェクト、レスポンス、リクエストヘッダー、ページネーション、実務での工夫。
まとめ
ここまで、ReactでAxiosを使ってJSONデータを扱う基本的な流れを順番に見てきました。 JSONデータとは何かという基礎から始まり、Axiosを使ったAPI通信の考え方、 GETリクエストによるデータ取得、配列データのリスト表示、POSTリクエストによるデータ送信、 そしてエラーハンドリングや実務での工夫まで、ReactでAPI通信を行う上で欠かせないポイントを幅広く確認しました。
特に重要なのは、サーバーから受け取ったJSONデータを「そのまま使う」のではなく、 Reactのstateとして管理し、画面表示やユーザー操作と結びつけることです。 Axiosを使うことで、JSONデータは自動的にJavaScriptのオブジェクトや配列として扱えるため、 初心者でも直感的にAPI通信を実装できる点が大きなメリットになります。
ユーザー情報の取得や一覧表示のような基本的な処理はもちろん、 フォーム入力をJSONとして送信するPOST通信も、ReactとAxiosの組み合わせでシンプルに書けます。 また、通信エラーが発生した場合に備えてエラーハンドリングを行うことで、 アプリケーションの使いやすさや信頼性も大きく向上します。
実務では、JSONデータをそのまま表示するだけでなく、 必要な項目だけを取り出したり、配列データを加工したりといった場面が多くあります。 そのため、「JSONデータを取得する」こと自体よりも、 「取得したJSONデータをどう扱うか」という視点がとても大切になります。 本記事で紹介した基本を押さえておけば、ReactでのAPI通信に対する不安はかなり減るはずです。
まとめ用サンプルイメージ
axios.get("https://example.com/api")
.then(response => {
setData(response.data);
})
.catch(error => {
console.error("通信エラー", error);
});
生徒
「ReactでAxiosを使うと、JSONデータがそのまま使えるのが分かりました。 最初はAPI通信って難しそうだと思っていましたが、流れが見えてきました。」
先生
「そうですね。JSONデータは形に慣れてしまえば、それほど難しくありません。 Axiosを使うことで、取得も送信もシンプルに書けるのがReactとの相性の良いところです。」
生徒
「配列データをmapで表示したり、POSTで送信したりする方法も理解できました。 エラー処理も大事なんですね。」
先生
「その通りです。実際の開発では、通信が必ず成功するとは限りません。 エラーハンドリングまで含めて書けるようになると、より実践的なReactアプリになりますよ。」
生徒
「まずはJSONデータの取得と表示をしっかり練習して、 慣れてきたら実務的な使い方にも挑戦してみます！」
先生
「それが一番の近道です。ReactとAxiosの基本を身につけておけば、 API通信を使ったアプリ開発がぐっと楽になりますよ。」
この記事を読んだ人からの質問
