上級者向け：Vue.jsでMock.jsを利用するガイド
Vueプロジェクトの中で、Mock.jsを導入する必要がある場面がよくあります。本文では、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に関する知識をある程度必要となります。
また、APIモックを実現するには、簡単な方法があります。それは、強力のAPI管理ツールのApidogを使うことです。Apidogには、非常に強力的なMockサーバーが内蔵されており、数クリックだけで、真実みたいなデータを生成することができます。Apidogの素晴らしいモック機能を使うことで、ソフトの品質を向上しなら、開発者の効率をも大幅に上げられます。
