Vue – JSON データを静的、動的に読み込む方法

概要

Vue を使ったアプリケーションで JSON データを静的、動的に読み込む方法について解説します。

静的に読み込む方法

静的に読み込むとは

静的に読み込むとは、assets ディレクトリに配置した .json ファイルを import 文で読み込むことを指します。assets ディレクトリに配置されたデータはコンパイルで生成されるファイルに含まれます。

1. .json ファイルを assets ディレクトリに配置する

ディレクトリ構造は vue-cli で生成したもので、以下であるとします。 assets ディレクトリに読み込みたい json ファイルを配置します。

├─ .gitignore
├─ babel.config.js
├─ jsconfig.json
├─ LICENSE
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  ├─ components
│  └─ main.js
└─ vue.config.js

2. json ファイルをインポートする

使用したい .vue ファイル内で .json ファイルを import します。

import jsonData from "../assets/data.json";

Template から参照できるようにしたい場合は、読み込んだオブジェクトを data プロパティに登録します。

data() {
return {
  jsonData: jsonData
};
},

動的に切り替えたい場合

予め、両方の JSON データを読み込んでおき、クリック時のイベントなどで切り替えます。

App.vue

<template>
  <div id="app">
    <section>
      <input
        type="radio"
        v-model="jsonName"
        value="data1"
        @change="loadJson"
      />json1
      <input
        type="radio"
        v-model="jsonName"
        value="data2"
        @change="loadJson"
      />json2
      <br />
      <span>name: {{ jsonName }}</span>
      <br />
      <span>content: {{ jsonContent }}</span>
    </section>
  </div>
</template>

<script>
import json1 from "../assets/data1.json";
import json2 from "../assets/data2.json";

export default {
  name: "App",

  data() {
    return {
      jsonName: null,
      jsonContent: null,
    };
  },

  methods: {
    loadJson() {
      if (this.jsonName == "data1") {
        this.jsonContent = json1;
      } else if (this.jsonName == "data2") {
        this.jsonContent = json2;
      }
    },
  },
};
</script>

動的に読み込む方法

動的に読み込むとは

動的に読み込むとは、public ディレクトリに配置した .json ファイルを、Javascript が実行された際にその場で読み込むことをいいます。今回は axios で取得する方法を紹介します。

1. .json ファイルを public ディレクトリに配置する

ディレクトリ構造は vue-cli で生成したもので、以下であるとします。 public ディレクトリに読み込みたい json ファイルを配置します。

├─ .gitignore
├─ babel.config.js
├─ jsconfig.json
├─ LICENSE
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  ├─ components
│  └─ main.js
└─ vue.config.js

2. axios、vue-axios をインストールする

データ取得は HTTP 通信で行います。 HTTP クライアントである axios 及びそれを Vue から利用するためのプラグイン vue-axios をインストールします。

npm install i axios vue-axios

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

これですべてのファイルから、this.axios で axios の API にアクセスできるようになります。

3. json ファイルを取得する

使用したい .vue ファイル内で .json ファイルを import します。

import jsonData from "../assets/data.json";

Template から参照できるようにしたい場合は、読み込んだオブジェクトを data プロパティに登録します。

data() {
return {
  jsonData: jsonData
};
},

4. axios でデータを読み込む

axios.get() で public ディレクトリに配置した .json ファイルを読み込みます。 初期時に読み込みたい場合は mounted() に記載します。/ は public ディレクトリのルートを表しますので、そこからのパスで指定します。

App.vue

data() {
  return {
    jsonContent: null,
  };
},

mounted: function () {
  this.axios
    .get("/data.json")
    .then((res) => (this.jsonContent = res.data));
},

動的に切り替えたい場合

クリック時のイベントなどに起因して、動的に読み込むこともできます。

App.vue

<template>
  <div id="app">
    <section>
      <input
        type="radio"
        v-model="jsonName"
        value="data1"
        @change="loadJson"
      />json1
      <input
        type="radio"
        v-model="jsonName"
        value="data2"
        @change="loadJson"
      />json2
      <br />
      <span>name: {{ jsonName }}</span>
      <br />
      <span>content: {{ jsonContent }}</span>
    </section>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      jsonName: null,
      jsonContent: null,
    };
  },

  methods: {
    loadJson() {
      if (this.jsonName == "data1") {
        this.axios
          .get("/data1.json")
          .then((res) => (this.jsonContent = res.data));
      } else if (this.jsonName == "data2") {
        this.axios
          .get("/data2.json")
          .then((res) => (this.jsonContent = res.data));
      }
    },
  },
};
</script>