storybook をさらに有効活用するために chromatic を導入する
目次
開発に storybook を導入した
chromatic で storybook をさらに有効活用できそう
実際に検証してみた
開発に storybook を導入した
混沌としていたコンポーネントを整理するために、Atomic Design を導入することにしました。その際に、storybook も作成していこうということになりました。
手順はおおよそ以下の通りでした。
- デザイナーが Atomic Design に則ってコンポーネントを整理する。
- エンジニアがコンポーネントと storybook を作成する。
- PR ごとに Circle CI で storybook を build し、レビュー時にはコードと共に見た目や挙動も確認する。
- エンジニアが相互レビューし合い、コーディングルールなどを整理していく。
- 新規画面の作成 / 既存の画面の置き換えを行う。
この時点で、storybook にかなり価値を感じました。今までは画面と共に新規コンポーネントを作って試してということになっていたのが、コンポーネント単体で実装できるようになりました。また、storybook の addon-knobs[1] を利用してパターンを網羅した挙動確認が簡単にできるようになりました。
chromatic で storybook をさらに有効活用できそう
おおよそコンポーネントを作成し切ることはできたので、次にどう保守していくかを考えました。先人の知恵を調べると「ビジュアルリグレッションテスト」というものがあるらしいです。ざっくりいうと、意図しない変更が含まれていないかをピクセル単位で確認するテストのことです。
また、デザイナーによるコンポーネントの確認作業があり、storybook 上のコンポーネントに対して直接コメントできればなあという話が出ました（その時は指摘事項をスプレッドシートにまとめてチケット化、修正というよくあるフローで対応しました）。
色々調べていくうちに、こういった問題を解決できそうなツールとして、chromatic というものがあるのを発見しました。
chromatic は storybook のコアメンテナが作成した専用ツールで、コンポーネント駆動開発に特化した様々な機能があります。storybook をホストできたり（それ自体は S3 や Netlify などでも行えます）、上述したビジュアルリグレッションテストやコメント機能、アクセス制限や GitHub の PR 連携、GitHub Actions からの deploy など、おおよそ必要な機能が備わっているように思えます。
詳しい説明は公式サイトに譲りまして、導入手順を次章で紹介します。
実際に導入してみた
公式サイトの Get started now を選択し、自分の GitHub アカウントを連携します（GitBucket や GitLab でも可、以後は GitHub で説明します）。その後、storybook が実装されている既存の repository を選び、chromatic 内に project を作成します。public / private は問わないですが、public repository はアクセス制限できないようです。
project を作成すると、project token が発行されます。これを利用して、手元から CLI を利用して deploy できます。今回は GitHub Actions を利用して CI に組み込む手順を紹介します。
.github/workflows 以下に、yml ファイルを作成して push します。branch とかは適宜変更してください。GitHub の設定ページから Secrets を開き、CHROMATIC_PROJECT_TOKEN に先ほどの project token を設定する必要があります。
name: Chromatic
on:
push:
branches:
- hoge
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0
- run: npm ci
- uses: chromaui/action@v1
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
これで、対象ブランチが更新されるたびに、chromatic に自動で storybook が deploy されるようになります。手順としてはこれだけです。
最後に、機能を画面と共に紹介していきます。
Build
それぞれの Build 時点の storybook を確認できます。詳細画面では、PR のレビュアーを指定したり、承認/却下したりできます（GitHub のステータスとは別のようです）。
Pull Requests
GitHub の PR 一覧と、更新された Story 数が確認できます。詳細画面では、UI Test の結果や変更のあったコンポーネントの確認ができます
Library
storybook の一覧が確認できます。詳細画面でコンポーネントを確認できます。コメントもできます。
Manage
設定ページです。無料枠が snapshot 5000 件までなので、節約するために UI Review や Visual Test を disable にできます。
Discussion