Chromatic を使って UI レビュー環境を素早く用意し、かつ、リグレッションテストにてコンポーネントが成立することを担保していきます。

Chromatic で素早い UI レビューサイクルの構築とリグレッションテストでコンポーネントの成立を担保する

<p>UI 開発を進めていく上で Chromatic というツールが体験が良いという話を聞いたので試してみます。</p>
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#chromatic">Chromatic</a></li>
<li><a href="#%E3%83%9F%E3%83%8B%E3%83%9E%E3%83%A0%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97">ミニマムセットアップ</a></li>
<li><a href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%8B%E3%82%89-chromatic-%E3%81%B8%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%B7%E3%83%A5">ローカル開発環境から Chromatic へパブリッシュ</a></li>
<li><a href="#github-%E3%81%A8%E3%81%AE%E9%80%A3%E6%90%BA%E8%87%AA%E5%8B%95%E5%8C%96">Github との連携（自動化）</a></li>
<li><a href="#chromatic-%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%83%AA%E3%82%B0%E3%83%AC%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%86%E3%82%B9%E3%83%88%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88%E3%81%A8%E3%81%AF%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%AA%E3%81%AE%E3%81%8B">Chromatic におけるリグレッションテスト・コンポーネントのテストとはどういうことなのか。</a></li>
</ol>
<h2 id="chromatic">Chromatic</h2>
<p>Chromatic は、Storybook を web 上に展開することのできるツールです。</p>
<p><a href="https://www.chromatic.com/" rel="noopener noreferrer" target="_blank">https://www.chromatic.com/</a></p>
<p>できることは大きく以下の 3 つです。</p>
<dl>
<dt>UI レビュー</dt>
<dd>web 上で StoryBook を確認でき、UI レビューを素早く簡単に実施できます。</dd>
<dt>UI テスト</dt>
<dd>コンポーネントはテストされ、壊れたコンポーネントは検知されます。</dd>
<dt>コンポーネントのライブラリ化</dt>
<dd>各コンポーネントはインデックスされ、検索可能になります。</dd>
</dl>
<p>Chromatic を使って UI レビュー環境を素早く用意し、かつ、UI テストにてコンポーネントが成立することを担保していける（＝リグレッションテスト）。とのことなので、導入してみます。</p>
<h2 id="ミニマムセットアップ">ミニマムセットアップ</h2>
<p>Chromatic を使っていく環境をセットアップしていきます。</p>
<p>前段の準備として、Storybook がインストールされたアプリケーションを用意しておき、それを Github リポジトリに上げておきます。</p>
<p>Setup and publish Storybook<br>
<a href="https://www.chromatic.com/docs/setup" rel="noopener noreferrer" target="_blank">https://www.chromatic.com/docs/setup</a></p>
<p><a href="https://www.chromatic.com/" rel="noopener noreferrer" target="_blank">Chromatic</a> にアクセスして、サインアップ（アカウント作成）します。</p>
<p>Github と連携できることを考え、今回は Github アカウントでサインアップしておきます。</p>
<div class="img_wrap"><img src="/images/posts/242/oXSQHOelMiSil0EB9Ici.png" width="800" height="342" alt="githubアカウントでサインアップ"></div>
<p>プロジェクトを選択します。連携させたい Github リポジトリが既にある前提なので、 「Choose from GitHub」 を押下します。（プロジェクトが GitHub にない場合、またはプロジェクトにアクセスする権限がまだない場合は、「Create a project」に進む）</p>
<div class="img_wrap"><img src="/images/posts/242/mC6aB1YB1yt1HxX6QfRm.png" width="800" height="405" alt="Github Project を選択"></div>
<p>どのリポジトリと連携させるかの選択画面が表示されるので、対象のリポジトリを選択します。</p>
<div class="img_wrap"><img src="/images/posts/242/huTFARAzoXFzYRYsmF7m.png" width="800" height="405" alt="リポジトリ選択"></div>
<p>Chromatic をインストールするためのコマンドと、Storybook を Chromatic に公開するためのコマンドが表示されます。</p>
<div class="img_wrap"><img src="/images/posts/242/tImCA6pNTOCMObi0L4wu.png" width="800" height="405" alt="セットアップスクリプト"></div>
<p>画面はここで一旦置いておき、ローカルの開発環境にて Chromatic をインストールします。</p>
<pre><code class="hljs language-shell"><span class="hljs-meta prompt_"># </span><span class="bash">npm の場合</span>
npm install --save-dev chromatic
<span class="hljs-meta prompt_">
# </span><span class="bash">yarn の場合</span>
yarn add --dev chromatic
</code></pre>
<p>インストールできたら、ミニマムでのセットアップは完了です。</p>
<h2 id="ローカル開発環境から-chromatic-へパブリッシュ">ローカル開発環境から Chromatic へパブリッシュ</h2>
<p>ではまずは、ローカルの開発環境から Chromatic へ Storybook の公開を行ってみます。</p>
<p>Chromatic の画面で Storybook を Chromatic に公開するためのコマンドが表示されていたので、そちらを実行するだけです。</p>
<pre><code class="hljs language-shell">npx chromatic --project-token=YOUR_PROJECT_TOKEN
</code></pre>
<p>実行するとこんな感じ</p>
<pre><code class="hljs language-shell"><span class="hljs-meta prompt_">% </span><span class="bash">npx chromatic --project-token=XXXXXXXXXXX</span>

Chromatic CLI v6.9.0
https://www.chromatic.com/docs/cli

✔ Authenticated with Chromatic
    → Using project token '************'
  ✔ Retrieved git information
    → Commit '6429420' on branch 'main'; no ancestor found
✔ Collected Storybook metadata
    → Storybook 6.5.12 for React; using the @storybook/builder-webpack5 builder (6.5.12); supported addons found: Links, Essentials, Interactions
✔ Initialized build
    → Build 1 initialized
✔ Storybook built in 43 seconds
    → View build log at /Path/to/my-project-root/build-storybook.log
✔ Publish complete in 10 seconds
    → View your Storybook at https://XXXXX-xxxxx.chromatic.com
✔ Started build 1
    → Continue setup at https://www.chromatic.com/setup?appId=XXXXX
✔ Build 1 auto-accepted
    → Tested 8 stories across 3 components; captured 8 snapshots in 7 seconds

ℹ Speed up Continuous Integration
Your project is linked to GitHub so Chromatic will report results there.
This means you can pass the --exit-once-uploaded flag to skip waiting for build results.
Read more here: https://www.chromatic.com/docs/cli#chromatic-options

✔ Build passed. Welcome to Chromatic!
We found 3 components with 8 stories and took 8 snapshots.
ℹ Please continue setup at https://www.chromatic.com/setup?appId=XXXXX

⚠ No 'chromatic' script found in your package.json
Would you like me to add it for you? [y/N]N

ℹ No problem. You can add it to your package.json yourself like so:
"scripts": {
"chromatic": "npx chromatic --project-token=XXXXXXXXXXX"
}
</code></pre>
<p>ここで、</p>
<pre><code class="hljs language-shell">No 'chromatic' script found in your package.json. Would you like me to add it for you? [y/N]
（package.json に「Chromatic」スクリプトが見つかりません。追加してもよろしいですか？ [はい/いいえ]）
</code></pre>
<p>と聞かれるのですが、ここでは N を選択して追加しないようにしています。</p>
<p>というのも、追加すると npm run chromatic というコマンドで先ほど実行したコマンドが実行できるようになるのですが、package.json に Project Token までがっつり記載されてしまうので、github でソース管理している関係上、追加を見送っています。</p>
<p>先程の Chromatic のページへ行ってみると、表示が変わっています。</p>
<div class="img_wrap"><img src="/images/posts/242/2xBciItOyg7nhS273VCB.png" width="800" height="495" alt="画面が変わり storybook が公開される"></div>
<p>Catch a UI change ボタンを押下して先に進みます。</p>
<div class="img_wrap"><img src="/images/posts/242/YmPn9quxeHC6qTG7cD0g.png" width="800" height="495" alt="Spot UI changes"></div>
<p>（ちなみに現在のこの画面はセットアップのフローにあるため、通常の画面フローと少し流れが違っています。初回なのでこのまま進めますが、セットアップ完了後はもっとシンプルになります。）</p>
<p>「UI を変更したら先ほどのコマンドで Chromatic に変更をアップできるよ。」というアナウンスと共に、「変更してもう一回実行してね」と案内されます。（変更して実行はおそらく強制イベントです）</p>
<p>ということで、UI に変更を加え再度 npx chromatic --project-token=YOUR_PROJECT_TOKEN を実行します。</p>
<p>実行が完了したら再び画面へ戻ると、表示が変わり、変更が行われたことが表示されています。</p>
<div class="img_wrap"><img src="/images/posts/242/DALb0RAik4CEtgNQdWls.png" width="800" height="462" alt="1 component changed"></div>
<p>表示されている Page というコンポーネントをクリックすると、変更差分が確認できます。（青いボタンを追加してみたところ。変更箇所が緑色になり確認点を教えてくれています）</p>
<div class="img_wrap"><img src="/images/posts/242/F5QCT4Gmw8dp3PeWIyH4.png" width="800" height="445" alt="Verify UI change"></div>
<p>「Accept change + continue」（変更を受け入れて続行）ボタンを押下すると、レビューのデモンストレーションが表示されて、セットアップは完了になります。</p>
<div class="img_wrap"><img src="/images/posts/242/P17unnWxlkQ7aIQ8DMVj.png" width="800" height="469" alt="フィードバックもらえる"></div>
<p>その後もこのように変更点についてフィードバックを得られるような仕組みがあるよ。ということのアナウンスの表示などが出ますが、セットアップは終わったので、ボタンをクリックして進んでいけばこういった今回の変更に関するページへ遷移できます。</p>
<div class="img_wrap"><img src="/images/posts/242/PJ373jqPO1aDyulfk2zK.png" width="800" height="507" alt="変更した部分のページ"></div>
<p>ここで、ステータスが「Unreviewed」となっている Logged In コンポーネントを見てみます。</p>
<div class="img_wrap"><img src="/images/posts/242/jqRB8XeLJj9w19ltDqRP.png" width="800" height="507" alt="レビュー画面"></div>
<p>するとこんな風に変更差分が出てくるので、ここでレビューをもらったりすることができます。</p>
<p>ちなみに、表示されているコンポーネントにオンマウスすると、下に Storybook へのリンクが表示されます。</p>
<div class="img_wrap"><img src="/images/posts/242/iOShxcxDur4UbDNoszIN.png" width="800" height="507" alt="storybookへのリンク"></div>
<p>このリンクから Chromatic 内の Storybook にてコンポーネントを確認することも可能です。</p>
<div class="img_wrap"><img src="/images/posts/242/ZES5LUTdUwhE2XLrVY0f.png" width="800" height="313" alt="Storybook"></div>
<p>このように、ローカル環境からでも Chromatic に Storybook をパブリッシュすることができます。</p>
<h2 id="github-との連携自動化">Github との連携（自動化）</h2>
<p>Github と連携させ、プルリクを作成した際などに Chromatic を動作させます。</p>
<p>これができると、プルリクエストを作成したら Storybook がパブリッシュされ、各コンポーネントのテストとレビューの準備までが一度にできるので一気に便利になります。</p>
<p>連携方法は公式ドキュメントにも記載されています。<br>
<a href="https://www.chromatic.com/docs/github-actions" rel="noopener noreferrer" target="_blank">https://www.chromatic.com/docs/github-actions</a></p>
<p>GitHub Actions で Chromatic を動作させるので、以下のように yaml ファイルを作成します。</p>
<dl class="description_setting">
<dt>.github/workflows/chromatic.yaml</dt>
<dd>
<pre><code class="hljs language-yaml"><span class="hljs-attr">name:</span> <span class="hljs-string">StoryBook</span> <span class="hljs-string">Publish</span>
<span class="hljs-attr">on:</span> [<span class="hljs-string">push</span>]
<span class="hljs-attr">jobs:</span>
  <span class="hljs-attr">chromatic:</span>
    <span class="hljs-attr">runs-on:</span> <span class="hljs-string">ubuntu-latest</span>
    <span class="hljs-attr">steps:</span>
      <span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Checkout</span> <span class="hljs-string">repository</span>
        <span class="hljs-attr">uses:</span> <span class="hljs-string">actions/checkout@v3</span>
        <span class="hljs-attr">with:</span>
          <span class="hljs-attr">fetch-depth:</span> <span class="hljs-number">0</span>

      <span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Setup</span> <span class="hljs-string">Node.js</span>
        <span class="hljs-attr">uses:</span> <span class="hljs-string">actions/setup-node@v3</span>
        <span class="hljs-attr">with:</span>
          <span class="hljs-attr">node-version:</span> <span class="hljs-string">'16'</span>

      <span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Install</span> <span class="hljs-string">dependencies</span>
        <span class="hljs-attr">run:</span> <span class="hljs-string">npm</span> <span class="hljs-string">install</span>

      <span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">StoryBook</span> <span class="hljs-string">Publish</span> <span class="hljs-string">to</span> <span class="hljs-string">Chromatic</span>
        <span class="hljs-attr">uses:</span> <span class="hljs-string">chromaui/action@v1</span>
        <span class="hljs-attr">with:</span>
          <span class="hljs-attr">projectToken:</span> <span class="hljs-string">${{</span> <span class="hljs-string">secrets.CHROMATIC_PROJECT_TOKEN</span> <span class="hljs-string">}}</span>


</code></pre>
</dd>
</dl>
<p>内容はパッケージマネージャーに npm を使っている場合なので yarn の場合は npm の部分を適宜変更してください。</p>
<p>次に、リポジトリの secret に Project Token（CHROMATIC_PROJECT_TOKEN）を登録しておきます。</p>
<div class="img_wrap"><img src="/images/posts/242/ZKy9FkP9i2yzhISMnvTA.png" width="800" height="369" alt="githubリポジトリsecret登録画面"></div>
<p>これで準備は完了です。UI を変更してリモートリポジトリに push し、プルリクを作成してみます。</p>
<p>プルリクを作成すると Chromatic にパブリッシュされ、以下のようにレビューの環境が立ち上がります。</p>
<div class="img_wrap"><img src="/images/posts/242/7ZquxFENOY9tLDPzAQji.png" width="800" height="332" alt="Chromaticでのレビュー環境が立ち上がる"></div>
<p>ステータスはこの段階では pending の状態です。</p>
<p>Chromatic のページへ行くか、ここの UI Review / UI Tests の Details リンクから Chromatic へ移動できるので、ここからレビューを開始できます。</p>
<p>Go to build ボタンを押下</p>
<div class="img_wrap"><img src="/images/posts/242/rXYbAvT2g7SKSCtP6A7c.png" width="800" height="296" alt="レビューページ"></div>
<p>変更点を選択</p>
<div class="img_wrap"><img src="/images/posts/242/sz7EsZ1o6dQHUy3O1dBR.png" width="800" height="296" alt="変更点を選択"></div>
<p>レビューを開始</p>
<div class="img_wrap"><img src="/images/posts/242/RqdCxeHtiMz3AmzpNWxX.png" width="800" height="415" alt="レビュー開始"></div>
<p>必要なレビューが全て Accepted になると Github プルリク上の「UI Review」が successful になり、Chromatic Pull Request 画面の右上にある Approve ボタンが押下されると、「UI Tests」が successful になります。</p>
<p>レビューを Accepted にする。</p>
<div class="img_wrap"><img src="/images/posts/242/f5MUrL39AlRdI2MmgLQh.png" width="800" height="330" alt="レビュー画面"></div>
<p>Chromatic Pull Request 画面から Approve にする。</p>
<div class="img_wrap"><img src="/images/posts/242/Ldb4ooZcH5ns3GU1YK4C.png" width="800" height="184" alt="Chromatic Pull Request 画面"></div>
<p>プルリク上の UI checks も全て successful になった</p>
<div class="img_wrap"><img src="/images/posts/242/JBdaa80uR8tH0QNLK7aG.png" width="800" height="333" alt="プルリク上の UI checks が全て successful になった"></div>
<h2 id="chromatic-におけるリグレッションテストコンポーネントのテストとはどういうことなのか">Chromatic におけるリグレッションテスト・コンポーネントのテストとはどういうことなのか。</h2>
<p>Chromatic で実施できるテストとはどういうことなのかを見てみます。</p>
<p>ロジックは jest などでテストするとして、Chromatic では「コンポーネントが成立するか」をテストできそうです。</p>
<p>例えばあるコンポーネントを変更したとして、それを使用する別のコンポーネントが壊れた際に、ここで検知できます。</p>
<div class="img_wrap"><img src="/images/posts/242/WnPdTL7sjEwGuLA7CBQj.png" width="800" height="331" alt="github ci 上でエラーにできる"></div>
<p>Chromatic 上でどこのコンポーネントが壊れてしまったか（表示できなくなったか）が確認できます。</p>
<div class="img_wrap"><img src="/images/posts/242/eRnvOs7HrlKvvq603gE9.png" width="800" height="317" alt="エラーとなったコンポーネントを確認できる"></div>
<p>UI レビューの他にもこういった表示を担保することのテストが Chromatic ではできそうです。</p>
<h2 id="まとめ">まとめ</h2>
<p>Chromatic を使うと UI レビューがやりやすくなったり、コンポーネントの成立を担保することができます。</p>
<p>UI のレビューって環境を用意したり、対面で自分の開発環境を使ったりしないと実際に近い状態を見せられないのが辛いところですが、Chromatic を用いれば web 上で Storybook にてコンポーネントを確認できるので便利でした。（プルリクがスクショの山にならなくて済む未来も）</p>
<p>テスト観点においても、コンポーネントが成立することを担保できると安心感は増しますね。</p>
<p>また、変更部分が全て出てくるため例えばボタンなどのように小さなコンポーネントを変更した際にはそれを使っているコンポーネントの差分が全て出てくるので、 全体としてこの変更で問題ないことも確認できて良いなと思いました。</p>
<p>他にも、ここでは紹介していませんが各コンポーネントはインデックスされ、ライブラリとして Chromatic 上でコンポーネントを管理できるのも便利だと思います。</p>
<p>Chromatic は総じて、UI 開発の体験を上げられるツールだなと思いました。</p>

Author