デザインシステムのStorybookとChromatic活用の紹介
私たちはStorybookとChromaticを活用してデザインシステムを運用しています。本記事では私たちがどのようにStorybookとChromaticを活用しているのか紹介します。
私たちが作ってるデザインシステムに自体ついては下記の記事をどうぞ。
StorybookとChromaticの簡単な紹介
Storybookは、コンポーネントを開発、テスト、管理するためのOSSツールです。私たちは、コンポーネントの動作を確認し、ドキュメンテーションを充実させるために、Storybookを中心に使用しています。Chromaticはこれを補完し、Visual Regression TestingやUIレビューを効率化します。
私たちのデザインシステムでも活用しています。Storybook上でコンポーネントの動作を確認できるため、実環境と分離したコンポーネントの動作確認ができ、コンポーネントのさまざまなパターンを検証することができます。
デザインシステムだけではなく、コンポーネントを中心に開発する手法はComponent-Driven Developmentとも呼ばれています。Component-Driven DevelopmentにおいてもStorybookは欠かせないツールになります。
Storybook Showcaseでは、さまざまなStorybookの活用方法を見ることができます。
ChromaticはStorybookを補完してくれるツールサービスです。Chromaticは一部無料で使用できますが、有料サービスです。Storybookで作成されたUIコンポーネントのVisual Regression Testing(VRT)、UIのレビュー、GitHubやFigmaとの統合などができるようになります。Chromaticと連携するとStorybookのホスティング等もやってくれるので便利です。
Chromaticの開発運営会社はStorybookの開発に携わっている人たちが中心で構成されています。
私たちはStorybookの力を最大限活用するために、StorybookだけではなくChromaticも活用しています。
ドキュメント
わたしたちのデザインシステムはデザインや開発のガイドラインから、コンポーネントの仕様までさまざまなドキュメントをStorybook上で管理しています。
コンポーネントの仕様書
コンポーネントの仕様ドキュメントはButtonを例にすると下記のようなものになります。
すべてのStorybook上でコンポーネントの実体と共に閲覧することができます。
## 操作の仕様
### マウス
- Container内をクリックすると、ボタンに割り当てられたアクションを実行します
- Labelが省略表示されている時、ホバーすると全文が表示されます
### キーボード
- Tabキーでボタンにフォーカスできます（disabledの状態を除く）
- フォーカスがある時、EnterキーおよびSpaceキーでボタンに割り当てられたアクションを実行できます
### スクリーンリーダー
- フォーカスした時、ボタンのラベルを読み上げます
- フォーカスがある時、EnterキーおよびSpaceキーでボタンに割り当てられたアクションを実行できます
##見た目の仕様
### 横幅はラベルに対して可変
サイズに応じて指定されている最小幅と最大幅の範囲内で、ボタンの横幅はラベルに応じて可変です。
### ラベルが最大幅を超える場合
最大幅が存在し、ラベルがボタンの最大幅を超える場合、省略記号(…)を文末に表示し、ホバー時にツールチップでラベルの全文字列を表示します。
### カーソル
disabled以外のすべての状態のとき、カーソルはリンクポインターを表示します。
### クリック範囲
Containerの大きさが、クリック可能範囲です。
ガイドラインのドキュメント
コンポーネントのドキュメント以外にもVoice&Toneや用語集など、デザイナーやライターが参照するドキュメントもSotyrbook上で管理しており、更新もデザイナーやライターと共に行なっています。マークダウンを更新すれば、ドキュメントに反映されるように、@storybook/addon-docsを使用し、MDXを反映できるようにしています。
export default {
stories: [
'../src/**/*.mdx',
'../src/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-docs',
],
};
Storybookと共に管理することで、仕様やガイドラインの意思決定の変化の歴史がGithub上で辿れるのもメリットになります。
Figmaとの連携
@storybook/addon-designsを使用することで、Storybook上でFigmaを参照することができます。
下記のようにStorybookに記述します。
export default {
title: 'Components/Button',
component: Button,
// addon-designsの設定
parameters: {
design: {
type: 'figma',
url: '表示したいFigma URLの指定'
}
}
} as Meta<typeof Button>;
Chromaticを使用することで、Figma上でStorybookを閲覧することも可能です。Dev Modeを使用することで各環境でFigmaプラグインを入れる必要もなくなります。
テスト
StorybookとChromaticを使用すると、コンポーネントのinteraction TestからVisual Regression Testまで行うことができます。詳しい設定は下記を参照するといいです。
また、StorybookとChromaticのテストを用いたHandbookもあるので合わせて見ると更に理解が深まります。
私たちのStorybookではコンポーネントを見るStory、interactionを見るStory、Visual Regression Testを行うStoryを分けており、1コンポーネントで3つのStoryファイルが存在しています。
- Button.stories.tsx
- Button.interaction.stories.tsx
- Button.vrt.stories.tsx
こうすることで、Storybookでコンポーネントを閲覧したい用途別で見ることができ、Visual Regression TestのためだけにあるStoryのノイズを減らすことができます。
2023年はChromaticのVisual Regression TestにSafariサポートが入ったこと大きな変化でした。
ChromaticのTurboSnapを活用する
Chromaticは従量課金になっています。Visual Regression Testのためにコンポーネントのスナップショットを残すので、このスナップショットを月にどれくらい撮ったのかが課金ポイントになります。
スナップショット数を絞るためにTurboSnapという機能があります。TurboSnapを使用することで、変更があったコンポーネントのみスナップショットを残すという運用にしています。
Chromaticがwebpack環境のため、StorybookのビルドにViteを使用している場合は、vite-plugin-turbosnapを使用してください。私たちはこれに気づかずに、しばらくTurboSnapが効いていませんでした...。
余談：StorybookとChromaticのこれからについて勝手に語る
Storybook上でのテスト機能の追加
Storybookは2023年11月に@storybook-testをリリースしました。
@storybook-testではVitestの機能を使用し、Storybookのinteraction Testをおこなうplay関数上でMock系の関数が利用できるようになります。これにより、よりStorybook上でテストを行いやすくなります。
来年もさらにStorybook上でコンポーネントのテストはしやすくなるでしょう。
ChromaticはStorybookの便利ツールを超えていく
ChromaticはStorybookだけではなく、PlaywrightとCypressの統合を発表しています。PlaywrightとCypressのスナップショットを比較するツールとしても使えるようになることで、Storybookの便利ツールを超えていくでしょう。そのほかにもStorybook上でChromaticの機能が活用できるなど、2024年はさまざまな機能がリリースされる予定らしいです。
StroybookとAIの連携
生成AIを活用し、コンポーネントからStroybookのファイルを生成してくれるツールが複数登場していきています。
Storybook GPT
Storybook Genie
これらのツールだけではなく、将来的にはStorybookのドキュメント検索にもAI連携がくるのではないかなと思っています。下記YoutubeリンクのNotion Q&Aのようなものがきてほしいです...。
まとめ
StorybookとChromaticを活用の紹介でした。この記事が、同じような課題に直面している他のチームや個人にとって、有益な情報となれば幸いです。
Discussion