Tips2020.04.28

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

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

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

https://zenn.dev/koojy/articles/storybook-data-rosie

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

目次

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

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

1
2
3
4
5
Factory.define(`post`).attrs({
  title: 'post title'.
	slug: 'post slug'.
	status: PostStatus.DRAFT
})

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

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

1
2
3
4
const PostStatus = {
  PUBLISHED: 'published',
	DRAFT: 'draft'
}

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

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

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

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

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

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

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

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

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

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

そして定義するときは

1
Factory.define(POST_TYPE.PUBLISHED)

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

1
Factory.build(POST_TYPE.PUBLISHED)

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

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

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

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

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