MK Dev

rosieでデータのバリエーションを作る

テストやstorybookで本来はAPIで取得するモックのJSONデータが必要になることってありますよね。

そんなときはJavaScriptでデータを作りやすくするライブラリRosieを使うことが多いです。
rosieの基本的な使い方は以前に記事にしているので合わせて読んでみてください。

今回はデータの中の一部のステータスだけ違う、というようなデータのバリエーションをrosieで増やす方法を紹介していきたいと思います。

バリエーションを作る基本データ

rosieでデータのバリエーションを作るにはまず基本となるデータを定義する必要があります。
シンプルに記事のデータでステータスに公開と下書きがある例のコードで紹介していきます。

Factory.define(`post`).attrs({
title: 'post title'.
slug: 'post slug'.
status: PostStatus.DRAFT
})

statusの部分が今回バリエーションを作る部分です。

ステータスの値は数値だったり文字列だったりすると思います。
そこでこんな感じのステータス用のオブジェクトを用意するとおすすめです。

const PostStatus = {
PUBLISHED: 'published',
DRAFT: 'draft'
}

Factory.extendで基本データを継承

基本のデータが定義できたらバリーエーションも作っていきます。

Factory.defind('データ名').extend('継承するデータ')

とすることで新たなデータを定義することができ、extendで指定したデータ名のデータを継承させることができます。
あとは上書きしたいデータや、新規で追加したいデータをattrsを使って定義します。

例えば記事のステータスを下書きで定義したデータを使って。ステータスを公開にするには下記のようにして実現することができます。

Factory.define(`post:${PostStauts.DRAFT}`).extend('post').attrs({
status: PostStatus.PUBLISHED
})

データ名を変数化してFactory.define

データ名の設定はFactory.defineで行いますが、変数を使った管理をするのがおすすめです。

defineにベタ書きで指定しても動作の違いにはもちろん変わりありません。
ですが使っているうちにバリーエーションのデータ名なんだっけ?と度々定義している部分を参照しなければ使えないという状況が生まれます。

またチームで運用していると自分以外の人が作ったデータを使うにもどんなデータがどんなデータ名で定義してあるのか把握するのが難しくなってきます。

そこで指定するデータ名には変数を使い、使用する際も変数を使うようにします。
例えばデータを定義するファイルに下記のようなコードを置きます。

export const POST_TYPES = {
PUBLISHED: 'published', // 1や2でも可
DRAFT: 'draft'
}

そして定義するときは

Factory.define(POST_TYPE.PUBLISHED)

のようにしてデータを定義すると使う側でも下記のようにして使うことができます。

Factory.build(POST_TYPE.PUBLISHED)

変数にしておく一番のメリットはエディタの補完が効くということです。 (補完は各自が使っているエディタで有効になるように設定が必要です)

  • PUBLISHEDとDRAFTが候補に表示されてどんなデータ定義があるかひと目でわかる
  • データ名を意識することなく変数だけを使っていれば良い

という効果がありデータの使い勝手悪くなることもありません。

まとめ

rosieは純粋にデータの定義だけでもわかりやすくなるので使うメリットはあります。
ですが今回紹介したようなデータのバリエーションを作るときには一層Rosieを使うとデータの定義がわかりやすくできます。

モックのデータは直接な実装とは関係ありませんが、何も考えずにデータを作り始めるとJSONがベタ書きでコード量が莫大になったりしてしまいます。  

メンテナンス性を維持するためにもRosieを使って、いろんなパターンのデータを作ってみてはいかがでしょうか。

AUTHORこの記事を書いた人

Koji Murakami

フリーでWeb開発をしているフロントエンドエンジニア。

SNS

SHARE記事をシェア

rosieでデータのバリエーションを作る
WEB制作を依頼する

フリーのエンジニアとしてWEB制作のご依頼を引き受けています。
実績、できること、単価など詳しい内容をご覧いただきお問い合わせよりご連絡ください。