AxiosでJSONデータを扱う：レスポンス解析と表示

By /

AxiosでJSONデータを扱う：レスポンス解析と表示

Axiosは、ブラウザおよびNode.jsで使用できるPromiseベースのHTTPクライアントです。シンプルなAPI、豊富な機能、そして高い柔軟性から、JavaScript開発においてJSONデータを扱うためのデファクトスタンダードとして広く利用されています。本記事では、Axiosを使用してJSONデータを取得し、そのレスポンスを解析・表示する際のさまざまなテクニックや考慮事項について、詳細かつ実践的な解説を行います。

1. Axiosの概要とJSONデータとの関係

Axiosは、ブラウザのXMLHttpRequestオブジェクトやNode.jsのHTTPモジュールを抽象化し、より簡潔で使いやすいAPIを提供します。HTTPリクエスト（GET, POST, PUT, DELETEなど）を送信し、サーバーからのレスポンスを受け取ることができます。特にJSONデータとの相性が良く、自動的なJSONのパースやリクエストボディのシリアライズといった機能を提供します。

JSON (JavaScript Object Notation) は、軽量なデータ交換フォーマットであり、人間にも機械にも読み書きしやすいように設計されています。Web APIとのデータ交換において最も一般的なフォーマットの一つであり、AxiosはJSONデータを扱うための強力なツールとなります。

2. Axiosのインストールと基本的な使い方

Axiosを使用するためには、まずインストールが必要です。npmまたはyarnを使用してインストールできます。

npm:

bash
npm install axios

yarn:

bash
yarn add axios

インストールが完了したら、JavaScriptファイルにAxiosをインポートして使用できます。

“`javascript
import axios from ‘axios’;

// または Node.js 環境の場合
// const axios = require(‘axios’);
“`

最も基本的なGETリクエストの例を以下に示します。

javascript
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
console.log(response.data); // JSONデータ
})
.catch(error => {
console.error(error); // エラーハンドリング
});

このコードは、https://jsonplaceholder.typicode.com/todos/1というURLにGETリクエストを送信し、成功した場合はレスポンスデータをコンソールに出力し、エラーが発生した場合はエラー内容をコンソールに出力します。

3. レスポンスオブジェクトの構造

Axiosからのレスポンスオブジェクトは、以下の主要なプロパティを持ちます。

  • data: サーバーからのレスポンスデータです。Content-Typeヘッダーがapplication/jsonの場合、Axiosは自動的にこのデータをJSONオブジェクトとしてパースします。
  • status: HTTPステータスコード（例：200, 404, 500）です。
  • statusText: HTTPステータステキスト（例：OK, Not Found, Internal Server Error）です。
  • headers: レスポンスヘッダーオブジェクトです。
  • config: リクエストの設定オブジェクトです。
  • request: リクエスト送信に使用されたXMLHttpRequestオブジェクト（ブラウザの場合）またはHTTPリクエストオブジェクト（Node.jsの場合）です。

これらのプロパティを活用することで、レスポンスの内容を詳細に分析し、アプリケーションに適した処理を行うことができます。

4. JSONデータの解析と表示

Axiosは、Content-Typeヘッダーがapplication/jsonであるレスポンスを自動的にJSONオブジェクトとしてパースします。したがって、response.dataを直接利用できます。

基本的なJSONデータの表示

javascript
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
const todo = response.data;
console.log('ID:', todo.id);
console.log('Title:', todo.title);
console.log('Completed:', todo.completed);
})
.catch(error => {
console.error(error);
});

この例では、response.dataからid, title, completedといったプロパティを取り出し、コンソールに表示しています。

複雑なJSONデータの表示

JSONデータがネストされている場合や、配列を含む場合は、より複雑な処理が必要になることがあります。

“`javascript
axios.get(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
const users = response.data;

users.forEach(user => {
  console.log('Name:', user.name);
  console.log('Email:', user.email);
  console.log('Address:', user.address.street + ', ' + user.address.city);
  console.log('--------------------');
});

})
.catch(error => {
console.error(error);
});
“`

この例では、ユーザーの配列を取得し、各ユーザーのname, email, addressをループ処理で表示しています。addressはネストされたオブジェクトであるため、user.address.streetのようにドット記法でアクセスしています。

5. エラーハンドリング

Axiosは、HTTPステータスコードが2xxの範囲外の場合、自動的にエラーをthrowします。catchブロックでエラーを捕捉し、適切なエラーハンドリングを行うことが重要です。

javascript
axios.get('https://jsonplaceholder.typicode.com/todos/9999') // 存在しないID
.then(response => {
// 成功した場合の処理
})
.catch(error => {
if (error.response) {
// サーバーからのレスポンスがある場合（例：404 Not Found）
console.error('Status Code:', error.response.status);
console.error('Response Data:', error.response.data);
console.error('Response Headers:', error.response.headers);
} else if (error.request) {
// リクエストは送信されたが、レスポンスがない場合（例：サーバーがダウンしている）
console.error('No response received:', error.request);
} else {
// リクエストのセットアップ中にエラーが発生した場合
console.error('Error during request setup:', error.message);
}
console.error('Config:', error.config);
});

この例では、エラーの種類に応じて異なるエラーメッセージを表示しています。error.responseはサーバーからのレスポンスがある場合、error.requestはリクエストは送信されたがレスポンスがない場合、そしてerror.messageはリクエストのセットアップ中にエラーが発生した場合にそれぞれ情報を保持しています。

6. POSTリクエストとJSONデータの送信

Axiosを使用してサーバーにJSONデータを送信するには、axios.postメソッドを使用します。

“`javascript
const newTodo = {
userId: 1,
title: ‘Learn Axios’,
completed: false
};

axios.post(‘https://jsonplaceholder.typicode.com/todos’, newTodo)
.then(response => {
console.log(‘New Todo Created:’, response.data);
})
.catch(error => {
console.error(error);
});
“`

この例では、newTodoオブジェクトをJSON形式でhttps://jsonplaceholder.typicode.com/todosにPOSTリクエストとして送信しています。Axiosは、デフォルトでリクエストボディをJSON形式にシリアライズします。

7. PUT/PATCHリクエストとJSONデータの送信

既存のリソースを更新するには、axios.putまたはaxios.patchメソッドを使用します。putはリソース全体を置き換える場合に使用し、patchはリソースの一部を更新する場合に使用します。

“`javascript
const updatedTodo = {
id: 1,
userId: 1,
title: ‘Learn Axios (Updated)’,
completed: true
};

axios.put(‘https://jsonplaceholder.typicode.com/todos/1’, updatedTodo)
.then(response => {
console.log(‘Todo Updated:’, response.data);
})
.catch(error => {
console.error(error);
});
“`

この例では、IDが1のTodoをupdatedTodoオブジェクトで完全に置き換えています。

8. DELETEリクエスト

リソースを削除するには、axios.deleteメソッドを使用します。

javascript
axios.delete('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
console.log('Todo Deleted');
})
.catch(error => {
console.error(error);
});

この例では、IDが1のTodoを削除しています。

9. リクエスト設定

Axiosは、リクエストをカスタマイズするための豊富な設定オプションを提供します。主な設定オプションを以下に示します。

  • baseURL: すべてのリクエストのベースURLを設定します。
  • timeout: リクエストのタイムアウト時間をミリ秒単位で設定します。
  • headers: リクエストヘッダーを設定します。
  • params: URLにクエリパラメータを追加します。
  • auth: HTTP認証情報を設定します。
  • transformRequest: リクエストデータを送信前に変換する関数を設定します。
  • transformResponse: レスポンスデータを受信後に変換する関数を設定します。
  • cancelToken: リクエストをキャンセルするためのトークンを設定します。

これらの設定オプションを活用することで、アプリケーションの要件に合わせてリクエストを柔軟にカスタマイズできます。

例：リクエストヘッダーの設定

javascript
axios.get('https://jsonplaceholder.typicode.com/todos/1', {
headers: {
'X-Custom-Header': 'value'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

この例では、X-Custom-Headerというカスタムヘッダーを設定しています。

10. Axiosインスタンスの作成

複数のエンドポイントにリクエストを送信する場合や、特定の設定を共有したい場合は、Axiosインスタンスを作成すると便利です。

“`javascript
const api = axios.create({
baseURL: ‘https://jsonplaceholder.typicode.com’,
timeout: 10000,
headers: {
‘Content-Type’: ‘application/json’
}
});

api.get(‘/todos/1’)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

api.post(‘/todos’, {
userId: 1,
title: ‘New Todo’,
completed: false
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
“`

この例では、baseURL, timeout, headersを設定したAxiosインスタンスを作成し、それを使用して複数のリクエストを送信しています。

11. Interceptorsの使用

Interceptorsは、リクエストを送信する前、またはレスポンスを受け取った後に処理を実行するための強力なメカニズムです。Interceptorsを使用することで、リクエストやレスポンスをグローバルに処理したり、共通のロジックを実装したりできます。

リクエストインターセプターの例：

javascript
axios.interceptors.request.use(
config => {
// リクエスト送信前に実行される処理
console.log('Request was sent');
config.headers['Authorization'] = 'Bearer YOUR_API_KEY';
return config;
},
error => {
// リクエストエラーが発生した場合に実行される処理
return Promise.reject(error);
}
);

この例では、リクエストを送信する前にAuthorizationヘッダーを設定しています。

レスポンスインターセプターの例：

javascript
axios.interceptors.response.use(
response => {
// レスポンスが成功した場合に実行される処理
console.log('Response received');
return response;
},
error => {
// レスポンスエラーが発生した場合に実行される処理
if (error.response.status === 401) {
// 認証エラーの場合の処理
console.error('Authentication failed');
// ログインページにリダイレクトするなどの処理
}
return Promise.reject(error);
}
);

この例では、レスポンスが成功した場合にコンソールにメッセージを表示し、認証エラーが発生した場合には特定のエラー処理を行います。

12. TypeScriptとの連携

AxiosはTypeScriptとの連携も容易です。TypeScriptの型定義を利用することで、より安全で保守性の高いコードを書くことができます。

“`typescript
import axios, { AxiosResponse } from ‘axios’;

interface Todo {
userId: number;
id: number;
title: string;
completed: boolean;
}

axios.get(‘https://jsonplaceholder.typicode.com/todos/1’)
.then((response: AxiosResponse) => {
const todo: Todo = response.data;
console.log(‘ID:’, todo.id);
console.log(‘Title:’, todo.title);
console.log(‘Completed:’, todo.completed);
})
.catch(error => {
console.error(error);
});
“`

この例では、Todoインターフェースを定義し、axios.getメソッドの型パラメータとして指定することで、レスポンスデータの型を明確にしています。

13. CORS（Cross-Origin Resource Sharing）

異なるオリジン（ドメイン、プロトコル、ポート）間でリソースを共有する際には、CORSの問題が発生する可能性があります。ブラウザは、セキュリティ上の理由から、デフォルトで異なるオリジンからのリクエストを制限します。

CORSの問題を解決するには、サーバー側で適切なCORSヘッダーを設定する必要があります。例えば、Access-Control-Allow-Originヘッダーを設定することで、特定のオリジンからのリクエストを許可できます。

また、クライアント側でwithCredentialsオプションをtrueに設定することで、Cookieや認証情報を異なるオリジンに送信できます。

javascript
axios.get('https://example.com/api', {
withCredentials: true
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

14. まとめ

Axiosは、JSONデータを扱うための強力なツールであり、シンプルなAPI、豊富な機能、そして高い柔軟性を提供します。本記事では、Axiosの基本的な使い方から、レスポンスの解析と表示、エラーハンドリング、POST/PUT/DELETEリクエスト、リクエスト設定、Axiosインスタンスの作成、Interceptorsの使用、TypeScriptとの連携、そしてCORSの問題について詳細に解説しました。

これらの知識を活用することで、Web APIとのデータ交換をより効率的に行い、高品質なJavaScriptアプリケーションを開発することができます。Axiosのドキュメントやサンプルコードを参考に、さまざまな機能を試して、より深く理解することをおすすめします。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール