はじめに

前回は、vuetifyを入れたvueプロジェクトのstorybookをchromaticにホスティングするまでの手順をまとめました。
次は、chromaticを使用してレビューや差分の見方などをまとめます。

環境

node:v12.18.2
npm:6.14.5
yarn:1.22.4
vue/cli:4.5.4
npx:6.14.5

プロジェクトの修正

ブランチの作成と切り替え

GitHubを使用する時は、branchを作成して修正・マージを行うのが一般的だと思います。
そのため、まずはbranchを作成して、切り替えます。

git branch feature/add_button_to_mypage
git checkout feature/add_button_to_mypage

ソースの修正

普通にソースの修正をします。ここでは、差分がわかりやすいようにページにボタンを追加します。

diff --git a/src/views/MyPage.vue b/src/views/MyPage.vue
index ecc6939..a9955d9 100644
--- a/src/views/MyPage.vue
+++ b/src/views/MyPage.vue
         <v-col>
             <simple-button type="primary" text="プライマリーボタン"/>
         </v-col>
+        <v-col>
+            <simple-button color="error" text="太字ボタン" bold/>
+        </v-col>
         <v-col>
             <simple-button type="inversion" color="success" text="反転色付きボタン"/>
         </v-col>

ソースのコミットとpush

ここも普通にソースのコミットとpushを行います。

git add *
git commit -m "ページにボタン追加"
git push origin feature/add_button_to_mypage

chromaticへの反映

chromaticへpush

chromaticへのpushをしないと修正した内容がchromaticへ反映されないため、pushします。
前回の手順通りに行っているとyarnコマンドに追加されているはずなのでyarnコマンドでpushします。
コマンドを実行すると差分があるため、失敗します。

yarn chromatic

実行結果

× Found 1 visual change: failing with exit code 1
Pass --exit-zero-on-changes to succeed this command regardless of changes.
Pass --auto-accept-changes to succeed and automatically accept any changes.
i Review the changes at レビューURL

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

修正の反映チェック

chromaticに反映させるためには、差分が意図した修正であったかをチェックする必要があります。
上のコンソールで表示されたレビューURLをブラウザで開くと以下の画面が表示されます。
それぞれの差分がTESTSに出ているため、Changesのコンポーネント(例だとMyPage)をクリックして内容を確認します。

クリック後は写真のように差分がWeb画面で見れます。
左が修正前で右が修正後になります。右の修正した箇所に色付きで差分が表示されます。
※サンプルが悪くて気持ち悪い色になっちゃいました。

右のDiffボタンを押すと純粋な画面を見ることもできます。

意図した修正ならばAcceptを選択すると、Acceptedになります。
これでchromaticへの反映が終わりました。

chromaticでのレビュー

chromatic on GitHubのインストール

GitHubで作成したプルリクエストがchromaticにも反映されるようになるために
Chromatic on GitHubをインストールします。

左のPRsを選択して、表示されるInstall Chromatic on GitHubをクリックします。
既にリポジトリの連携がすんでいる場合は選択済みになっているリポジトリ名を確認します。
Approveをクリックします。
Gitのパスワードを入力します。

GitHubのプルリクエストを作成する

GitHubのプルリクエストがメインとなるため、まずGitHubのプルリクエストを作成します。

Pull requestsタグを選択して、New pull requestをクリック
compareのところに修正したブランチを選択して、Create pull requestをクリック

chromaticでのプルリクエスト

GitHubのプルリクエスト作成後、1～2分後にchromaticのPRsの画面上にもGitHubで作成したプルリクエストが表示されています。
プルリクエストを選択すると詳細画面になます。

Activityタグは、レビュワーの追加や承認した人と時間のログの表示などこのプルリクエストに対して行われた操作やステータスが表示されます。

Componentsタグは作成していたstorybookが表示されます。

Changesetは修正の反映チェックで見たものと同じような画面の差分が表示されます。画面差分に対してコメントを残すこともできます。

これらを確認してOKであれば右のApproveボタンを押して承認をするとActivityタブの画面に承認されたことが記録されます。

マージ

マージはGitHub側で行う必要があるため、View PR on GitHubを選択してGitHub側のプルリクエストに飛びます。GitHubのプルリクエスト上でマージします。

Tips

chromaticへのpushの自動化

公式に書いているようにGitHub Actionsを使用するとわざわざyarnコマンドでpushする必要がなくなります。

終わりに

chromaticにホスティングした内容をレビューするまでの手順をまとめました。開発した物のUIを見ながらレビューできるのはとても良いと思いましたが、ソースはGitHubに移動しないと見えない点が微妙に感じました。
見た目の差分が出るだけで充分レビューしやすい状態になっていますが、修正差分の範囲が大きい場合ほとんどが差分になり逆にソースを見た方が早いというようにならないかが少し不安です。
ですが、スクラムのような小さい単位での開発やデザイナーが積極的に参加するチームならばとても強力なツールになるように思います。

chromaticでUIのレビューをしてみる