faker.jsを使ってみる

Rubyでもfakerというgemがありますが、そのJS版なんですかねえ。

github.com

今回はCodePenで簡単に導入しました。

JSパネルの歯車ボタンより、「+ add another resource」を押下、入力フォームに「faker」と打ち込むだけで画像のように候補が出ます。

API Methods一部

• address
  • zipCode
  • city
  • cityPrefix
  • citySuffix
  • streetName
  • streetAddress
  • streetSuffix
  • streetPrefix
  • secondaryAddress
  • county
  • country
  • countryCode
  • state
  • stateAbbr
  • latitude
  • longitude

住所。

• name
  • firstName
  • lastName
  • findName
  • jobTitle
  • prefix
  • suffix
  • title
  • jobDescriptor
  • jobArea
  • jobType

名前。full nameではfindNameを使います。

• phone
  • phoneNumber
  • phoneNumberFormat
  • phoneFormats

電話番号。

こんな感じ。

console.log(faker.name.findName()); // "Reece Predovic"
console.log(faker.phone.phoneNumberFormat()); // "092-284-2400"
console.log(faker.name.jobTitle()); // "Chief Tactics Assistant"

Localization

ローカライゼーションもできるみたい。日本語(ja)もある。

// sets locale to de
faker.locale = "de";

faker.js - generate massive amounts of fake data in node.js and the browser

demoページで日本語も選択できるんですけど、ちょっと微妙だな・・・w

footable.jsと組み合わせてこんなんつくってみました。

CodePen - Sortable table using footable.js and faker.js

See the Pen Sortable table using footable.js and faker.js by Noriyo Akita (@noriyotcp) on CodePen.

実際のfaker.js使用部分はこれだけ。

for(var f=1; f<=9; ++f){
  for(var r=1; r<=9; ++r){
    var personName = faker.name.findName();
    var phoneNumber = faker.phone.phoneNumberFormat();
    var jobTitle = faker.name.jobTitle();
    $('tbody').append('<tr><td>'+f+'0'+r+'</td><td>'+personName+'</td><td>'+phoneNumber+'</td><td>'+jobTitle+'</td></tr>');
  }
}

空のtdobyに無理やりappendしていく形で８１個生成してますけど・・・w