開発用にMirageを使ってVueアプリをセットアップする

バックエンドサービスなしでVueアプリを開発できるように、Vueアプリのネットワーキングコードをモックします。

これはMirageに慣れている人向けのクイックスタートガイドです。Mirageを初めて使用する場合は、概要をご覧ください。

ステップ1: Mirageをインストールする

まず、Mirageがインストールされていることを確認してください

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

ステップ2: サーバーを定義する

新しいserver.jsファイルを作成し、モックサーバーを定義します。

基本的な例を次に示します。

// src/server.js
import { createServer, Model } from "miragejs"

export function makeServer({ environment = "development" } = {}) {
  let server = createServer({
    environment,

    models: {
      user: Model,
    },

    seeds(server) {
      server.create("user", { name: "Bob" })
      server.create("user", { name: "Alice" })
    },

    routes() {
      this.namespace = "api"

      this.get("/users", (schema) => {
        return schema.users.all()
      })
    },
  })

  return server
}

Vue CLIでは、このファイルをsrc/server.jsに配置して、変更が再構築をトリガーするようにします。

ステップ3: 開発環境でサーバーを使用する

Vueアプリのブートストラップファイル（Vue CLIではsrc/main.js）を開き、makeServer関数をインポートし、開発環境で呼び出します。

// src/main.js
import Vue from "vue"
import App from "./App.vue"
import { makeServer } from "./server"

Vue.config.productionTip = false

if (process.env.NODE_ENV === "development") {
  makeServer()
}

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

これで、アプリケーションが開発中にネットワークリクエストを行うたびに、Mirageがそのリクエストをインターセプトし、サーバー定義のデータで応答します。

たとえば、上記のサーバー定義が与えられた場合、次のコンポーネントは、seedsで定義したユーザーBobとAliceを取得します。

<!-- src/App.vue -->
<template>
  <ul id="users">
    <li v-for="user in users" v-bind:key="user.id">{{ user.name }}</li>
  </ul>
</template>

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

    data() {
      return {
        users: [],
      }
    },

    created() {
      fetch("/api/users")
        .then((res) => res.json())
        .then((json) => {
          this.users = json.users
        })
    },
  }
</script>

これで、Mirageを使用してバックエンドAPIエンドポイントをモックしながら、Vueアプリの開発を続けることができます。

Vue Test Utils