rosieでデータのバリエーションを作るZennkoojy😀rosieでデータのバリエーションを作る2020/04/28に公開2022/07/14rosietechテストやstorybookで本来はAPIで取得するモックのJSONデータが必要になることってありますよね。そんなときはJavaScriptでデータを作りやすくするライブラリRosieを使うことが多いです。rosieの基本的な使い方は以前に記事にしているので合わせて読んでみてください。https://zenn.dev/koojy/articles/storybook-data-rosie今回はデータの中の一部のステータスだけ違う、というようなデータのバリエーションをrosieで増やす方法を紹介していきたいと思います。バリエーションを作る基本データrosieでデータのバリエーションを作るにはまず基本となるデータを定義する必要があります。シンプルに記事のデータでステータスに公開と下書きがある例のコードで紹介していきます。PostStatus.DRAFT})statusの部分が今回バリエーションを作る部分です。ステータスの値は数値だったり文字列だったりすると思います。そこでこんな感じのステータス用のオブジェクトを用意するとおすすめです。基本のデータが定義できたらバリーエーションも作っていきます。Factory.defind('データ名').extend('継承するデータ')とすることで新たなデータを定義でき、extendで指定したデータ名のデータを継承させることができます。あとは上書きしたいデータや、新規で追加したいデータをattrsを使って定義します。記事のステータスを下書きで定義したデータを使って。ステータスを公開にするには下記のようにして実現できます。PostStatus.PUBLISHED})データ名を変数化してFactory.defineデータ名の設定はFactory.defineで行いますが、変数を使った管理をするのがおすすめです。defineにベタ書きで指定しても動作の違いにはもちろん変わりありません。使っているうちにバリーエーションのデータ名なんだっけ?と度々定義している部分を参照しなければ使えないという状況が生まれます。チームで運用していると自分以外の人が作ったデータを使うにもどんなデータがどんなデータ名で定義してあるのか把握するのが難しくなってきます。そこで指定するデータ名には変数を使い、使用する際も変数を使うようにします。データを定義するファイルに下記のようなコードを置きます。'draft'}そして定義するときはFactory.define(POST_TYPE.PUBLISHED)のようにしてデータを定義すると使う側でも下記のようにして使うことができます。Factory.build(POST_TYPE.PUBLISHED)変数にしておく一番のメリットはエディタの補完が効くということです。(補完は各自が使っているエディタで有効になるように設定が必要です)PUBLISHEDとDRAFTが候補に表示されてどんなデータ定義があるかひと目でわかるデータ名を意識することなく変数だけを使っていれば良いという効果がありデータの使い勝手悪くなることもありません。まとめrosieは純粋にデータの定義だけでもわかりやすくなるので使うメリットはあります。今回紹介したようなデータのバリエーションを作るときには一層Rosieを使うとデータの定義がわかりやすくできます。モックのデータは直接な実装とは関係ありませんが、何も考えずにデータを作り始めるとJSONがベタ書きでコード量が莫大になったりしてしまいます。メンテナンス性を維持するためにもRosieを使って、いろんなパターンのデータを作ってみてはいかがでしょうか。フロントエンドエンジニア。業務でも趣味でもReact、TypeScriptばかり。HeadlessCMSでブログを作るのが好き!Contentful、microCMSを使ってNextやGatsbyで構築しつつマークダウンやMDXを加工したりは結構知見あるはず。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。フロントエンドエンジニア。業務でも趣味でもReact、TypeScriptばかり。HeadlessCMSでブログを作るのが好き!Contentful、microCMSを使ってNextやGatsbyで構築しつつマークダウンやMDXを加工したりは結構知見あるはず。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。