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との組み合わせも検討して、さらに柔軟な設計へと発展させていきましょう。