上級者向け：Vue.jsでMock.jsを利用するガイド

Mock.jsは、JavaScriptのフロントエンド開発において、APIのテストや開発の際に偽のデータを生成するためのライブラリです。これにより、APIの開発が完了するまで待たずに、いち早くデータの検証や様々なテストに移ることができます。それゆえ、Vueプロジェクトの中で、Mock.jsを導入する必要がある場面がよくあります。

本文では、Vue.jsでMock.jsを利用するために、ステップバイステップの詳細ガイドを皆さんに紹介します。

Vueプロジェクトの中でMock.jsを使用するために、一般的に2つの方法があります。

クライアントでAjaxを遮断：Mock.jsを使用してAjaxのリクエストを遮断し、Mock.jsが生成したランダムなデータを返す。
サーバー側でMockデータを返す：バックエンド開発者がAPIの開発を完了する前に、Mock.jsが生成したランダムなデータを返す。

次は、以上の2つの方法を1つずつ詳しく説明していきます。

方法1：クライアントでAjaxを遮断

Mock.jsを使用するには、まずはそれをインストールする必要があります。次のコマンドでインストールできます。

npm install mockjs --save

Mock.mock(url, template) を使って、 Ajaxのリクエストを遮断し、データを返すことができます。 urlにマッチするAjaxのリクエストを遮断する場合、データテンプレートのtemplateに従って仮想データを生成し、レスポンスのデータとして返します。マッチするクリエストを遮断しない場合、正常にAPIを呼び出しするようになります。

例えば、 API /user/listを呼び出しするときに、ユーザーリストのデータをランダムに返す：

import Mock from 'mockjs'
Mock.mock('/user/list', {
    // プロパティ list の値は配列になり、 1 から 10 この要素が含まれる
    'list|1-10': [{
        'id|+1': 1, // id は 1 から自己増加
        'name': '@name', // ランダムの名前
        'age|15-25': 1,  // 15～25のランダムの数
        'city': '@county(true)' // ランダムの都市名
    }]
})

APIを呼び出しすると、戻り値が次のようになります：

{
"list": [
{
"id": 1,
"name": "Susan Smith",
"age": 20,
"city": "New York City, New York"
},
{
"id": 2,
"name": "Emily Johnson",
"age": 24,
"city": "Los Angeles, California"
},
{
"id": 3,
"name": "Andrew Davis",
"age": 25,
"city": "Chicago, Illinois"
}
]
}

もちろん、たまにモックの利用シーンが複雑である場合があります。例えば：APIのパラメータによって、データを動的に返す必要があります。ここで、 Mock.mock(url, function( options))を利用できます。 url にマッチするものを遮断する場合、関数の function(options)が実行され、その結果がレスポンスのデータとして返されます。その中、関数のプラメータの optionsは、このリクエストの Ajax選択肢の集合を指し、 url、type と bodyといった3つのプロパティが含まれています。詳しくは XMLHttpRequestの標準ガイドラインでご参照ください。

同じurlの違うメソッドにマッチしたい場合、Mock.mock(url, method，function( options))を利用できます。２番目のパラメータがmethodです。urlと methodにも同時にマッチする場合、遮断が有効になります。

方法2: サーバー側でMockデータを返す

ここのサーバー側は Node.jsになります。 Node.jsは容易にインスールできるので、インストールファイルは(ここ)をクリックして取得できるので、詳しく説明しないようにします。

サーバー側はAPIリクエストを処理： Node.jsに基づくWebフレームワークの Expressを使用します。

インストール：

$ npm install express --save

リクエストを処理し、Mockデータを返す：

const express = require('express')
const Mock = require('mockjs')

const app = express()

const useMock = true
app.get('/user/list', (req, res) => {
  if (useMock) {
    const list = Mock.mock({
        'list|1-10': [{
            'id|+1': 1, // id は 1 から自己増加。
            'name': '@cname', // ランダムの名前
            'age|15-25': 1,  // 15～25 のランダムの数
            'city': '@county(true)' // ランダムの都市名
        }]
    })
    res.send(list)
    return
  }
  // ...res.send(業務ロジックは正常に返すデータ)
})

当該APIを呼び出しすると、戻り値が方法１のものと同じようになります。

APIのパラメータによってデータを動的に返すシナリオを処理するには、上記のコードのルーティング関数にロジックを追加すればいいです。リクエストの情報は req オブジェクトで取得できます。

同じurlの違うメソッドを処理するには、違うルーティングを追加すればいいです。上記のコードは、メソッドがGETになっているリクエストにのみマッチします。

まとめ

以上の内容は、VueプロジェクトでMock.jsを利用できる2つの方法を皆さんに紹介しました。方法１のメリットは簡単な使い方にあり、方法２のメリットはより高い柔軟性とフロントエンドコードへの低い侵入性にありますが、Node.jsに関する知識をある程度必要となります。

button

また、APIモックを実現するには、簡単な方法があります。それは、強力のAPI管理ツールのApidogを使うことです。Apidogには、非常に強力的なMockサーバーが内蔵されており、数クリックだけで、真実みたいなデータを生成することができます。Apidogの素晴らしいモック機能を使うことで、ソフトの品質を向上しなら、開発者の効率をも大幅に上げられます。