デザイナーもレビューできる！チーム全体で UI コンポーネントを確認するための Chromatic

はじめに

こんにちは kimizuy です。

以前に「デザイナーも確認できる！Chromatic で Storybook を公開する」と題して、Storybook を Chromatic に公開するまでの手順をご紹介しました。

今回はその続編で、マージ前の UI コンポーネントの見た目や DOM の差分を Chromatic 上で確認してレビューする方法をご紹介します。

Table of Contents

• GitHub の PR と連携する
• 変更の差分を確認してコメントする
• 変更を承認（Accept）か拒否（Deny）する

GitHub の PR と連携する

以下の手順をサイドバーから「PRs」から GitHub の PR のアクティビティを確認できます。

• GitHub リポジトリと連携する
• PR に紐づくブランチ上でビルドコマンドを実行する npx chromatic --project-token={YOUR_TOKEN}

Pull Request を開くと以下のような画面が表示されます。

見た目に変更がある場合、変更箇所が表示され、レビュワーのアサインなどを行うことができます。

変更の差分を確認してコメントする

ビルドページを開いて実際の差分を確認しましょう。

「Changes」のあたりをクリックすると見た目や DOM の差分が確認できます。

また見た目の差分上をクリックすると、その箇所に直接コメントを追加できます。

例えば、直してほしい箇所があった場合でも視覚的な部分を補うことができます。
「スクリーンショットを撮って、直して欲しい部分を赤枠で囲って、コメントして…」といった手間が省けそうですね。

シンプルなコメントも追加できます。

また DOM の差分も確認できます。

変更を承認（Accept）か拒否（Deny）する

右上のボタンから変更の承認 or 拒否ができます。
「コンポーネント単体」と「変更全体」の 2 通りで承認か変更を行えます。

以上、「デザイナーもレビューできる！チーム全体で UI コンポーネントを確認するための Chromatic」と題して Chromatic 上のレビュー機能についてご紹介しました。

おわりに

UI コンポーネントのレビューについて今までエンジニアだけで完結していたものが Chromatic を活用することで、簡単にデザイナーやビジネスサイドの人まで関わることができます。

どんどん周囲を巻き込んで UI コンポーネントの質を高めていきたいですね。

以上、お読みいただきありがとうございました。