Tips2021.04.02

Storybookのモックデータの作成と管理をRosieを使って効率化する

ReactやVueで開発するようになって使う機会が増えたのがStorybookです。

コンポーネントレベルで開発できて、ドキュメントにもテスト用途としても使えるのでとても便利ですよね。

一時期Storybookの設定が複雑すぎて使うのが嫌な時期があったりもしましたが・・笑

Storybookを使うと避けては通れないのがモックデータの作成です。

実際にAPIのデータを使うコンポーネントでは擬似的なデータを用意する必要がありますが、結構めんどうじゃないですか？

1つのデータについても様々ステータスがあってデータを作るのが大変なこともありますが、少しでも効率的にわかりやすくデータを管理するためにRosieを使った方法を紹介します。

目次

Rosieとは
1. JSONデータを定義する
2. JSONデータを生成する
Storybookでの使い方
1. コンポーネントを表示するStroyで使う
まとめ

Rosieとは

RosieはRubyでデータを作る時にメジャーなライブラリの1つであるfactory_girlにインスパイアされてつくられたJavaScriptのライブラリです。

https://github.com/rosiejs/rosie

Rosieを使うことでモックデータの作成と管理をわかりやすく効率的にできます。

それでは実際にRosieを使い方を紹介していきます。

JSONデータを定義する

Rosieではまず生成する**JSONを定義**するところから始めます。
たとえばidとnameを持ったユーザーのデータを作ってみたいと思います。

1
2
3
4
5
import { Factory } from 'rosie'

Factory.define('user').attrs({
  name: 'user name'
}).sequence('id')

Factory.defind('任意の名称')でデータに名前をつけることができ、attrsでJSONの内容を定義します。
sequenceはデータを生成することにインクリメントが可能です。

データを生成するたびに一意の値が必要な場合に使用します。

直接キー名を指定しても良いですし、下記のようにインクリメントしたインデックスを引数にとり関数で定義も可能です。

1
2
3
4
5
Factory.define('user').attrs({
  name: 'user name'
}).sequence('id', (index) => {
  return `id-${index}`
})

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

JSONデータを生成する

データを定義できたら今度はそのデータを実際に使います。

たとえば先のようにuserという名前をつけたデータをJSONで生成には下記のようにします。

1
const user = Factroy.build('user')

Factory.build('生成するデータ名')で、定義したデータをJSONで得られます。
先にidとnameを定義していたので得られるJSONは下記のようになります。

1
2
3
4
{
  id: 1,
  name: 'user name'
}

idにはsequenceを指定していたので、Factroy.build('user')を呼ぶたびに1、2、3と増えていきます。

Storybookでの使い方

簡単にRosieの使い方を紹介したので、実際にStorybookで使っていきたいと思います。

まずは定義したデータのファイルを.storybook/preview.jsで読み込みます。

1
import './factories'

これでStorybookのどのStoryからFactory.build('user')のように定義したデータを生成できます。

定義するデータが増えても管理しやすいようにfactoryやfactroiesなどのディレクトリを作成しindex.jsに各ファイルをimportするのがおすすめです。

1
2
3
4
-- factories
  | -- index.js  // user.jsとpost.jsをimport
  | -- user.js
  | -- post.js

コンポーネントを表示するStroyで使う

preview.jsで定義したデータを読みこんだのでStoryでは下記のように使っていきます。

1
2
3
4
5
6
7
import { Factory } from 'rosie'

storiesOf('UserProfile', module).add('default', () => {
  const user = Factory.build('user')

  return <UserProfile user={post} />
})

Factoryをimportしてデータが必要なところでbuildすればコンポーネントにJSONのデータを簡単に渡すことができます。

まとめ

今回はStorybookで使うデータの構築する方法を紹介しました。

Storybookを作る上で一番大変なことは実はコンポーネントで使うためのモックデータの構築と管理ではないかと思っています。

少しでもデータを扱いやすくするためにRosieはとても役に立ちます。

StorybookでのRosieの使い方を紹介しましたが、ユニットテストの時に使うテストデータとしても使うことができるので、モックデータの作成に困っていってる人は一度Rosieを使ってみてはいかがでしょうか。