Reactでのデータ取得をAxiosで簡単に実現する方法【具体例付き解説】

Reactアプリケーションで外部のAPIからデータを取得することは、動的なウェブアプリケーションを構築するうえで欠かせない要素です。その中でも、Axiosは使いやすさと機能性から多くの開発者に支持されています。本記事では、Axiosを使用したReactでのデータ取得方法を具体的なコード例とともに解説します。APIとの通信の基本から、非同期データ処理、エラーハンドリング、高度な使い方まで、初心者にも分かりやすく紹介します。この記事を読み終えるころには、Axiosを使ったデータ取得の実践的な知識を得られるでしょう。

Axiosの概要とインストール方法

Axiosとは

Axiosは、JavaScriptでHTTPリクエストを簡単に送信するための軽量なライブラリです。Promiseベースであるため、非同期操作が容易に扱え、エラーハンドリングやデータの操作をシンプルに実装できます。主に以下の特徴があります：

主な特徴

• ブラウザとNode.js両方で動作：幅広い環境で使用可能です。
• リクエストやレスポンスのデータ変換：JSONデータの自動変換が可能です。
• インターセプター機能：リクエストやレスポンスを簡単に操作できます。
• タイムアウトやキャンセルの設定：柔軟なリクエスト制御が可能です。

インストール方法

Axiosを使用するには、プロジェクトにインストールする必要があります。以下はインストール手順です：

npmを使用したインストール

“`bash
npm install axios

<h4>yarnを使用したインストール</h4>  

bash
yarn add axios

<h3>基本的なインポート方法</h3>  
インストール後、以下のコードでAxiosをインポートします：  

javascript
import axios from ‘axios’;

これでAxiosをReactプロジェクトで使用する準備が整いました。次のセクションでは、Fetch APIと比較しながら、Axiosの利点を詳しく解説します。
<h2>AxiosとFetch APIの違い</h2>  

<h3>Fetch APIとは</h3>  
Fetch APIは、モダンなブラウザに標準搭載されているHTTPリクエスト用のAPIです。シンプルな構文で非同期リクエストを送信できますが、Axiosと比較すると柔軟性や使いやすさで劣る場合があります。  

<h3>AxiosとFetch APIの比較</h3>  

<h4>1. 設定の簡易性</h4>  
Axiosではリクエストを送信する際に、デフォルト設定をカスタマイズしたカスタムインスタンスを作成でき、複数のリクエストで使い回すことが可能です。一方、Fetch APIでは、リクエストごとに設定を記述する必要があります。  

**Axios例**  

javascript
const api = axios.create({
baseURL: ‘https://api.example.com’,
timeout: 1000,
});
api.get(‘/data’).then(response => console.log(response.data));

**Fetch API例**  

javascript
fetch(‘https://api.example.com/data’, { method: ‘GET’ })
.then(response => response.json())
.then(data => console.log(data));

<h4>2. エラーハンドリング</h4>  
Axiosはステータスコードを自動的にチェックし、エラーの場合はキャッチブロックに制御を渡します。Fetch APIでは、ステータスコードのチェックを明示的に記述する必要があります。  

**Axios例**  

javascript
axios.get(‘/data’)
.catch(error => console.error(‘Error:’, error));

**Fetch API例**  

javascript
fetch(‘/data’)
.then(response => {
if (!response.ok) {
throw new Error(‘Network response was not ok’);
}
return response.json();
})
.catch(error => console.error(‘Error:’, error));

<h4>3. データの自動変換</h4>  
Axiosはレスポンスデータを自動的にJSON形式に変換します。Fetch APIでは`response.json()`を呼び出す必要があります。  

<h4>4. サポート機能</h4>  
Axiosは、以下の追加機能を提供します：  
- **リクエストやレスポンスのインターセプター**  
- **タイムアウト設定**  
- **リクエストキャンセル**  

<h3>どちらを選ぶべきか？</h3>  
Fetch APIは軽量でブラウザ標準の機能ですが、柔軟性や利便性を重視する場合はAxiosがおすすめです。特にReactのようなフレームワークでの開発では、Axiosの機能が開発効率を大幅に向上させます。次は、ReactでのAxiosの基本的な使い方について解説します。
<h2>ReactでのAxiosの基本的な使い方</h2>  

<h3>Axiosを使ったシンプルなデータ取得</h3>  
Reactコンポーネント内でAxiosを使用してAPIからデータを取得する方法を解説します。ここでは、`useEffect`フックを使った例を紹介します。  

<h4>1. 必要なモジュールのインポート</h4>  
まず、AxiosとReactの`useState`および`useEffect`をインポートします。  

javascript
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;

<h4>2. 基本的なコンポーネント構造</h4>  
以下のコードでは、Axiosを使用してデータを取得し、Reactの状態に保存して表示しています。  

javascript
function DataFetchingComponent() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
// データ取得開始
axios.get(‘https://jsonplaceholder.typicode.com/posts’)
.then(response => {
setData(response.data); // データを状態に保存
setLoading(false);
})
.catch(err => {
setError(err.message); // エラーを状態に保存
setLoading(false);
});
}, []); // 空配列を渡して初回レンダリング時のみ実行

if (loading) return

Loading…;
if (error) return

Error: {error};

return (

Fetched Data

• {item.title}

);
}

<h3>コードの詳細な説明</h3>  

<h4>1. 状態の定義</h4>  
`useState`を使用して、以下の3つの状態を定義しています：  
- `data`: 取得したデータを保存  
- `loading`: ローディング状態の制御  
- `error`: エラーメッセージの保存  

<h4>2. データ取得</h4>  
`useEffect`フック内で、Axiosを使用してAPIエンドポイントからデータを取得します。初回レンダリング時のみ実行するため、依存配列を空にしています。  

<h4>3. ローディングとエラーハンドリング</h4>  
- データ取得中は「Loading...」と表示  
- エラーが発生した場合は、エラーメッセージを表示  

<h3>次のステップ</h3>  
この基本的な構造を理解することで、さまざまなAPIエンドポイントに対応したデータ取得が可能になります。次は、GETリクエストをさらに詳しく見ていきます。
<h2>AxiosでのGETリクエストの実装</h2>  

<h3>GETリクエストとは</h3>  
GETリクエストは、サーバーからデータを取得するために使用される最も基本的なHTTPメソッドです。ReactとAxiosを組み合わせることで、簡単かつ効率的にGETリクエストを実装できます。  

<h3>基本的なGETリクエストの例</h3>  
以下は、Axiosを使用したGETリクエストの基本例です。この例では、公開APIからデータを取得し、それをコンポーネントに表示します。  

javascript
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;

function GetRequestExample() {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get(‘https://jsonplaceholder.typicode.com/posts’);
setPosts(response.data);
setLoading(false);
} catch (err) {
setError(err.message);
setLoading(false);
}
};

fetchData();  

}, []);

if (loading) return

Loading…;
if (error) return

Error: {error};

return (

Posts

• {post.title}

);
}

export default GetRequestExample;

<h3>コードの解説</h3>  

<h4>1. 非同期関数でのGETリクエスト</h4>  
`useEffect`内で非同期関数を定義し、`axios.get`を使用してAPIエンドポイントからデータを取得しています。  

<h4>2. レスポンスデータの保存</h4>  
レスポンスデータ（`response.data`）をReactの状態（`posts`）に保存して、コンポーネントで使用しています。  

<h4>3. エラーハンドリング</h4>  
`try...catch`構文を使用して、ネットワークエラーやAPIエラーが発生した場合にエラーをキャッチし、状態に保存しています。  

<h4>4. 初回レンダリング時のみデータ取得</h4>  
依存配列を空にすることで、コンポーネントの初回レンダリング時に一度だけデータ取得を実行します。  

<h3>GETリクエストのカスタマイズ</h3>  

AxiosのGETリクエストは簡単にカスタマイズできます。たとえば、URLパラメータを追加して条件付きのデータ取得が可能です。  

javascript
axios.get(‘https://jsonplaceholder.typicode.com/posts’, {
params: {
userId: 1
}
}).then(response => console.log(response.data));

<h3>次のステップ</h3>  
GETリクエストの基本を理解したら、エラーハンドリングのベストプラクティスを学び、より堅牢なアプリケーションを構築してみましょう。次は、エラーハンドリングの詳細を解説します。
<h2>エラーハンドリングのベストプラクティス</h2>  

<h3>エラーハンドリングの重要性</h3>  
APIとの通信中に発生するエラー（ネットワーク障害、サーバーエラー、リクエストの不正など）を適切に処理することは、Reactアプリケーションの信頼性を高めるために重要です。エラーハンドリングを実装することで、ユーザーに適切なフィードバックを提供し、予期しない動作を防止できます。  

<h3>Axiosを使用したエラーハンドリング</h3>  

<h4>基本的なエラーハンドリング</h4>  
Axiosの`catch`ブロックを使用して、エラーをキャッチします。以下は基本的な実装例です：  

javascript
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;

function ErrorHandlingExample() {
const [data, setData] = useState(null);
const [error, setError] = useState(null);

useEffect(() => {
axios.get(‘https://jsonplaceholder.typicode.com/invalid-endpoint’)
.then(response => {
setData(response.data);
})
.catch(err => {
setError(err.response ? err.response.data : err.message);
});
}, []);

if (error) return

Error: {error};

return (

Data

{data ?

{JSON.stringify(data)} :

Loading…}
);
}

export default ErrorHandlingExample;

<h4>レスポンスエラーの詳細情報</h4>  
Axiosエラーオブジェクトには、エラーの詳細情報が含まれています：  

- `err.response`: サーバーからのレスポンス（ステータスコードやデータ）  
- `err.request`: リクエスト情報（サーバーが応答しなかった場合）  
- `err.message`: エラーメッセージ  

例：ステータスコードを利用した条件分岐  

javascript
.catch(err => {
if (err.response) {
console.error(‘Server responded with status:’, err.response.status);
} else if (err.request) {
console.error(‘No response received:’, err.request);
} else {
console.error(‘Error setting up request:’, err.message);
}
});

<h4>エラーメッセージのユーザー向け表示</h4>  
エラーメッセージをそのまま表示するのではなく、ユーザーに分かりやすいメッセージを提供します。  

javascript
.catch(err => {
setError(err.response?.status === 404 ? ‘データが見つかりません’ : ‘サーバーエラーが発生しました’);
});

<h3>グローバルエラーハンドリング</h3>  
複数のコンポーネントで同様のエラーハンドリングが必要な場合、Axiosのインターセプターを使用してグローバルに処理を定義できます。  

javascript
axios.interceptors.response.use(
response => response,
error => {
if (error.response?.status === 401) {
alert(‘認証エラーです。ログインし直してください。’);
}
return Promise.reject(error);
}
);

<h3>ベストプラクティスのまとめ</h3>  
1. エラーオブジェクトから必要な情報を取得して適切に処理する。  
2. ユーザーには分かりやすいメッセージを表示する。  
3. グローバルエラーハンドリングを活用して冗長なコードを回避する。  
4. ネットワークエラーやサーバーエラーを考慮したUXを設計する。  

次は、取得したデータをReactの状態管理と連携する方法を学びます。

<h2>非同期データの表示と状態管理</h2>

<h3>データ取得と状態管理の重要性</h3>
非同期で取得したデータを適切に状態管理することで、アプリケーションの安定性とユーザー体験を向上させることができます。Reactでは`useState`と`useEffect`を活用して、非同期データを扱います。

<h3>Axiosを使用したデータの状態管理</h3>
以下に、非同期データを状態に保存し、コンポーネントで表示する実装例を示します。

javascript
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;

function DataWithState() {
const [data, setData] = useState(null); // データの状態
const [loading, setLoading] = useState(true); // ローディング状態
const [error, setError] = useState(null); // エラー状態

useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await axios.get(‘https://jsonplaceholder.typicode.com/posts’);
setData(response.data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};

fetchData();

}, []);

if (loading) return

Loading…;
if (error) return

Error: {error};

return (

Fetched Data

• {item.title}

);
}

export default DataWithState;

<h3>コードの詳細な説明</h3>

<h4>1. 状態の定義</h4>
- **data**: APIから取得したデータを保存する。
- **loading**: データ取得中であることを示すフラグ。
- **error**: エラーが発生した場合にメッセージを保存。

<h4>2. 非同期処理</h4>
非同期関数`fetchData`を`useEffect`内で呼び出してデータを取得しています。

<h4>3. 条件付きレンダリング</h4>
`loading`が`true`の場合はローディング画面を表示し、`error`が`null`でない場合はエラー画面を表示します。

<h3>データのリアルタイム更新</h3>
リアルタイムでデータを取得する場合、一定間隔でAPIリクエストを送る仕組みを追加できます。

javascript
useEffect(() => {
const interval = setInterval(() => {
fetchData();
}, 5000);

return () => clearInterval(interval);
}, []);

<h3>状態管理のベストプラクティス</h3>
1. **読み込み状態とエラー状態の分離**: 明確に状態を管理してUXを向上させる。
2. **再利用可能な関数の定義**: データ取得ロジックを関数化して他のコンポーネントで再利用可能にする。
3. **ローカルストレージやキャッシュの活用**: 頻繁に変更されないデータはキャッシュを活用して効率化する。

次は、POSTリクエストを使ってフォームデータを送信する方法を学びます。
<h2>AxiosでのPOSTリクエストとフォーム送信例</h2>  

<h3>POSTリクエストとは</h3>  
POSTリクエストは、サーバーにデータを送信するために使用されるHTTPメソッドです。ReactとAxiosを組み合わせることで、フォーム送信などのデータ送信操作を簡単に実装できます。  

<h3>POSTリクエストの基本構造</h3>  
以下は、Axiosを使用してフォームデータをサーバーに送信する基本的な例です。  

javascript
import React, { useState } from ‘react’;
import axios from ‘axios’;

function PostRequestExample() {
const [formData, setFormData] = useState({ title: ”, body: ” });
const [response, setResponse] = useState(null);
const [error, setError] = useState(null);

const handleChange = (e) => {
setFormData({
…formData,
[e.target.name]: e.target.value
});
};

const handleSubmit = async (e) => {
e.preventDefault();
try {
const res = await axios.post(‘https://jsonplaceholder.typicode.com/posts’, formData);
setResponse(res.data);
} catch (err) {
setError(err.message);
}
};

return (

Submit Data

Title:
Body: </div> <br /> <button type=”submit”>Submit</button> <br /> </form> </p> <pre><code> {response && ( <div> <h3>Response:</h3> <pre>{JSON.stringify(response, null, 2)}</pre> </div> )} {error && <p>Error: {error}</p>} </div> </code></pre> <p>); <br /> } </p> <p>export default PostRequestExample; </p> <pre><code><h3>コードの詳細な解説</h3> <h4>1. 状態の定義</h4> – **formData**: ユーザーが入力したデータを管理。 – **response**: サーバーからのレスポンスデータを保存。 – **error**: エラー情報を保存。 <h4>2. 入力データの管理</h4> `handleChange`関数で、入力フィールドのデータを`formData`に保存します。 <h4>3. データ送信</h4> – `handleSubmit`関数内で`axios.post`を使用してデータを送信。 – 成功時にはレスポンスデータを保存し、失敗時にはエラーを保存します。 <h4>4. サーバーからの応答の表示</h4> 送信後に、サーバーからのレスポンスデータを画面に表示します。 <h3>カスタムヘッダーの使用</h3> POSTリクエストにカスタムヘッダーを追加する場合は、以下のように指定します： </code></pre> <p>javascript <br /> axios.post(‘https://api.example.com/data’, formData, { <br /> headers: { <br /> ‘Content-Type’: ‘application/json’, <br /> Authorization: ‘Bearer your_token_here’ <br /> } <br /> }); </p> <pre><code><h3>ベストプラクティス</h3> 1. **バリデーション**: データ送信前に必ずクライアント側で入力データを検証する。 2. **状態管理の徹底**: 送信中はボタンを無効化するなど、ユーザーが同時に複数リクエストを送信しないようにする。 3. **適切なレスポンス処理**: 成功メッセージやエラーを明確にユーザーに提示する。 次は、Axiosの高度な機能であるカスタムインスタンスとインターセプターについて解説します。 <h2>高度な使い方：カスタムインスタンスとインターセプター</h2> <h3>カスタムインスタンスとは</h3> カスタムインスタンスを使用すると、共通の設定を適用したAxiosインスタンスを作成でき、複数のリクエストで再利用可能になります。例えば、ベースURLやヘッダーの設定を統一する場合に便利です。 <h4>カスタムインスタンスの作成例</h4> </code></pre> <p>javascript <br /> import axios from ‘axios’; </p> <p>const apiClient = axios.create({ <br /> baseURL: ‘https://jsonplaceholder.typicode.com’, <br /> timeout: 5000, <br /> headers: { <br /> ‘Content-Type’: ‘application/json’, <br /> Authorization: ‘Bearer your_token_here’ <br /> } <br /> }); </p> <p>export default apiClient; </p> <pre><code>これで、`apiClient`を使ってリクエストを簡潔に記述できます。 <h4>使用例</h4> </code></pre> <p>javascript <br /> import apiClient from ‘./apiClient’; </p> <p>apiClient.get(‘/posts’).then(response => { <br /> console.log(response.data); <br /> }); </p> <pre><code><h3>インターセプターとは</h3> インターセプターは、リクエストやレスポンスを送信・受信する前に処理を追加する機能です。例えば、リクエストに認証トークンを自動的に付加したり、エラーレスポンスを一元的に処理したりできます。 <h4>リクエストインターセプターの例</h4> </code></pre> <p>javascript <br /> apiClient.interceptors.request.use( <br /> config => { <br /> // リクエストにトークンを付加 <br /> const token = localStorage.getItem(‘authToken’); <br /> if (token) { <br /> config.headers.Authorization = <code>Bearer ${token}</code>; <br /> } <br /> return config; <br /> }, <br /> error => Promise.reject(error) <br /> ); </p> <pre><code><h4>レスポンスインターセプターの例</h4> </code></pre> <p>javascript <br /> apiClient.interceptors.response.use( <br /> response => { <br /> // レスポンスデータを加工 <br /> return response; <br /> }, <br /> error => { <br /> if (error.response?.status === 401) { <br /> alert(‘認証エラーが発生しました。ログインし直してください。’); <br /> } <br /> return Promise.reject(error); <br /> } <br /> ); </p> <pre><code><h3>具体例：エラーハンドリングの一元化</h3> インターセプターを使用して、全てのエラーを中央で処理する例を示します。 </code></pre> <p>javascript <br /> apiClient.interceptors.response.use( <br /> response => response, <br /> error => { <br /> console.error(‘APIエラー:’, error.response?.status, error.message); <br /> return Promise.reject(error); <br /> } <br /> ); </p> <pre><code><h3>インターセプターの活用例</h3> <h4>1. ローディングインジケーターの管理</h4> リクエスト開始時にローディングインジケーターを表示し、終了時に非表示にする。 </code></pre> <p>javascript <br /> apiClient.interceptors.request.use(config => { <br /> showLoadingIndicator(); <br /> return config; <br /> }); </p> <p>apiClient.interceptors.response.use( <br /> response => { <br /> hideLoadingIndicator(); <br /> return response; <br /> }, <br /> error => { <br /> hideLoadingIndicator(); <br /> return Promise.reject(error); <br /> } <br /> ); </p> <pre><code><h4>2. 自動リトライ</h4> ネットワークエラー時にリクエストを再試行する。 </code></pre> <p>javascript <br /> apiClient.interceptors.response.use( <br /> response => response, <br /> async error => { <br /> if (!error.config.__isRetry) { <br /> error.config.__isRetry = true; <br /> return apiClient(error.config); <br /> } <br /> return Promise.reject(error); <br /> } <br /> ); </p> <pre><code><h3>ベストプラクティス</h3> 1. **カスタムインスタンスを利用して共通設定を管理する**。 2. **インターセプターを使用して、リクエストやレスポンスを一元的に制御する**。 3. **エラー処理や認証トークンの付加をインターセプターに統合する**。 次は、記事のまとめに移ります。 <h2>まとめ</h2> 本記事では、ReactでAxiosを使用してデータを取得および送信する具体例を中心に解説しました。Axiosの基本的なGETおよびPOSTリクエストの使い方から、高度なカスタムインスタンスやインターセプターを活用した効率的な実装方法までを網羅しました。 Axiosを使用することで、データ取得の効率が向上し、エラーハンドリングや認証トークンの付加なども簡単に実現可能です。これらの知識を活用し、より堅牢でユーザーフレンドリーなアプリケーションを構築してください。 <h2>演習問題と応用例</h2> <h3>演習問題</h3> 以下の演習問題に取り組むことで、Axiosの使用方法を実践的に学べます。 <h4>1. GETリクエストのカスタマイズ</h4> 公開API（例：`https://jsonplaceholder.typicode.com/users`）を使用し、以下を実装してください： – ユーザーリストを取得し、名前とメールアドレスを表示する。 – エラーハンドリングを実装する。 <h4>2. POSTリクエストでデータ送信</h4> フォームを作成し、以下の仕様を満たすPOSTリクエストを実装してください： – ユーザー名とコメントを入力できるフォームを作成する。 – 送信後にサーバーからのレスポンスを画面に表示する。 <h4>3. インターセプターの活用</h4> – リクエストごとに固定の認証トークンを付与するインターセプターを設定する。 – 404エラーが発生した場合に、カスタムメッセージを表示するレスポンスインターセプターを実装する。 <h3>応用例</h3> <h4>1. 無限スクロールの実装</h4> Axiosを使用して無限スクロールを実装する。スクロール位置に応じてAPIから新しいデータを取得し、リストに追加表示する。 **ポイント** – APIリクエストでページ番号を渡す。 – スクロールイベントを監視し、新しいデータを非同期で取得する。 <h4>2. リクエストキャッシュの導入</h4> 同じリクエストが短期間に繰り返される場合、キャッシュを活用してサーバー負荷を軽減する。 **実装手順** – キャッシュを管理するデータ構造（例：`Map`オブジェクト）を作成。 – Axiosインターセプターでキャッシュを確認し、キャッシュがある場合はサーバーリクエストをスキップする。 <h4>3. プログレスバーの実装</h4> 大きなファイルをアップロードする際に、進行状況を表示するプログレスバーを実装する。 **実装例** – `onUploadProgress`プロパティを使用して進行状況を取得する。 </code></pre> <p>javascript <br /> axios.post(‘/upload’, formData, { <br /> onUploadProgress: progressEvent => { <br /> const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total); <br /> console.log(‘Upload Progress:’, percentage, ‘%’); <br /> } <br /> }); <br /> “` </p> <h3>これらを活用した次のステップ</h3> <p><br /> 演習問題や応用例を実践することで、Axiosの基本から高度な使い方までを網羅的に習得できます。この知識を活かして、効率的で拡張性の高いReactアプリケーションを構築してみてください。</p> <h2>まとめ</h2> <p>本記事では、ReactでAxiosを使用したデータ取得および送信の基本から高度な使い方までを解説しました。Axiosを使用することで、シンプルかつ柔軟なリクエスト管理が可能になり、非同期処理やエラーハンドリングを効率化できます。また、カスタムインスタンスやインターセプターを活用することで、コードの再利用性を向上させつつ、リクエスト処理を一元管理できます。 </p> <p>この知識を応用して、リアルタイム更新や無限スクロール、リクエストキャッシュといった機能を実装し、より高度でユーザー体験に優れたアプリケーションを構築してください。ReactとAxiosの組み合わせで、API連携が楽になることを体感していただければ幸いです。</p>