0%

Programmingプログラミングナレッジ

Posted:2019.09.05

Vue-CLIのプロジェクトでaxiosを使ってAPIや外部リソースからのデータを取得する

webアプリケーションを作成するときに、APIなどからデータを取得するなどの要件が含まれることもあるかと思います。今回はVueのプロジェクトをVue-CLIを使って開発するときにAPIからデータを取得する例をまとめていきたいと思います。

 

VueのプロジェクトでAPIにアクセスする場合には「axios」と呼ばれるものを使います。axiosはブラウザ上やnode.jsで動くHTTPクライアントで、APIへの連携が簡単に実装することができます。axiosはモジュールとして提供されているので、下記のようにnpmもしくはyarn経由でnode_modulesにインストールします。

$ npm install axios
 or
$ yarn add axios

 

インストールするとこのようにpackage.jsonに追加されます。

【package.json】※一部抜粋

{
 "dependencies": {
  .......
  "axios": "^0.18.0",
  .......
 },
}

 

今回はaxiosでJSON形式の外部データを取得し、それをstateの値に入れてテンプレート内で出力するというのを例にします。ですので、store.jsにaxiosをインポートしてから使います。ここではstateの値を初期値として設定し、mutationsとactionsを定義し、gettersでstateの値を取得できるようにしています。

【store.js】

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  dataSet: {}
 },
 mutations: {
  mutateDataSet(state, payload) {
   state.dataSet = payload;
  }
 },
 actions: {
  commitDataSet(store) {
   return axios.get('./data/sample.json')
    .then(response => {
     store.commit('mutateDataSet', response.data)
    })
    .catch((reason) => {
     console.log(reason.message)
    })
  }
 },
 getters: {
  getStateDataSet: (state) => state.dataSet
 }
})

 

axiosはactions内で使われています。axiosに続くget()メソッドの引数に外部データのパスを指定することでデータを取得できます。axiosはPromiseベースになっているので、then()メソッドで繋いで値を取得します。引数にはコールバック関数によりmutations経由でstateに取得した値を代入するようにしていきます。その後にはcatch()メソッドで取得が失敗した場合の処理を付け足しています。

 

また今回サンプルに使ったJSONデータはこちらのような形になります。Vue-CLIの場合ではビルドに含めないファイルはpublicフォルダに入れておきます。

【/public/sample.json】

[
 {
  "id": 1,
  "name": "りんご",
  "price": "100円"
 },
 {
  "id": 2,
  "name": "みかん",
  "price": "50円"
 },
 {
  "id": 3,
  "name": "ぶどう",
  "price": "400円"
 }
]

 

そしてVueのコンポーネントファイル内で、取得したデータを扱っていきます。下記のようにcreated内で、storeにアクセスして、dispatch()メソッドで定義したactionsを実行します。

【Vue】※一部抜粋

<script>
export default {
 .......
 created() {
  this.$store.dispatch('commitDataSet')
 }
 .......
}
</script>

 

ブラウザのデベロッパーツールで確認すると、実際に取得した外部リソースのデータがmutations経由でstateに値として入っているのが確認できます。

Vue-CLIのプロジェクトでaxiosを使ってAPIや外部リソースからのデータを取得する

 

もちろんstateに入ったデータは、テンプレート内で出力することもできます。ここではcomputed内でgettersでstateの値を取得し、テンプレート内に出力しています。

【Vue】※一部抜粋

<template>
 <div id="app">
  <pre>{{ dataOutput }}</pre>
 </div>
</template>
<script>
export default {
 .......
 computed: {
  dataOutput() {
   return this.$store.getters.getStateDataSet
  }
 },
 created() {
  this.$store.dispatch('commitDataSet')
 }
 .......
}
</script>

 

実際にブラウザで確認するとこのように値が取得できているのが確認できます。

Vue-CLIのプロジェクトでaxiosを使ってAPIや外部リソースからのデータを取得する

上記は外部リソースの静的ファイルにあるデータから値を取得する例ですが、axiosを使うことで、API経由でデータを取得することができます。先ほどと同じようにactions内でget()メソッドにAPIのアクセス先となるURLを指定します。

【store.js】※一部抜粋

.......
actions: {
 commitDataSet(store) {
  return axios.get('https://example.com/api/')
   .then(response => {
    store.commit('mutateDataSet', response.data)
   })
   .catch((reason) => {
    console.log(reason.message)
   })
 }
},
.......

 

ここではWordPressのREST APIをサンプルとして使ってみました。同じ要領で取得したデータをstateの値に入っていることが確認できます。

Vue-CLIのプロジェクトでaxiosを使ってAPIや外部リソースからのデータを取得する

 

テンプレート内にデータを展開することも可能です。このようにすることで、外部のAPI経由で取得したデータをフロント側で加工し、ウェブページ上で見せるような仕組みを作ることができます。

Vue-CLIのプロジェクトでaxiosを使ってAPIや外部リソースからのデータを取得する

 


 

WordPressなどのCMSに限らず、データベースからAPI経由で情報を取得して、フロント側で扱うなどの場合にはaxiosを使うととても便利ですね。Vue.jsでウェブアプリケーションを作成する場合には必須の機能と言えるのではないでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】