JavaScriptのライブラリ、Axiosを理解しよう

はじめに

現在の多くのWebサービスでは、APIや他のサーバー間でデータのやり取りがほぼ不可欠となっています。フロントエンドでのデータの送受信はHTTPリクエストによって行われますが、これを簡単にするライブラリがAxiosです。

AxiosはHTTPリクエストを効率化する多くの機能を備えており、基本を理解して使いこなすことで、サーバーとのデータのやり取りをスムーズに行えるようになります。 この記事では、Axiosの基本的な使い方と便利な機能について解説します。サーバーとのデータのやり取りは、Web開発において必須のスキルですので、ぜひ一緒に学んでいきましょう！

この記事について

目的

• Axiosを理解する
• FetchAPIとの違いを知る
• Axiosを使用してデータ操作ができるようになる

対象者

• 初学者の方
• JavaScriptの勉強を最近始めた方

Axiosとは？

Axiosは、JavaScriptでサーバーとデータのやり取りを簡単に行えるHTTPリクエスト用のライブラリです。 たとえば、Webアプリケーションでサーバーからデータを取得したり、サーバーにデータを送信したりする際に便利です。

AxiosはPromiseという仕組みを使って、非同期処理を簡単に管理できます。これにより、サーバーからの応答（レスポンス）を受け取った後の処理をスムーズに書くことができるのが特徴です。

また、サーバーから受け取ったデータは自動的にJSON形式に変換されるので、手間がかかりません。

AxiosとfetchAPIの違い

Axiosと同様に、サーバーとのデータのやり取りを行う方法としてFetch APIがありますが、この2つの違いは何でしょうか。どちらもJavaScriptでHTTPリクエストを行うためのツールですが、それぞれに特徴があります。

• Axios

  Axiosは外部ライブラリのため、プロジェクトの環境へインストールして使用します。Promiseベースで簡単にHTTPリクエストを行えるように設計されており、レスポンスは自動的にJSON形式に変換します。

• FetchAPI

  ブラウザ標準の機能として組み込まれており、プロジェクトへのインストールは不要です。FetchAPIもPromiseベースですが、HTTPリクエストを行う際にいくつかの追加操作が必要になることがあります。また、レスポンスとして受け取ったデータは、JSON形式に変換するためのコードを記述しなければなりません。

このように、AxiosとFetch APIにはいくつかの違いがあります。Axiosはインストールが必要ですが、HTTPリクエストを便利にする機能が豊富です。どちらを使うかはプロジェクトの要件によりますが、より多機能で使いやすさを求める場合は、Axiosが適しているかもしれません。

Axiosをさらに深く理解するには、Promiseの仕組みを知ることが重要です。Promiseについては以下の記事で詳しく解説していますので、ぜひご覧ください。

https://envader.plus/article/468

また、Fetch APIについては以下の記事で解説していますので、あわせてご覧ください。

https://envader.plus/article/465

Axiosの使い方

Axiosの機能と利便性について理解できたところで、このセクションでは実際の使い方について解説します。

プロジェクトへのインストール

前のセクションでもお伝えしたように、Axiosはプロジェクトにインストールして使います。

npmでのインストール

npm install axios

yarnでのインストール

yarn add axios

jsDelivr CDN を利用する場合

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

unpkg CDN を利用する場合

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基本の記述方法

次に、Axiosを使った基本的なリクエストの書き方を見ていきましょう。以下は、GETメソッドでのリクエストの例です。

// GETリクエストを実行
axios.get('https://api.example.com')
  .then(response => {
    // リクエストが成功した場合、データを表示
    console.log(response.data);
  })
  .catch(error => {
    // リクエストが失敗した場合、エラーを表示
    console.error('Error:', error);
  });

同じリクエストをfetchAPIで記述すると以下のようになります。

// Fetch APIを使用してGETリクエストを実行
fetch('https://api.example.com')
  .then((response) => {
    // レスポンスが正常かどうかをチェック
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // レスポンスをJSON形式に変換
    return response.json();
  })
  .then((data) => {
    // リクエストが成功した場合、データを表示
    console.log(data);
  })
  .catch((error) => {
    // リクエストが失敗した場合、エラーを表示
    console.error('Error:', error);
  });

ご覧のように、Axiosを使うとコードがシンプルになり、レスポンスをJSON形式に変換する処理が不要です。これが、Axiosの使いやすさのひとつです。

さらに、Axiosには便利に使うためのリクエストメソッドエイリアスとインスタンスという仕組みが用意されています。これらを使うことで、Axiosの機能をより簡単に活用できるようになります。次のセクションで詳しく見ていきましょう。

Axiosのリクエストメソッドエイリアスについて

Axiosのリクエストメソッドエイリアスとは、特定のHTTPリクエストメソッド（GET、POST、PUT、DELETEなど）を簡単に使えるように、あらかじめ準備されているエイリアス（ショートカット関数）のことです。Axiosはこれらのメソッドごとにエイリアスを用意しており、これにより、コードを短くシンプルに書くことができます。

リクエストメソッドエイリアスの例

Axiosでは、以下のようなエイリアスが用意されています。

メリット

エイリアスを使うと、リクエストの際にurlやmethod、dataなどを手動で設定する必要がなく、より簡単に書けるようになります。例えば、axios.get()を使えば、自分でmethodに「GET」を指定する手間が省けます。

使い方

以下は、リクエストメソッドエイリアスを使ったGETリクエストのコード例です。エイリアスを使うと、リクエストがより簡潔に書けることが分かります。

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

次に、エイリアスを使わない場合のコード例です。メソッドやURLを手動で指定する必要があり、やや冗長なコードになります。

axios.request({
  method: 'get',               // どのメソッドを使うか指定（GET）
  url: 'https://api.example.com/data',  // URLを指定
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

リクエストメソッドエイリアスを使うことで、コードが短くなり、よりシンプルに書けることが確認できます。

Axiosインスタンスについて

Axiosインスタンスとは、カスタム設定を持つAxiosの独自インスタンス（オブジェクト）を作成し、そのインスタンスを使って複数のリクエストを実行できる仕組みです。これにより、共通の設定やヘッダーを複数のリクエストに適用することができます。

通常のAxiosオブジェクトはデフォルト設定でリクエストを送信しますが、Axiosインスタンスを使うと、インスタンスごとに異なる設定を持たせることができます。例えば、APIのベースURLやタイムアウトの設定、共通のヘッダーなどをインスタンスに設定することが可能です。

Axiosインスタンスの作成方法

axios.create()メソッドを使って、カスタム設定を持つAxiosインスタンスを作成できます。インスタンスに共通の設定を事前に設定しておくことで、リクエストごとに同じ設定を繰り返し書く手間を省くことができます。

以下は、具体的なコード例です。

const instance = axios.create({
  baseURL: 'https://api.example.com',  // すべてのリクエストに適用されるベースURL
  timeout: 1000,                       // リクエストのタイムアウト時間（ミリ秒）
  headers: { 'Authorization': 'sample token' }  // 共通のヘッダーを設定
});

// インスタンスを使ってGETリクエストを送る
instance.get('/users')  // エンドポイントのみを記述すればよい
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Axiosを使ってみよう

ここまで、Axiosの基本的な使い方や、リクエストメソッドエイリアス、インスタンスといった便利な機能について学びました。このセクションでは、実際にAxiosを使ってコードを書き、ハンズオン形式で理解を深めていきましょう。今回は、GETとPOSTメソッドを使用してサーバーにデータを送受信します。

ハンズオンでは、JSONPlaceholderというAPIサービスを利用します。JSONPlaceholderは、開発者がAPIを使ってデータのやり取りを練習できる無料のオンラインモックAPIサービスです。

• JSONPlaceholder

  https://jsonplaceholder.typicode.com/

また、ブラウザ上で直接コードを試したい場合は、以下のサイトがおすすめです。フロントエンドの環境構築が不要で、すぐにAxiosのコードを実行できます。

• StackBlitz

  https://stackblitz.com/

• StackBlitzについての詳しい解説は、以下のサイトでご覧いただけます。

  https://envader.plus/article/434

Axiosを使用したデータのHTTPリクエストメソッドの送信

今回は、以下の2つのファイルを編集し、GETとPOSTメソッドを使ってJSONPlaceholderにデータを送信します。

• index.html
• main.js

コードの編集

• index.htmlにmain.jsファイルを読み込む

  index.htmlファイルでは、jsDelivr CDNを使ってAxiosをインポートし、main.jsファイルを読み込みます。

  <!-- index.html -->
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <!-- jsDelivr CDN でAxiosをインポート -->
      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      <title>Axios</title>
    </head>
    <body>
      <script type="module" src="/main.js"></script>
    </body>
  </html>

• main.jsを編集する

  次に、main.jsファイルを以下のように編集します。Axiosインスタンスを作成し、共通の設定を指定します。その後、GETとPOSTリクエストを実行するコードを記述します。

  // main.js
  
  // Axiosインスタンスの作成
  const apiClient = axios.create({
    baseURL: 'https://jsonplaceholder.typicode.com', // 共通のベースURL
    timeout: 5000, // タイムアウト設定
    headers: {
      'Content-Type': 'application/json',  // サーバーにJSON形式で送信することを伝える
    },
  });
  
  // エイリアスを使ってGETリクエスト
  apiClient.get('/posts/1')
    .then(response => {
      console.log('GET /posts/1: ', response.data); // データをコンソールに表示
    })
    .catch(error => {
      console.error('Error fetching post:', error);
    });
  
  // エイリアスを使ってPOSTリクエスト
  apiClient.post('/posts', {
    title: 'New Post',
    body: 'This is the body of the new post.',
    userId: 1,
  })
    .then(response => {
      console.log('POST /posts: ', response.data); // 作成されたデータを表示
    })
    .catch(error => {
      console.error('Error creating post:', error);
    });

コード編集後、ブラウザでページを開き、開発者ツールのコンソールを確認します。以下のように、GETとPOSTリクエストの結果が表示されていれば、データの送受信が成功しています。

コードの解説

ハンズオンで作成したmain.jsの記述内容を1つずつ確認していきましょう。

Axiosインスタンスの作成

// Axiosインスタンスの作成
const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 共通のベースURL
  timeout: 5000, // タイムアウト設定
  headers: {
    'Content-Type': 'application/json',  // サーバーにJSON形式で送信することを伝える
  },
});

Axiosインスタンスを作成することで、共通の設定を複数のリクエストに使い回すことができ、コードが簡潔になります。

• const apiClient = axios.create({...});

  axios.create()を使って、カスタム設定を持つAxiosのインスタンスを作成しています。インスタンスを作成することで、共通の設定（ベースURLやヘッダーなど）を一度だけ定義し、その後のリクエストで自動的に適用できます。

• baseURL（共通のベースURLの設定）

  すべてのリクエストで共通して使われるURLの基礎部分を指定します。これにより、エンドポイント部分だけを指定すればリクエストが送信されます。

• timeout（タイムアウト設定）

  リクエストが完了するまでの待機時間（ミリ秒）を指定しています。この場合は、リクエストが5秒（5000ミリ秒）以内に完了しなければ、自動的にタイムアウトエラーを発生させます。これにより、サーバーの応答が遅い場合でも、クライアント側で適切に対処できます。

• headers（リクエストヘッダーの設定）

  HTTPリクエストに含めるヘッダー情報を設定します。この場合、Content-Type: 'application/json'を指定しているため、サーバーに「送信するデータはJSON形式である」ということを明示しています。この設定があることで、サーバーは受け取るデータがJSONであることを認識し、適切に処理することができます。

GETリクエスト（エイリアスを使用）

// エイリアスを使ってGETリクエスト
apiClient
  .get('/posts/1')
  .then((response) => {
    console.log('GET /posts/1: ', response.data); // データをコンソールに表示
  })
  .catch((error) => {
    console.error('Error fetching post:', error);
  });

GETリクエストを使ってJSONPlaceholderのAPIからデータを取得します。

• apiClient.get('/posts/1')

  apiClientは、先ほど作成したAxiosインスタンスです。このインスタンスを呼び出すことにより、エンドポイントの'/posts/1'を指定するだけで、https://jsonplaceholder.typicode.com/posts/1へリクエストを送信し、データを取得することができます。

POSTリクエスト（エイリアスを使用）

// エイリアスを使ってPOSTリクエスト
apiClient
  .post('/posts', {
    title: 'New Post',
    body: 'This is the body of the new post.',
    userId: 1,
  })
  .then((response) => {
    console.log('POST /posts: ', response.data); // 作成されたデータを表示
  })
  .catch((error) => {
    console.error('Error creating post:', error);
  });

POSTリクエストを使ってJSONPlaceholderに新しいデータを投稿します。

• apiClient.post('/posts', {...}):

  ここでは、エイリアスのpostを使用することで、新しいデータをサーバーに送信しています。

  AxiosインスタンスであるapiClientを呼び出し、baseURLに設定されたURLに基づいてリクエストを送信します。ここでは、/postsエンドポイントに対してデータを送信するよう指定しています。

• { title: 'New Post', body: 'This is the body of the new post.', userId: 1 }:

  このオブジェクトは、サーバーに送信されるデータです。titleやbody、userIdなどのフィールドを持つ新しい投稿を作成し、その内容をJSON形式で送信しています。

このハンズオンを通じて、Axiosのリクエストメソッドエイリアスとインスタンスを使って効率的にAPIリクエストを行う方法が体験できます。今回紹介した以外にも簡単にHTTPリクエストを使用してデータの送受信ができますので、ぜひご自身でもコードを試して理解を深めていきましょう。

この記事で学んだこと

この記事では、Axiosを使ったHTTPリクエストの基本を学びました。 Axiosは、GETやPOSTといったリクエストを簡単に送信できる便利なライブラリです。 また、リクエストメソッドエイリアスやインスタンスを活用することで、コードをさらに短くシンプルに書けることもわかりました。

HTTPリクエストやPromiseの概念を理解し、Axiosを活用することで、プロジェクトにおけるサーバーとのデータのやり取りがよりスムーズに行えるようになります。

Webサービスの開発において、HTTPリクエストを使ったデータの送受信は必須の知識です。この記事の内容を参考に、ぜひ実践してみてください。

参考資料

以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご参照ください。

Axios入門

https://axios-http.com/ja/docs/intro