Vue 3でAPI連携！fetchとAxiosの使い方

その他

はじめに

Vue 3 では、API と連携してデータを取得し、動的なアプリケーションを構築することができます。
本記事では、Vue 3 で API からデータを取得する基本的な方法を、初心者向けにわかりやすく解説します。具体的には、fetch API と Axios という2つの手法を使い、API からデータを取得して画面に表示する方法を説明します。また、データの取得中に「ローディング中」のメッセージを表示する方法や、エラーが発生した場合の対処方法についても解説します。

Vue で API 通信を行う方法

Vue で API からデータを取得する一般的な方法として、fetch と Axios の2つが挙げられます。

fetch と Axios の違いと選び方

比較項目fetchAxios
標準サポートブラウザ組み込み外部ライブラリが必要
JSON の自動変換必要（response.json()）自動変換あり
エラーハンドリングcatch を明示的に実装ステータスコードに応じたエラーハンドリングが可能
追加機能なしタイムアウト設定、リクエスト・レスポンスのインターセプターあり

シンプルな用途なら fetchより機能が充実した方法を使いたい場合は Axios を選ぶと良いでしょう。

fetch を使った API リクエスト

まずは fetch を使って API からデータを取得する方法を解説します。

基本的な fetch の使い方

fetch は JavaScript に組み込まれている API で、HTTP リクエストを送信し、サーバーからデータを取得するのに使われます。非同期処理（async/await）を利用することで、シンプルにデータを取得できます。

以下のコードでは、JSONPlaceholder というテスト用の無料 API からデータを取得し、Vue のテンプレートに表示する方法を解説します。

コードの詳細な説明

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

const posts = ref([]);
const isLoading = ref(true);
const errorMessage = ref('');

onMounted(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('データの取得に失敗しました');
    }
    posts.value = await response.json();
  } catch (error) {
    errorMessage.value = error.message;
  } finally {
    isLoading.value = false;
  }
});
</script>

<template>
  <div v-if="isLoading">読み込み中...</div>
  <div v-else-if="errorMessage">エラー: {{ errorMessage }}</div>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>
Vue 3 の Composition API を使ったデータ管理
<script setup>
import { ref, onMounted } from 'vue';
const posts = ref([]);
const isLoading = ref(true);
const errorMessage = ref('');
  • ref([]) → posts というリアクティブな変数（リスト）を作成し、API から取得したデータを格納する
  • ref(true) → isLoading を定義し、データ取得中かどうかを管理する
  • ref('') → errorMessage を定義し、エラーメッセージを保存する
  • onMounted() → Vue コンポーネントがマウントされた（表示された）タイミングで API リクエストを実行する
fetch を使ったデータ取得
onMounted(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('データの取得に失敗しました');
    }
    posts.value = await response.json();
  } catch (error) {
    errorMessage.value = error.message;
  } finally {
    isLoading.value = false;
  }
});
  • fetch(url) を使って API へリクエストを送信
  • await response.json() でレスポンスデータを JSON に変換し、posts.value に格納
  • エラーハンドリング
    • if (!response.ok) を使い、HTTP ステータスコードが 200 OK でない場合にエラーを投げる
    • catch ブロックでエラーが発生した場合に errorMessage.value にエラー内容を格納
  • finally を使ったローディング状態の管理
    • データの取得が成功・失敗に関係なく、処理が終わったら isLoading.value = false に設定
Vue のテンプレートでデータを表示
<template>
  <div v-if="isLoading">読み込み中...</div>
  <div v-else-if="errorMessage">エラー: {{ errorMessage }}</div>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>
  • v-if="isLoading" → データ取得中は「読み込み中…」と表示
  • v-else-if="errorMessage" → エラーが発生した場合はエラーメッセージを表示
  • v-else → 取得したデータを v-for を使ってリスト表示

補足: fetch で POST リクエストを送る方法

データを取得するだけでなく、API にデータを送信する場合もあります。例えば、以下のように fetch を使って POST リクエストを送ることができます。

const createPost = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        title: '新しい投稿',
        body: '投稿の内容',
        userId: 1
      })
    });

    const newPost = await response.json();
    posts.value.unshift(newPost); // 新しい投稿をリストの先頭に追加
  } catch (error) {
    errorMessage.value = '投稿に失敗しました';
  }
};

Axios を使った API リクエスト（Vue での推奨方法）

Vue 3 で API からデータを取得する方法として、fetch に加えて Axios というライブラリを使用する方法があります。Axios は、より直感的なシンタックスを提供し、エラーハンドリングやリクエストの設定が簡単になるため、Vue 開発で推奨されています。

まずはインストールを行います。

npm install axios

Vue で Axios を使ったデータ取得

以下のコードでは、JSONPlaceholder の posts API からデータを取得し、Vue コンポーネントに表示します。

コードの詳細な解説

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

const posts = ref([]);          // API から取得する投稿データ
const isLoading = ref(true);    // データ取得中かどうかを管理
const errorMessage = ref('');   // エラーメッセージを格納

onMounted(async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    posts.value = response.data; // API レスポンスのデータを Vue の ref に格納
  } catch (error) {
    errorMessage.value = 'データの取得に失敗しました'; // エラー時にメッセージを設定
  } finally {
    isLoading.value = false; // 処理が終わったらローディングを終了
  }
});
</script>

<template>
  <div v-if="isLoading">読み込み中...</div>
  <div v-else-if="errorMessage">エラー: {{ errorMessage }}</div>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>
onMounted() を使った API リクエスト
onMounted(async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    posts.value = response.data;
  } catch (error) {
    errorMessage.value = 'データの取得に失敗しました';
  } finally {
    isLoading.value = false;
  }
});
  • onMounted() を使用
    • コンポーネントがマウントされたときに API を呼び出す。
    • Vue では、コンポーネントのライフサイクルフックを利用して非同期処理を実行できる。
  • axios.get(url) で API にリクエストを送信
    • fetch と異なり、レスポンスを response.data で簡単に取得できる。
  • エラーハンドリング
    • try-catch ブロックでリクエストエラーをキャッチし、エラーメッセージを errorMessage.value に格納。
  • ローディング管理
    • isLoading.value = true で初期状態をロード中に設定。
    • API リクエストが終わったら finally ブロックで isLoading.value = false に変更。
テンプレート内でデータの表示
<template>
  <div v-if="isLoading">読み込み中...</div>
  <div v-else-if="errorMessage">エラー: {{ errorMessage }}</div>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>
  • v-if="isLoading" → データ取得中は「読み込み中…」と表示。
  • v-else-if="errorMessage" → エラー発生時はエラーメッセージを表示。
  • v-else → posts のリストを表示。

Axios の応用

グローバル設定

複数の API を利用する場合、axios.create() で 共通設定 を定義できます。

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 5000 // タイムアウト設定（5秒）
});
  • baseURL を設定 すると、apiClient.get('/posts') のように短く書ける。
  • timeout を設定 すると、レスポンスが遅すぎる場合にエラーを出せる。

POST リクエスト（データ送信）

新しい投稿を追加する場合

const createPost = async () => {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: '新しい投稿',
      body: '投稿の内容',
      userId: 1
    });

    posts.value.unshift(response.data);
  } catch (error) {
    errorMessage.value = '投稿に失敗しました';
  }
};
  • axios.post(url, data) で簡単にデータを送信できる。

エラーハンドリングの改善

onMounted(async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    posts.value = response.data;
  } catch (error) {
    if (error.response) {
      errorMessage.value = `エラー: ${error.response.status} ${error.response.statusText}`;
    } else {
      errorMessage.value = 'ネットワークエラー';
    }
  } finally {
    isLoading.value = false;
  }
});
  • error.response で HTTP ステータスコードを確認 し、適切なメッセージを表示。

まとめ

  • fetch と Axios を使った API 通信の基本を学んだ
  • 非同期処理（async/await） を活用し、データ取得・表示の方法を実装した
  • エラーハンドリングとローディング管理 を追加して、実用的な API 連携アプリを作成した

Vue 3 の API 連携はシンプルながら強力です。ぜひ実践しながら理解を深めてください！

スポンサーリンク

コメント

タイトルとURLをコピーしました