ReactでAxiosのGETリクエストを完全ガイド！初心者でもわかるAPI通信の基本
生徒
「Reactでインターネット上のデータを読み込むにはどうすればいいですか。Axiosという名前を聞きました。」
先生
「Axiosはブラウザからサーバーへお願いを送るための便利な道具です。まずはGETリクエストで情報をもらう流れを練習しましょう。」
生徒
「難しい専門用語が多そうで不安です。ゆっくり順番に教えてください。」
先生
「大丈夫です。買い物の注文に例えながら説明します。必要な言葉もひとつずつ意味を付けて進めます。」
1. AxiosとGETリクエストの意味をやさしく理解しよう
Axiosは、ウェブサイトとサーバーのあいだで情報をやり取りするための道具です。Reactの画面から「この住所のデータをください」とお願いを出し、サーバーが返してくれた答えを画面に映します。ここで使うのが「GETリクエスト」です。GETは「見るだけで何も変えないお願い」というイメージです。通販の在庫を確かめるために商品ページをのぞく行為に近い考え方です。
専門用語の簡単な解説を挟みます。APIはアプリ同士の受け渡し口のことです。エンドポイントは受け渡し口の具体的な入り口の場所です。レスポンスはサーバーからの答えです。ステータスコードは「成功したかどうか」を数字で表した信号です。初心者でも落ち着いて言葉の役割をつかめば安心して進められます。
2. AxiosをReactで使う準備をしよう
プロジェクトにAxiosを入れる方法は簡単です。開発環境でコマンドを一行だけ実行します。インストールが終わると、Reactのファイルで読み込んで使えるようになります。道具箱に新しい道具を入れて、すぐ取り出せる状態を作るイメージです。名前の書き方はそのまままねすれば大丈夫です。
3. まずは最小の例：画面表示と同時にGETで読み込む
ここでは画面を開いた瞬間にサーバーへデータをお願いし、答えを文字として表示します。待っている間は読み込み中の表示を出して、失敗したらわかりやすいお知らせを出します。家から荷物が届くのを待つ場面にたとえると、配達中の札を出し、届いたら中身を出して机に並べ、住所が違って戻ってきたら注意書きを出す流れです。
import React, { useEffect, useState } from "react";
import axios from "axios";
function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
useEffect(() => {
const fetchData = async () => {
try {
const res = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
setData(res.data);
} catch (e) {
setError("データの取得に失敗しました");
} finally {
setLoading(false);
}
};
fetchData();
}, []);
if (loading) return <div>読み込み中…</div>;
if (error) return <div>{error}</div>;
return (
<div>
<h1>タイトル: {data.title}</h1>
<p>本文: {data.body}</p>
</div>
);
}
export default App;
4. パラメータ付きで情報をしぼりこむ書き方
同じ住所でも検索条件を添えると、ほしい部分だけを返してもらえます。これをクエリパラメータと呼びます。お店に「サイズ」と「色」を伝えるのと同じで、相手に希望を短く伝える役割があります。Axiosでは特別な書き方で楽に指定できます。
import axios from "axios";
async function loadUsers() {
const res = await axios.get("https://jsonplaceholder.typicode.com/comments", {
params: { postId: 1 }
});
return res.data;
}
5. 覚えておくと安心な基本テクニック
実際の画面では読み込み中の回転表示、再試行のボタン、空の結果への気配りが体験を良くします。通信が遅い場所でも落ち着いて使えるように、タイムアウトの設定や中断の仕組みも役立ちます。住所が遠いと配達に時間がかかるのと同じで、途中で待つのをやめる判断も必要です。Reactでは中断用のコントローラを準備して片付けの場面で使います。
import React, { useEffect, useState } from "react";
import axios from "axios";
function Users() {
const [users, setUsers] = useState([]);
const [state, setState] = useState("idle"); // idle | loading | error | empty
const fetchUsers = async (signal) => {
try {
setState("loading");
const res = await axios.get("https://jsonplaceholder.typicode.com/users", {
timeout: 8000,
signal
});
if (res.data.length === 0) {
setState("empty");
} else {
setUsers(res.data);
setState("idle");
}
} catch (e) {
if (axios.isCancel(e)) return;
setState("error");
}
};
useEffect(() => {
const controller = new AbortController();
fetchUsers(controller.signal);
return () => controller.abort();
}, []);
if (state === "loading") return <div>読み込み中…</div>;
if (state === "error") return <button onClick={() => fetchUsers()}>再試行</button>;
if (state === "empty") return <div>データがありません</div>;
return (
<ul>
{users.map(u => <li key={u.id}>{u.name}</li>)}
</ul>
);
}
export default Users;
6. ヘッダーの指定とセキュリティの考え方
ときどき相手に身分証を見せる必要があります。これが認証ヘッダーです。鍵の文字列をそのまま画面のコードに置かない工夫が大切です。環境変数に入れて外から読み込む方法を選びましょう。送る相手や内容を最小限にし、不要な情報を含めない習慣も安全性につながります。住所を書いた紙を人目にさらさないのと同じ考え方です。
import axios from "axios";
const api = axios.create({
baseURL: "https://example.com/api",
headers: { "X-Requested-With": "XMLHttpRequest" }
});
export async function getProfile(token) {
const res = await api.get("/profile", {
headers: { Authorization: `Bearer ${token}` }
});
return res.data;
}
7. エラーハンドリングを丁寧に：原因別の分け方
失敗の理由は大きく三つです。住所が間違い、道が混雑、相手の倉庫の問題です。数字の合図を手掛かりに原因を判定し、案内の言葉を変えましょう。四百番台はお願いの形が悪い合図、五百番台は相手の倉庫の不調、ゼロ番台のような状態は道が切れている合図です。利用者への言い方を分けるだけで安心感が高まります。
import axios from "axios";
function explainError(e) {
if (axios.isAxiosError(e) && e.response) {
const code = e.response.status;
if (code >= 400 && code < 500) return "入力の条件を見直してください";
if (code >= 500) return "サーバー側の不具合が発生しています";
}
if (axios.isAxiosError(e) && e.request) return "通信状態を確認してください";
return "原因不明のエラーが発生しました";
}
8. よくあるつまずきと解決のコツ
画面が更新されない場合は状態の保管場所を確かめます。配列や文字が別物に入れ替わっているかが鍵です。住所の先頭と末尾の誤りにも気を付けます。余分な斜線や漏れた記号があると相手に届きません。並び替えや検索の条件を変えたのに変化がないときは、依存の指定が古い可能性を疑います。順番の覚書を見直すと解決することが多いです。
通信が遅い場所では一度に大量のお願いを送らない工夫が役立ちます。必要な部分だけを狙う、次のページを少し遅らせる、同じ住所の結果を短時間だけ手元に置くなど、小さな工夫の積み重ねが体験を滑らかにします。無理に難しい仕組みを使わなくても、やさしい考え方の積み上げで十分に効果が出ます。
9. この記事の要点を思い出すための小さなチェックリスト
- 住所にお願いを出すのがGETリクエストという考え方
- 読み込み中と失敗時の表示を分けて安心感を作る工夫
- 条件を添えると必要な部分だけを受け取れる仕組み
- 鍵の扱いは外に出し、最小限の情報を送る安全の習慣
- 数字の合図で原因を分けて案内の言葉を変える配慮
まとめ
この記事では、ReactでAxiosを使ってGETリクエストを行い、サーバーからデータを取得する基本的な考え方から、 実際の画面表示、エラーへの対応、安全面の配慮までを、順を追って学んできました。 初心者の方がつまずきやすい「専門用語の意味」「どこで何が起きているのか」という点を、 通販や配達のたとえを使いながら整理したことで、API通信の全体像が見えやすくなったはずです。
GETリクエストは、サーバーに対して「情報をください」とお願いするための基本的な方法です。 Reactでは画面の表示と同時にデータを取得したり、条件を付けて必要な情報だけを受け取ったりと、 日常的に使われる場面がとても多くあります。 Axiosを使うことで、その処理を読みやすく、安心して書ける点は大きな魅力です。
また、読み込み中の表示や、失敗したときの案内を用意することで、 利用者は「今どうなっているのか」を迷わず理解できます。 これは見た目の問題だけでなく、アプリ全体の信頼感にも直結します。 データが届かない理由をひとまとめにするのではなく、 状態や数字の合図に応じて言葉を分ける工夫も、実務ではとても重要です。
ヘッダーの指定や鍵の扱いについても触れました。 情報を送るときは必要最小限にし、外に見せてはいけないものは環境ごとに分けて管理する。 こうした基本的な習慣を早い段階で身につけておくことで、 あとから大きな修正をせずに安全なアプリを育てていくことができます。
GETリクエストはReactとAPI通信の入り口です。 ここで学んだ「流れ」「考え方」「気配り」は、 そのまま他の通信方法や、より複雑な画面作りにもつながっていきます。 まずは今回の内容を土台として、安心してデータを扱える感覚を身につけることが大切です。
まとめ用の基本イメージ
useEffect(() => {
axios.get("https://example.com/data")
.then(res => setData(res.data))
.catch(() => setError("取得に失敗しました"));
}, []);
生徒
「AxiosのGETリクエストって、ただの難しい通信だと思っていましたが、 住所にお願いを出して返事を待つ流れだと考えると、すごく分かりやすくなりました。」
先生
「その感覚はとても大切です。仕組みを丸暗記するよりも、 何が起きているかをイメージできるようになると、応用もしやすくなります。」
生徒
「読み込み中やエラーの表示も、ただのおまけだと思っていましたが、 利用する人の安心につながる大事な部分なんですね。」
先生
「そうです。通信は失敗することも前提に考えます。 そのときにどう伝えるかで、使いやすさが大きく変わります。」
生徒
「まずはGETで情報を取って表示するところを何度も練習して、 仕組みを体に覚えさせていこうと思います。」
先生
「それが一番の近道です。基本を丁寧に積み重ねれば、 ReactでのAPI通信は自然に書けるようになりますよ。」
この記事を読んだ人からの質問
