本文では、Mock.jsの使い方と導入事例を紹介します。本文のガイドを参照して、Mock.jsを使って、無料でモックアップを行うことができます。
Mock.jsとは
Mock.jsは、JavaScriptのフロントエンド開発において、APIのテストや開発の際に偽のデータを生成するためのライブラリです。Mock.jsは、ランダムなデータを生成するためのさまざまなメソッドを提供し、HTTPリクエストのシミュレーションやJSONデータの生成に役立ちます。
Mock.jsは、簡単に使用でき、豊富な機能を持つため、フロントエンド開発において広く使われています。また、データの検証やビジュアルテストにも利用できます。
Mock.jsは、GitHubでオープンソースとして公開されており、誰でも無料で利用することができます。
Mock.jsの文法と構文の解説
Mock.jsの文法について、次のように２部分に分けられています。
- データテンプレートの定義（Data Template Definition，DTD）
- データプレースホルダーの定義（Data Placeholder Definition，DPD）
次は、この2つの部分を1つずつ紹介します。
データテンプレートの定義（DTD）
データテンプレートのプロパティには、3つの要素があります：プロパティ名、生成ルールとプロパティ値
'name|rule': value
nameはプロパティ名になり、ruleは生成ルールになり、 valueはプロパティ値になります。
**ご案内：**生成ルールはプロパティ値に関連する概念です。つまり、同じ生成ルールが異なるプロパティ値のタイプに対して、意義が異なる可能性があります。
次は、違うプロパティ値のタイプに基づいて、文法を解説していきます。
プロパティ値が文字列型（string）
'name|min-max': string
stringを繰り返すことで文字列を生成します。繰り返し回数は大なりイコールmin、小なりイコール maxです。例えば、star という文字列を2−5回で繰り返したい場合：
Mock.mock({
'content|2-5': 'star'
})
// => {content: 'starstarstar'}
⒉**'name|count': string**
stringを繰り返すことで文字列を生成します。繰り返し回数はcountになります。例えば、star という文字列を5回で繰り返したい場合：
Mock.mock({
'content|5': 'star'
})
// => {content: 'starstarstarstarstar'}
プロパティ値のタイプが数字（Number）
⒈'name|+1': number
プロパティ値は自動的に1を加算し、初期値はnumberです。これはデータリストの生成に合わせて使用する必要があります。例えば、idの自己増加の配列を生成します：
Mock.mock({
// プロパティ list の値が配列であり、その中に1−10個の要素がある
'list|1-10': [{
'id|+1': 1, // id は 1 から自己増加
}]
})
// => [{id: 1, {id: 2}, {id: 3}]
⒉'name|min-max': number
大なりイコール min、小なりイコール maxの整数を生成します、プロパティ値の numberはタイプを指定するだけです。例えば、10 ～ 100 の整数を生成します：
Mock.mock({
'count|10-100': 1
})
// => {count: 72}
⒊'name|min-max.dmin-dmax': number
浮動小数点数を生成し、整数部は大なりイコールmin、小数部は小なりイコールmaxで、小数点以下はdmin〜dmax桁を保持します。例えば、10～100を生成し、下から1～2桁を小数点以下と決められる場合：
Mock.mock({
'count|10-100.1-2': 1.1
})
// => {count: 13.18}
プロパティ値がブール型
⒈'name|1': boolean
ランダムにブール値が生成され、値がtrueの確率は1/2で、値がfalseの確率も1/2です。例えば：
Mock.mock({
'value|1': true
})
// => {value: true}
⒉'name|min-max': value
ランダムにブール値が生成され、値がvalueの確率はmin / (min + max)で、値は!Valueの確率はmax / (min + max)です。例えば、trueになる確率が20％になるプール値を生成する場合：
Mock.mock({
'value|1-4': true
})
// => {value: false}
プロパティ値がオブジェクト
⒈'name|count': object
プロパティの objectからランダムに count個のプロパティを選択します。例えば：
Mock.mock({
'info|1': {id: 1, name: '中山', phone: '090xxxx', email: 'joel@xx.com'}
})
// => {info: {phone: '090xxxx'}}
⒉'name|min-max': object
プロパティの objectからランダムに min から max 個のプロパティを選択します。例えば：
Mock.mock({
'info|1-3': {id: 1, name: '中山', phone: '090xxxx', email: 'joel@xx.com'}
})
// => {info: {phone: '090xxxx', name: '中山' }}
パロパティ値が配列
⒈'name|1': array
パロパティ値の arrayからランダムに1つの要素を選択して最終値とします。例えば：
Mock.mock({
'info|1': [1, 2, 3, 4, 5]
})
// => {info: 2}
⒉'name|+1': array
パロパティ値の arrayから順番に1つの要素を選択して最終値とします。例えば：
const arr = [1, 2, 3, 4, 5]
Mock.mock({
'list|1-3': [{
'value|+1': arr, // id は 1 から自己増加。
}]
})
// => {list: [{value: 1}, {value: 2}]}
⒊'name|min-max': array
プロパティ値のarrayを繰り返すことで新しい配列を生成します。繰り返し回数は大なりイコール minで、小なりイコール maxです。例えば：
const arr = [1, 2, 3]
Mock.mock({
'list|1-6': arr
})
// => {list: [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3]}
⒋'name|count': array
プロパティ値のarrayを繰り返すことで新しい配列を生成します。繰り返し回数はcountです。例えば：
const arr = [1, 2, 3]
Mock.mock({
'list|2': arr
})
// => {list: [1, 2, 3, 1, 2, 3]}
プロパティ値が関数
'name': function
関数の functionを実行して、その戻り値を最終のプロパティ値とします。関数の文脈はプロパティ nameの所在のオブジェクトになります。例えば：
Mock.mock({
'name': () => '中山'
})
// => {name: '中山'}
プロパティ値が正規表現
'name': regexp
正規表現 regexpによって、それにマッチできる文字列を逆生成します。カスタムフォーマットの文字列を生成するために使用されます。例えば、数字やアルファベットを含む6桁のランダムの文字列を生成する場合：
Mock.mock({
'str': /[0-9a-zA-Z]{6}/
})
// => {str: 'p2otzf'}
データプレースホルダーの定義（DPD）
データプレースホルダーは、プロパティ値の文字列の中で位置を占める役割を果たしていて、最終のプロパティ値には現れません。
データプレースホルダーのフォーマットは：
@データプレースホルダー
@データプレースホルダー(パラメータ [, パラメータ])
データプレースホルダーは、 Mock.Random の方法、若しくはデータテンプレートのプロパティを参照しています。データテンプレートのプロパティは、Mock.Randomとの名前が重複している場合、データテンプレート中のプロパティが優先されます。例えば：
Mock.mock({
name: {
first: '@FIRST',
last: '@LAST',
full: '@first @last'
}
})
// => {name: {first: 'Cynthia', last: 'Williams', full: 'Cynthia Williams'}}
上記のコード中に、パロパティの firstとlastは別々に Mock.Random.first()と Mock.Random.last()を参照しています。full はデータテンプレートのプロパティを参照しています。
ここでMock.jsの構文と文法を詳しく紹介しました。次は、実際にMock.jsを使って無料でモックアップを作る方法を皆さんに紹介します。
Mock.jsを使って無料でモックアップを
実際に、Mock.jsを使って無料でモックアップを行うには、どうすればいいんですか？次は、インストールするから使いこなすまでの詳細ガイドを紹介します。フリーツールを使って無料でモックアップしたい場合は、次のガイドを参照して、モックアップを作ることができます。
⒈インストール
npm install mockjs --save
⒉基本の使い方
ランダムにユーザーの情報を生成します：
- name はランダムな漢字の名前になります。
- age は 15～25 のランダムの数です。
- city はランダムの都市名になります。
const Mock = require('mockjs')
const user = {
'name': Mock.Random.cname(),
'age': Mock.Random.integer(15, 25),
'city': Mock.Random.county(true)
}
// 結果
console.log(JSON.stringify(user, null, 4))
可能な結果：
{
"name": "田中",
"age": 15,
"city": "兵庫県 神戸市"
}
ユーザー情報の配列をランダムに生成します。配列の長さは1から10までのランダムの数です。
const Mock = require('mockjs')
const list = Mock.mock({
// プロパティ list の値は配列になり、 1 から 10この要素がある
'list|1-10': [{
'id|+1': 1, // id は 1 から自己増加。
'name': '@cname',
'age|15-25': 1,
'city': '@county(true)'
}]
})
// 結果
console.log(JSON.stringify(list, null, 4))
可能な結果：
{
"list": [
{
"id": 1,
"name": "隆田",
"age": 20,
"city": "岡山県 岡山市"
}
{
"id": 2,
"name": "東静",
"age": 24,
"city":"福岡県 北九州市"
},
{
"id": 3,
"name": "葉初",
"age": 25,
"city":"熊本県 熊本市"
}
]
}
次は、Mock.jsのAPIを詳しく説明していきます。
⒊仮想データ
ランダムのデータの生成
Mock.Random.boolean()
ランダムのプール値を生成します：
Mock.Random.boolean()
戻り値が trueか falseになります。
Mock.Random.integer(min, max)
範囲を指定可能なランダムの整数を生成します。例えば：
Mock.Random.integer(0, 10)
戻り値が ０か ら１０までの整数になります。
Mock.Random.float(min, max, dmin, dmax)
範囲と制度を指定可能な浮動小数点数をランダムに生成します。例えば：
Mock.Random.float(0, 100, 2, 5)
戻り値が 0.00 から100.00000 までの浮動小数点数になり、その精度は 小数部2 から 5桁です。
Mock.Random.string(length)
長さを指定可能なランダムの文字列を生成します。例えば：
Mock.Random.string(10)
戻り値は長さが 10になっているランダムの文字列になります。
Mock.Random.name(middle?)
よくみられる英語の名前をランダムに生成します。例えば：
Random.name()
// => "Larry Wilson"
Random.name(true)
// => "Helen Carol Martinez"
Mock.Random.cname()
よくみられる漢字の名前を生成します。
Random.cname()
// => "田中"
Mock.Random.date()
日にちをランダムに生成します。例え：
Mock.Random.date()
戻り値がランダムの日付になります。例えば "1977-07-03"。
Mock.Random.time()
ランダムの時間を生成します。例えば：
Mock.Random.time()
戻り値がランダムの時間を表示する文字列になります。例えば： "05:38:02"。
Mock.Random.datetime()
ランダムの日付と時間を生成します。例えば：
Mock.Random.datetime()
戻り値がランダムの日付と時間を表示する文字列になります。例えば： "2007-06-29T22:03:06.140Z"。
Mock.Random.image(size, background, foreground, format, text)
ランダムの画像を生成します。画像のサイズ、バックグラウンドの色、フォーマットや文字などを指定できます。例えば：
Mock.Random.image('200x100', '#50B347', '#FFF', 'png', 'Hello, Mock.js!')
戻り値が画像の Base64の符号化データになります。
データテンプレートが指定のデータの生成
Mock.mock(template) は、データテンプレートに基づいて仮想データを生成します。データテンプレートは、複雑なデータ構造を生成できます。
データテンプレートの文法は次のようになります：
- プロパティ名とプロパティ値を
:で区切られる。 - プロパティ同士の間では
,で区切られる。 - プロパティ値が文字列な場合、
@を使ってプレースホルダーを表す。 - プロパティ値がオブジェクトな場合、
name|ruleで生成のルールを表す。
例：
const Mock = require('mockjs')
const data = Mock.mock({
'list|1-10': [{
'id|+1': 1, // 1から始まり、毎回1を加算
'name': '@cname', // ランダムの漢字の名前
'age|18-60': 1, // 18から60才までの整数
'gender|1': ['男', '女'], // 男か女
'email': '@email' // ランダムのメールアドレス
}]
})
console.log(data)
結果：
{
"list": [
{
"id": 1,
"name": "田中",
"age": 32,
"gender": "女",
"email": "kbsc@pmpuaaq.pk"
},
{
"id": 2,
"name": "清水",
"age": 55,
"gender": "男",
"email": "whq@zjfwq.uz"
},
...
]
}
4.APIモック
Mock.mock(url, template)APIのエンドポイントとデータテンプレートに基づいてAPIをモックMock.mock(method, url, template)リクエスト方式、APIのエントポイント、データテンプレートに基づいてAPIモックを- 遮断されたAjaxリクエストの応答時間を指定します。
400を設定して、400ミリ秒後に応答内容を返すことを意味します。また、時間の範囲を指定することもできます。例えば'200-600'は、応答時間が200から600ミリ秒までの間にあることを意味します。
まとめ
本文では、Mock.jsの構文と文法を紹介した上、Mock.jsを使って無料でモックアップを行う方法をも一緒に紹介しました。モックアップのフリーツールを探している場合、または無料な方法でモックアップを行いたい場合、本文で紹介した対策を参照して、Mock.jsを利用することができます。
また、コーディングをしたくなく、コードなしでモックアップを実現するには、Mockエンジンが備えている完全なAPI管理ツールのApidogを使用することがおすすめです。コードなんかは一切必要なく、視覚的にMockルールを設定して、簡単にモックアップを行うことができます。また、ApidogはMock.jsにも互換しているので、それをApidogにインポートすると、Apidogはモックのルールを素早く解析することもできます。Apidogはこれまでにない強力なMock機能を提供しているので、モックアップが必要となる場合、見逃しないでください。
