はじめに
現在の多くの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では、以下のようなエイリアスが用意されています。
エイリアス名 | 内容 |
---|---|
axios.get() | GETリクエスト |
axios.post() | POSTリクエスト |
axios.put() | PUTリクエスト |
axios.delete() | DELETEリクエスト |
メリット
エイリアスを使うと、リクエストの際に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
また、ブラウザ上で直接コードを試したい場合は、以下のサイトがおすすめです。フロントエンドの環境構築が不要で、すぐにAxiosのコードを実行できます。
-
StackBlitz
-
StackBlitzについての詳しい解説は、以下のサイトでご覧いただけます。
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入門
【番外編】USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話
プログラミング塾に半年通えば、一人前になれると思っているあなた。それ、勘違いですよ。「なぜ間違いなの?」「正しい勉強法とは何なの?」ITを学び始める全ての人に知って欲しい。そう思って書きました。是非読んでみてください。
「フリーランスエンジニア」
近年やっと世間に浸透した言葉だ。ひと昔まえ、終身雇用は当たり前で、大企業に就職することは一種のステータスだった。しかし、そんな時代も終わり「優秀な人材は転職する」ことが当たり前の時代となる。フリーランスエンジニアに高価値が付く現在、ネットを見ると「未経験でも年収400万以上」などと書いてある。これに釣られて、多くの人がフリーランスになろうとITの世界に入ってきている。私もその中の1人だ。数年前、USBも知らない状態からITの世界に没入し、そこから約2年間、毎日勉学を行なった。他人の何十倍も努力した。そして、企業研修やIT塾で数多くの受講生の指導経験も得た。そこで私は、伸びるエンジニアとそうでないエンジニアをたくさん見てきた。そして、稼げるエンジニア、稼げないエンジニアを見てきた。
「成功する人とそうでない人の違いは何か?」
私が出した答えは、「量産型エンジニアか否か」である。今のエンジニア市場には、量産型エンジニアが溢れている!!ここでの量産型エンジニアの定義は以下の通りである。
比較的簡単に学習可能なWebフレームワーク(WordPress, Rails)やPython等の知識はあるが、ITの基本概念を理解していないため、単調な作業しかこなすことができないエンジニアのこと。
多くの人がフリーランスエンジニアを目指す時代に中途半端な知識や技術力でこの世界に飛び込むと返って過酷な労働条件で働くことになる。そこで、エンジニアを目指すあなたがどう学習していくべきかを私の経験を交えて書こうと思った。続きはこちらから、、、、
エンベーダー編集部
エンベーダーは、ITスクールRareTECHのインフラ学習教材として誕生しました。 「遊びながらインフラエンジニアへ」をコンセプトに、インフラへの学習ハードルを下げるツールとして運営されています。
関連記事
2020.02.25
完全未経験からエンジニアを目指す爆速勉強法
USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話
- キャリア・学習法
- エンジニア
2024.09.09
JavaScriptの基本、オブジェクトを理解しよう
JavaScriptを学習する中で、よく目にするオブジェクトについて、少しわかりにくいと感じることはありませんか?実は、JavaScriptのオブジェクトは単なるデータのまとまり以上に、プログラム全体で重要な役割を果たしています。オブジェクトを正しく理解できれば、データの操作や管理がスムーズになり、より効率的にコードを書けるようになります。
- JavaScript
- フロントエンド
2024.09.22
JavaScriptの基礎、Promiseを理解しよう
Promiseの仕組みを理解すると、非同期処理で取得したデータをどう扱えばよいかが見えてきて、スムーズにコードを書けるようになります。基本をしっかり学ぶことで、JavaScript全体の理解が深まり、学習効率も上がるはずです。
- JavaScript
- フロントエンド
2024.08.24
Reactの基本、useContextを理解しよう
今回は、コンポーネント間でデータを共有するのに役立つuseContextについて解説します。
- React
- フロントエンド