ソリューション 7 min read

完全解説:Mock.jsとは、構文、文法、導入事例と使い方を

本文では、Mock.jsの使い方と導入事例を紹介します。本文のガイドを参照して、Mock.jsを使って、無料でモックアップを行うことができます。

mock.jsの完全解説

本文では、Mock.jsの使い方と導入事例を紹介します。本文のガイドを参照して、Mock.jsを使って、無料でモックアップを行うことができます。

Mock.jsとは

Mock.jsは、JavaScriptのフロントエンド開発において、APIのテストや開発の際に偽のデータを生成するためのライブラリです。Mock.jsは、ランダムなデータを生成するためのさまざまなメソッドを提供し、HTTPリクエストのシミュレーションやJSONデータの生成に役立ちます。

Mock.jsは、簡単に使用でき、豊富な機能を持つため、フロントエンド開発において広く使われています。また、データの検証やビジュアルテストにも利用できます。

Mock.jsは、GitHubでオープンソースとして公開されており、誰でも無料で利用することができます。

Mock.jsの文法と構文の解説

Mock.jsの文法について、次のように2部分に分けられています。

  1. データテンプレートの定義(Data Template Definition,DTD)
  2. データプレースホルダーの定義(Data Placeholder Definition,DPD)

次は、この2つの部分を1つずつ紹介します。

データテンプレートの定義(DTD)

データテンプレートのプロパティには、3つの要素があります:プロパティ名、生成ルールとプロパティ値

'name|rule': value

nameはプロパティ名になり、ruleは生成ルールになり、 valueはプロパティ値になります。

**ご案内:**生成ルールはプロパティ値に関連する概念です。つまり、同じ生成ルールが異なるプロパティ値のタイプに対して、意義が異なる可能性があります。

次は、違うプロパティ値のタイプに基づいて、文法を解説していきます。

プロパティ値が文字列型(string)

  1. '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で、小数点以下はdmindmax桁を保持します。例えば、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

⒉基本の使い方

ランダムにユーザーの情報を生成します:

  1. name はランダムな漢字の名前になります。
  2. age は 15~25 のランダムの数です。
  3. 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()

戻り値が truefalseになります。

Mock.Random.integer(min, max)

範囲を指定可能なランダムの整数を生成します。例えば:

Mock.Random.integer(0, 10)

戻り値が か ら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を利用することができます。

button

また、コーディングをしたくなく、コードなしでモックアップを実現するには、Mockエンジンが備えている完全なAPI管理ツールのApidogを使用することがおすすめです。コードなんかは一切必要なく、視覚的にMockルールを設定して、簡単にモックアップを行うことができます。また、ApidogはMock.jsにも互換しているので、それをApidogにインポートすると、Apidogはモックのルールを素早く解析することもできます。Apidogはこれまでにない強力なMock機能を提供しているので、モックアップが必要となる場合、見逃しないでください。

ApidogでAPIモックを

Apidogのニュースレターを購読する

今すぐ購読すると、いつでもApidogから更新情報と最新観点を手に入れることができます。