読者です 読者をやめる 読者になる 読者になる

ハイパーニートプログラマーへの道

頑張ったり頑張らなかったり

faker.jsを使ってみる

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

github.com

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

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

f:id:noriyo_tcp:20150902210120p:plain

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していく形で81個生成してますけど・・・w