クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

【Vue.js】axiosでJSONファイルを読み込む(酒が飲めるぞ!編-1)

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

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

【目次】

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エレメントと紐付け
  • datatitleの文字列を読み込む
  • 変数sakeにVueインスタンス作成
  • #sakeエレメントと紐付け
  • datasakeの配列を読み込む

この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))
  }
})
  • Vueインスタンス作成
  • #app"エレメントと紐付け *mounted()インスタンスが配置(マウント)された後に実行
  • axiosを呼び出す
  • .get(url)のURLにアクセス
  • .then()の中でinfoに返す(レスポンス)

=>はアロー関数でfunctionと同じです。 mounted()は新しく知ったメソッドでした。こちらを参照。

※参考: Vue.jsのライフサイクルメモ - Qiita

実行するとこうなりました。

おお!読み込めた!このテキスト、確かにJSファイル内にはない、外部のJSONファイルからのテキストです!

しかし、なんだか後ろの方にいろいろな情報が付け足されてますね。。バックスラッシュみたいのもなんざんしょこれは?

次回予告

次回は下の部分と合体させたい。JSONデータの中から任意の項目を抜き出したり、曲名をv-forループに回してみたい。