Vue.jsとAxiosの基本と実務的な活用方法

フロントエンド開発•2025/1/26

はじめに

Vue.jsは、ユーザーインターフェースを効率よく構築するためのフレームワークとして多くの現場で使われています。一方で、ブラウザ上でAPIからデータを取得したり、サーバーに送信したりする方法を学ぶのは最初の壁になりやすいかもしれません。そうしたときに役立つのがAxiosです。これはHTTPリクエストをシンプルなコードで書ける便利なライブラリです。 Vue.jsと組み合わせることで、データの取得や更新を直感的に行えるようになります。

この記事を読むとわかること

Vue.jsとAxiosを組み合わせる基本的な流れ
GETやPOSTなどの具体的なHTTPリクエスト方法
実務でよく使われるエラーハンドリングのやり方
インターセプターを使ってリクエストをより柔軟に管理する方法

Vue.jsとAxiosを使う準備

Vue.jsでAxiosを使う場合、まずAxiosをインストールする必要があります。さらに、プロジェクトによってはAxiosをグローバルに設定したり、個々のコンポーネントで直接読み込んだりする方法があります。

開発を始める段階でプロジェクト構成がまだ固まっていない場合は、まずは個々のコンポーネントで簡単にインポートして試す方が分かりやすいかもしれません。慣れてきたらインターセプターなど応用的な使い方も検討すると、実装がまとまりやすくなります。

Axiosのインストール

Node.js環境であれば、パッケージマネージャーを用いてコマンド1つで導入可能です。以下のコマンドでプロジェクトに追加すると、すぐに利用を始められます。


npm install axios

パッケージをインストールしたあとは、VueコンポーネントやJavaScriptファイル内でimport axios from "axios"のように読み込みます。

Vueコンポーネントへの導入

Vue.jsのコード中では、一般的に以下のようにしてAxiosを呼び出します。 Composition APIの例を見てみましょう。


<template>
  <div>
    <h2>ユーザーリスト</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const users = ref([]);

onMounted(async () => {
  try {
    const response = await axios.get("https://jsonplaceholder.typicode.com/users");
    users.value = response.data;
  } catch (error) {
    console.error(error);
  }
});
</script>

onMounted内でAPIの呼び出しを行い、取得したデータをrefで用意したusersに代入しています。これによって、テンプレート側でリスト表示が可能になります。

GETリクエストでデータ取得

実務のシーンでは、まずは既存のAPIから必要な情報を取得して画面に反映するケースが多いです。たとえば商品一覧を表示したり、ユーザー情報を取得してプロフィール画面に表示したりするなどが典型例です。

Axiosを使ってGETリクエストを行うと、必要最小限のコードでデータが手に入ります。加えてレスポンスに含まれるステータスコードやヘッダー情報なども簡単に取り出せるので、後続の処理が分かりやすくなるでしょう。

実務的なデータ取得シーン

顧客管理システムの顧客一覧を取得する
掲示板の投稿情報を受け取る
eコマースサイトの在庫情報を表示する

こうした状況では、大抵が「画面を開いた時点でデータを初期表示する」という流れになります。 Vue.jsでは、ライフサイクルフックやComposition APIのフックを活用して、ページのロード時にデータを取得すると便利です。

サンプルコード

例として、製品一覧を取得して表示するシンプルなコードを見てみましょう。


<template>
  <div>
    <h2>製品一覧</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const products = ref([]);

onMounted(async () => {
  try {
    const response = await axios.get("https://example.com/api/products");
    products.value = response.data;
  } catch (error) {
    // ここでエラーハンドリング
    console.error("データ取得時にエラーが発生しました。", error);
  }
});
</script>

とてもシンプルな形ですが、実務でも基本的な書き方は変わりません。あとは取得したデータの構造が複雑であれば、受け取った後に加工して表示を工夫するなどの手順が加わるだけです。

POSTリクエストでデータ送信

GETでの読み取りに加えて、フォームなどから入力されたデータをサーバーに送る場面も多いでしょう。たとえば会員登録やコメント投稿などの機能では、POSTリクエストが活躍します。

フォームをVue.jsで作成し、その入力をデータバインディングで管理したあとにAxiosを使って送信する流れが一般的です。フォーム送信後はレスポンスを見て、エラーの有無を表示したり、送信結果を画面に反映したりします。

フォーム送信の例

以下はユーザー登録をイメージしたコード例です。


<template>
  <form @submit.prevent="submitForm">
    <div>
      <label>ユーザー名</label>
      <input v-model="username" type="text" />
    </div>
    <div>
      <label>メールアドレス</label>
      <input v-model="email" type="email" />
    </div>
    <button type="submit">送信</button>
  </form>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";

const username = ref("");
const email = ref("");

const submitForm = async () => {
  try {
    const response = await axios.post("https://example.com/api/register", {
      username: username.value,
      email: email.value,
    });
    // 送信後の処理
    console.log("送信が完了しました。", response.data);
  } catch (error) {
    // エラーハンドリング
    console.error("送信時にエラーが発生しました。", error);
  }
};
</script>

v-modelを利用することで、入力内容とJavaScript側の変数が常に同期されます。 submitForm関数でaxios.postを実行し、入力されたデータをサーバーへ送ります。

エラーハンドリング

サーバー側で何らかの問題が起こっていたり、ネットワークが不安定だったりすると、HTTPリクエストは失敗します。こうした状況に備えて、エラー時の処理をしっかり書いておくことが重要です。

Axiosでは、.catch()やtry...catchを使うことでエラーオブジェクトを受け取れます。また、ステータスコードに応じた処理を分岐させることも多いです。


try {
  const response = await axios.get("https://example.com/api/data");
} catch (error) {
  if (error.response) {
    // サーバーからのレスポンスが返ってきたがエラーコードの場合
    console.error("ステータスコード:", error.response.status);
    console.error("エラーメッセージ:", error.response.data);
  } else if (error.request) {
    // リクエストは送信されたが応答がなかった場合
    console.error("サーバーからの応答がありません。", error.request);
  } else {
    // それ以外のエラー
    console.error("リクエスト設定時にエラーが発生しました。", error.message);
  }
}

このように、状況に応じて異なるエラーメッセージを表示することで、原因の特定やユーザーへの通知がスムーズになります。 APIの開発担当者と相談し、エラーコードやレスポンス内容を決めておけば、より的確なメッセージ表示が可能です。

リクエストとレスポンスのインターセプター

Axiosには、リクエストやレスポンスに対して共通の処理を挟み込むインターセプターという仕組みがあります。これを活用すると、リクエスト送信前にヘッダー情報を追加したり、レスポンスに対してログを出力したりするなど、横断的な機能をまとめることができます。

たとえば、認証情報をAPIに送りたい場合、インターセプターでトークンをヘッダーに付加すると、重複したコードを書く手間が減らせます。


import axios from "axios";

const instance = axios.create({
  baseURL: "https://example.com/api",
});

// リクエストインターセプター
instance.interceptors.request.use(
  (config) => {
    // 例として認証トークンを追加
    config.headers["Authorization"] = "Bearer YOUR_TOKEN";
    return config;
  },
  (error) => {
    // リクエストエラー
    return Promise.reject(error);
  }
);

// レスポンスインターセプター
instance.interceptors.response.use(
  (response) => {
    // 必要に応じてレスポンスデータを加工
    return response;
  },
  (error) => {
    // レスポンスエラー
    return Promise.reject(error);
  }
);

export default instance;

このように共通化したinstanceをコンポーネントでインポートして使うと、トークン付与やログ出力などを一元的に管理しやすくなります。

複数リクエストの同時処理

アプリケーションによっては、複数の異なるAPIを並行して呼び出し、すべての結果が揃った時点で画面を更新したいケースが出てきます。そうした場面ではPromise.allが役に立ちます。


<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const userData = ref(null);
const productData = ref(null);

onMounted(async () => {
  try {
    const [userResponse, productResponse] = await Promise.all([
      axios.get("https://example.com/api/users"),
      axios.get("https://example.com/api/products"),
    ]);
    userData.value = userResponse.data;
    productData.value = productResponse.data;
  } catch (error) {
    console.error("いずれかのデータ取得でエラーが発生しました。", error);
  }
});
</script>

Promise.allを利用すると、複数の非同期処理がすべて完了した後に結果をまとめて扱うことができます。一度の画面描画で複数種類のデータを同時に揃えたい場合は、こうした書き方が読みやすくなることが多いです。

サーバーの負荷やレスポンスの速度に注意しながら、必要に応じてAPIの呼び出しタイミングを調整することも大切です。

実務で気をつけたいポイント

Vue.jsとAxiosを使い始めると、データのやりとりがスムーズに行えるでしょう。ただ、アプリケーションが大規模になってくると、どこでデータを取得して、どこで状態を管理するのかが曖昧になるかもしれません。

状態管理ライブラリを導入し、APIを叩く処理を集約するケースもありますが、最初はコンポーネントごとに役割をはっきりさせるだけでも混乱を減らせます。また、エラー処理や認証トークンの管理が複雑になってきたら、インターセプターやグローバル設定を再検討するとよいでしょう。

APIが変更された場合は、フロントエンドの修正範囲も大きくなる可能性があります。開発チームの中でAPI仕様を共有し、変更点を早めに確認することが重要です。

まとめ

Vue.jsとAxiosを組み合わせると、ブラウザ上でのデータ処理や送信がシンプルに書けるようになります。初心者の方でも、GETやPOSTなどで具体的なHTTPリクエストを意識しやすいので、APIとの連携がイメージしやすくなるでしょう。

GETリクエストで取得したデータを画面に表示したり、POSTリクエストで入力フォームの情報をサーバーに渡すといった操作が基本的な流れです。加えて、エラーハンドリングやインターセプターを活用することで、より柔軟な処理や保守しやすい構成を整えることが可能になります。

Vue.jsでアプリケーションを構築する際には、Axiosをぜひ活用してみてはいかがでしょうか。