Chromaticを使って爆速でStorybookをチームと共有する

2分で設定できます
2021.09.27

現在着手中の案件ではReactを使ったtoC向けのWebアプリの開発を行なっています。かなりデザインに重点を置いているため、一定間隔でデザインチームとアプリのデザイン周りのフィードバック会を設けるのですが、STG環境をフィードバックの対象にするとThemeの切り替えやユーザーデータの更新をAPI越しに行う必要があり面倒な場面が出てきます。

そこでThemeやデータを柔軟に切り替えて確認できるStorybookをChromaticを使って簡単にチームメンバーと共有できるようにしました。

CI環境

案件ではGithub Actionsを使ってアプリのビルド、デプロイが終わったタイミングでスクリプトを流してChromatic上にStorybookをデプロイしています。

Chromaticとは

Chromaticは、UIフィードバックの収集、ビジュアルテスト、ドキュメンテーションを自動化することで、開発者は少ないマニュアル作業で迅速にイテレーションを行うことができます。

引用元:Chromatic

Storybookと繋げてデザインを公開したり、公開したデザインに対してコメントをつけたりテストや承認フローを追加したりできるサービスです。StorybookのMaintainerによって開発、メンテナンスされています。セットアップは2分で終わります。

Getrting Started

Storybookが導入されていることが前提です。Chromaticを既存のプロジェクトに追加します。

yarn add -D chromatic

次にGithubのアカウントを使用してChromaticにログインし、プロジェクトの作成とレポジトリの紐付けを行います。

プロジェクトごとに発行されるproject-tokenを使ってStorybookをデプロイします。

yarn chromatic --project-token=<project-token>

デプロイが完了するとURLが発行されるのでこのリンクを開発チームと共有します。

権限管理

特に設定しなければ指定したGithub レポジトリの閲覧権限がそのままURLの閲覧権限になります。閲覧者を個別に追加することもできます。

前回のデプロイとの差分を見る

ビルドを選択して前回のバージョンとの差分を確認できます。Githubと連携してコードレビューにUIレビューを組み込むことができます。

見た目の差分とDOMの差分の両方が確認できます。

コメントをつける

任意の場所にコメントを入れることもできます。

プルリクエストにUIレビューを追加する

Githubと連携してプルリクエストにUIレビューを追加します。

Changesetをレビューする

ビルド別に変更を確認できるので、Accept/Denyボタンでレビューします。Discussionやコメントの追加もできます。

スクリーンショット引用元:Review changeset

あとがき

Storybookを開発メンバーと共有できたらいいなと思ってChromaticを導入しましたが、思ったより機能が充実していてとても役立っています。実際の案件ではUIのレビュー機能はまだ使っていませんがぜひ活用していきたいです。

References