【Vue.js】非同期データの取得と表示|AxiosでAPIからJSONを読み込む基本パターン

【Vue.js】非同期データの取得と表示|AxiosでAPIからJSONを読み込む基本パターン Vue.js

Vue.jsで非同期データを扱う必要性

現代のフロントエンドアプリでは、外部のAPIサーバーからデータを取得して表示するケースが一般的です。Vue.jsでも、HTTPクライアントであるAxiosを使って簡単に非同期通信を実装することができます。この記事では、APIからJSON形式のデータを取得し、それをVueコンポーネント内で表示する基本的な流れを紹介します。

Axiosのインストールと基本設定

まずはAxiosをプロジェクトに導入します。Vue CLIで作成したプロジェクトであれば、以下のコマンドでインストールできます。

npm install axios

次に、Vueファイル内でAxiosをインポートして使えるようにします。

import axios from 'axios';

非同期データの取得方法

Vueコンポーネントのライフサイクルフックである`mounted()`を使って、コンポーネントが描画されたタイミングでデータを取得します。


export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        console.error('データ取得に失敗しました:', error);
      });
  }
};

取得したデータの表示

`data`に格納した`posts`を`v-for`ディレクティブでループ表示すれば、APIから取得した内容をテンプレート上に簡単に反映できます。


<ul>
  <li v-for="post in posts" :key="post.id">
    {{ post.title }}
  </li>
</ul>

エラー処理とローディング表示の実装

実際の開発では、ローディング中やエラー時のユーザー体験も考慮する必要があります。以下のように状態管理用のデータプロパティを追加して、状態に応じた表示を制御します。


data() {
  return {
    posts: [],
    loading: true,
    error: null
  };
},
mounted() {
  axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      this.posts = response.data;
    })
    .catch(error => {
      this.error = error.message;
    })
    .finally(() => {
      this.loading = false;
    });
}

テンプレート側では以下のように表示を分岐させます。


<div v-if="loading">読み込み中...</div>
<div v-else-if="error">エラー: {{ error }}</div>
<ul v-else>
  <li v-for="post in posts" :key="post.id">
    {{ post.title }}
  </li>
</ul>

まとめ

Vue.jsではAxiosを使うことで、簡潔にAPIとの非同期通信を実現できます。`mounted()`でのデータ取得、状態管理、テンプレートへの反映までの流れを理解すれば、リアルタイムでデータを扱うアプリケーションの基礎が身につきます。今後は、VuexやComposition APIとの組み合わせも検討して、さらに柔軟な設計へと発展させていきましょう。