【Vue.js】axiosでJSONファイルを読み込む（酒が飲めるぞ！編）

Vue.jsシリーズの続きです。前回、Vue.jsのイベント、分岐、ループをやってみました。その中のループ（v-for）で外部JSONファイルを読み込めそうなので、ロジックとデータを分離してみましょう。チュートリアルを見ると「axios」という方法を推奨しているようです。

※参考：前回の記事
【Vue.js】イベント（v-on）、分岐（v-show、v-if）、ループ（v-for）をやってみた！ - クモのようにコツコツと

【目次】

Vue.jsのJSON読み込みはaxios
前回作ったVue.jsループ（v-for）
タイトル、曲名を外部JSONファイル化
axiosをCDNで読み込む
axiosでJSONファイルを読み込む
次回予告

Vue.jsのJSON読み込みはaxios

Vue.jsのチュートリアルを見ると、JSONファイルの読み込みは「axios」という方法を推奨している。

ウェブアプリケーションを構築するとき、 API からデータを取得して表示することがよくあります。これを行うにはいくつかの方法があり、一般的なアプローチは Promise ベースの HTTP クライアントの axios を使うことです。

※参考： axios を利用した API の使用 — Vue.js

前回作ったVue.jsループ（v-for）

前回作ったファイルはこちら

JSコードはこちら

var title = new Vue({
  el: '#title',
  data: {
    title: '日本全国酒飲み音頭'
  }
})

var sake = new Vue({
  el: '#sake',
  data: {
    sake: [
      "正月で",
      "豆まきで",
      "ひな祭りで",
      "花見で",
      "子供の日で",
      "田植えで",
      "七夕で",
      "暑いから",
      "台風で",
      "運動会で",
      "何でもないけど",
      "ドサクサで",
    ]
  }
})

変数titleにVueインスタンス作成
#titleエレメントと紐付け
dataのtitleの文字列を読み込む
変数sakeにVueインスタンス作成
#sakeエレメントと紐付け
dataのsakeの配列を読み込む

このJSの見た目JSON形式によく似ているので、外部JSONファイル化したい。ロジックとデータの分離。

タイトル、曲名を外部JSONファイル化

JSONファイル化するとこうなります。

  {
    "title":  "日本全国酒飲み音頭",
    "sake":  [
      "正月で",
      "豆まきで",
      "ひな祭りで",
      "花見で",
      "子供の日で",
      "田植えで",
      "七夕で",
      "暑いから",
      "台風で",
      "運動会で",
      "何でもないけど",
      "ドサクサで",
    ]
  }

変数名は無しで、キー名の部分もコーテーション" "で囲います。

※参考：JSONについてはこちら
【JSON】外部JSONファイル化したはっぴいえんどアルバム情報をFetch APIでDOMに読み込む - クモのようにコツコツと

axiosをCDNで読み込む

axiosは外部ファイルとしてCDNから読み込む必要があります。Vue.jsと同じ要領でJSの設定画面から読み込みましょう。

f:id:idr_zz:20181106211623j:plain

JSの歯車をクリック
検索窓で「axios」と検索
CDNのURLが出るので選択

さあ準備完了です！

axiosでJSONファイルを読み込む

まずはチュートリアルと同じコードを入れてみます。

頭にHTMLを追加

<div id="app">
  {{ info }}
</div>

id名#app
タグの中に二重波括弧{{ }}でinfoと入れる

JSはこちら

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get(url) //ここにURLを入れる
      .then(response => (this.info = response))
  }
})