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

storybook

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

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

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

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

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

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

Rosieとは

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

https://github.com/rosiejs/rosie

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

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

JSONデータを定義する

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

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

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

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

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

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

JSONデータを生成する

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

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

conse user = Factroy.build('user')

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

{
id: 1,
name: 'user name'
}

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

Storybookでの使い方

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

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

import './factories'

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

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

-- factories
| -- index.js // user.jsとpost.jsをimport
| -- user.js
| -- post.js

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

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

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を使ってみてはいかがでしょうか。

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.