【JavaScript】axiosとは：特徴やインストール方法について
2023.09.13 / 
本記事ではJavaScriptでAjaxを実現するライブラリであるaxiosについて詳しく解説していきます。
axiosとはJavaScriptでHTTP通信を行うためのライブラリです。Vue.jsのフレームワークを利用している場合、非同期通信にaxiosを使うことがデファクトスタンダードです。
本記事を通して、axiosの特徴やインストール方法について理解を深めてください。
Ajaxとは
Ajax（Asynchronous JavaScript ＋ XML）とはJavaScriptとXMLを使用してWebサーバーと非同期通信を行う技術です。Ajaxを使うことでページの読み込み（ページ遷移）を行わず動的にページの一部をサーバーから受け取ったデータを元に更新することができます。
非同期通信とはコンピュータ間でデータの送信・受信のタイミングを合わさずに通信を行える通信方式。要求を出したコンピュータは、応答を待つことなく別の処理を行えます
Ajaxの特徴は以下の通りです。
- ページ全体の更新を行わずに、ページの一部のコンテンツのみを更新できる
- Webサーバーとの通信中でもページ操作が可能
- ページの全体読み込み（ページ遷移）がないため、画面が真っ白になることがない
- 動的にサーバーから取得したデータをページに反映できる
- ユーザビリティが向上する
AjaxにはXMLの頭文字が付いていますが、現在ではサーバーとクライアント間のデータ通信はJSONが利用されることがほとんどです。JSONについては以下記事をご参照ください。
JSONとは？特徴や記述方法、利用される場面について
axios
axiosとは
axios（アクシオス）とはJavaScriptでHTTP通信を行うためのライブラリであり、Promiseを使ってAjax（非同期通信）を実現できるようになります。
axiosはWebアプリケーションでAPIと通信する際に便利で、Vue.jsといったAjax通信の機能が備わっていないJavaScriptフレームワークと共に使われます。
jQueryの場合はajax()メソッドでAjax通信を行います。Promiseオブジェクトにdone()やfail()を連結してPromiseの状態によって処理を分けます。jQueryではAjax機能が備わっているためaxiosを利用することはほとんどないです
APIとの通信で利用されるため、REST APIのWebアプリケーション開発で使われることが多いです。
axiosはWebアプリケーション開発でAPI通信やリアルタイムのデータ更新を実現したい場合の選択肢の一つとなります。
axiosの特徴
axiosは以下の特徴を持っています。
- PromiseベースのAPIを提供し、簡単な読みやすいコードで非同期通信を可能にする
- GET、POST、DELETE、PUTなどのHTTPリクエストをサポート
- コードの書き方はjQuery Ajaxに似ている
axiosのインストール
axiosを使用するにはnpmでインストールする、またはCDMリンクを設置する必要があります。
npmでインストールする場合は以下のコードを実行してください。
npm install axiosCDMリンクを設置する場合は以下コードをheadタグ内に入れてください。
<script src="https://unpkg.com/axios/dist/axios.min.js"><script>axiosのサンプルコード
axiosでGETリクエストはaxios.get()を使用します。第一引数にはURLを指定します。
then()で通信が成功した際の処理を書き、catch()でエラー時の処理を書きます。GETリクエストのサンプルコードを以下に記します。
axios.get('https://api.office54.net/data')
.then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
axiosでPOSTリクエストはaxios.post()を使用します。第一引数にURL、第二引数に送信するデータを指定します。
POSTリクエストのサンプルコードを以下に記します。
axios.post('https://api.office54.net/create', { name: 'office', age: 20 })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
その他にPUTリクエストではaxios.put()、DELETEリクエストではaxios.delete()を使用します。
関連記事
