フクロウラボのStorybook事情

フロントエンジニアの小泉と申します。

フクロウラボではアプリ向けのweb広告配信プラットフォーム「CircuitX」を開発しており、現在は平行してリプレイス開発を進めています。その中で、フロントエンドチームではUI開発ツールの１つに Storybook を活用しています。

今回は、そのStorybookをどのように活用しているかを簡単に紹介していきたいと思います。

CircuitXとは？

事業について | 株式会社フクロウラボ

Storybookとは？

Storybookは、UIコンポーネントとページを分離して構築するためのオープンソースツールです。UI開発、テスト、ドキュメント作成を効率化します。

Storybook: Frontend workshop for UI development

活用場所

利用している所は大きく２つあります。
・コンポーネントの確認
・テスト

コンポーネントの確認

コンポーネントが多くなってくると「このコンポーネントってあるっけ？」みたいなことが出てきます。
そんな時にStorybookを利用してコンポーネントの存在チェックをしています。
他にも、見た目だけではなくコンポーネントの動作も確認することがあります。

テスト

フクロウラボでは、単体テストとVRT(Visual Regression Testing)が導入されています。
その両方でStorybookを活用しています。
では、さっそく実装を見ていきます。

import { render,screen } from 'test/test-utils';
import { composeStories } from '@storybook/testing-react';
import * as stories from './Textarea.stories';

describe('Textarea', () => {
  const { Default } = composeStories(stories);

  test('should render Textarea', () => {
    render(<Default />);
    const component = screen.getByRole('textbox');
    expect(component).toBeInTheDocument();
  });
});

上記は単体テストのコードなのですが、Storybookを利用してテストしています。
composeStoriesの引数にstoriesを渡してあげるとrenderができ、Default(コンポーネント) が生成され、jestでレンダリングして利用することができるようになります。
以前までは、コンポーネントを呼び出していたのですがStorybookを再利用するようにしてコードがスッキリしました。

VRT
Storycapとreg-suitを利用してStorybookでVRTを実装しています。
VRTは、Storybookの差分を検知して教えてくれます。

Storycapとは？
Storybookからコンポーネントのスクリーンショットを作成します。

reg-suitとは？
Storycapのスクリーンショットを利用して、差分のレポートを作成します。

プルリクを出すと下記のようなコメントが自動でされ、変更されたコンポーネント・新規追加されたコンポーネント・変更なしのコンポーネントを丸のアイコンの色で教えてくれます。

this reportリンクを押すとさらに詳細の差分を見ることができます。

VRTを実装して、以前より簡単にUIの差分に気づくことができるようになりました。

終わりに

Storybookを触り始める前は、運用コストが高いというイメージが強くて腰が重かったですが利用し始めると、活用範囲が広くコストの部分があまり気にならなくなりました。
ぜひ気になる方は導入してみてください！

（おわり）