JavaScriptに対する苦手意識の塊である私が唐突にライブラリをご紹介してみる
私には昔から色々とお世話になっているmimuさんというお友達がいます。
日本でも知名度のあるサービス（大人の事情で言えない）の開発にも携わっていた凄腕のエンジニアで、とにかく知識量が半端無く、プログラミングだけにとどまらず、カメラの相談など色々頼ってばかりです。
先日こちらでも紹介したfake2dbですが、mimuさんにも
彡(ﾟ)(ﾟ)「fake2dbってライブラリを使ってみたら便利でした」
と話したところ、「JSだとこういったライブラリもあるよ」と紹介されたのが
今回の記事のネタに使わせてもらうFaker.jsです。
ちなみにmimuさんはエージェントグローとは一切関係ございません(ﾟдﾟ*)
そんな風に、しがらみもなくネタを自由にやらせてもらえるのもエージェントグローの素晴らしいところです（＾ω＾）
今後もちょいちょいmimuさんからのネタはここでご紹介させてもらおうと思っています。
Faker.jsとは
さて、Faker.jsですがこちらはJSで作られたダミーデータジェネレータになります。
サーバーサイドでもクライアントサイドでも利用できるようですね。
用途
使いドコロとしては、こちらもとりあえずダミーデータがほしいって時に使うのではないでしょうか？（すっとぼけ）
たとえばViewのコンポーネントやライブラリの挙動を軽く確認したい時なんかに使えるんじゃないでしょうか。
とりあえず
今回はむりくりVue.jsの勉強という体で使ってみようと思います。
なお私はVue.jsも初体験でして、なぜVue.jsをテーマに取り上げなかったのかというツッコミは無しでお願いします。
インストール
今回は純粋にブラウザ版で利用したいと思います。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/core.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"></script>
こんな感じでCDNから読み込むように設定しました(ﾟдﾟ)
次にbodyタグ内に
<div id="app">
<p>name:{{ name }}</p>
<p>email:{{ email }}</p>
<p>card:{{ card }}</p>
<div>
と書きます。これはVue.jsのバインディングの設定ですね。
そして次にバインディング元の記述を行います。
<script>
var randomName = faker.name.findName(); // Caitlyn Kerluke
var randomEmail = faker.internet.email(); // Rusty@arne.info
var randomCard = faker.helpers.createCard(); // random contact card containing many properties
var vm = new Vue({ el:'#app', data:{ name:randomName, email:randomEmail, card:randomCard.name, }, })
</script>
こんな感じで、Faker.jsのダミーデータを各変数に設定しています。
実行してみると
name:Annalise Parisian email:Lempi_Kling@*****.com card:Antonio Donnelly
こんな感じで勝手にデータが表示されます。
今回の設定だとブラウザを更新するたびにランダムに表示が切り替わります。
用意されているデータも種類が豊富なようです。
詳しくはこちらを御覧ください。
たくさんあって、引用するのをあきらめました(；・∀・)
というわけでJSは苦手なので、軽くライブラリのご紹介でした。
