Storybookを導入してみた
今回のお話のサイト
VRTをPlaywrightで導入したものの
Pass/Failが自動判定なので意図した変更でもFailになってしまうのが煩わしく
ベースラインの撮り直しも都度必要で少し手間に感じていました。
前職の仕組みを改めて思い出してみたところ
StorybookとStorycapを組み合わせてreg-suitで差分を視覚的に確認する構成だとわかりました。
それに加えてコンポーネントカタログとしても活用できるので導入することにしました。
Storybookとは
Storybookはコンポーネントを独立した環境で開発・確認できるツールです。
各コンポーネントの見た目や動作を
アプリ全体を起動せずに確認できるのが特徴です。
デザイナーや他のエンジニアとのコミュニケーションツールとしても使えますし
コンポーネントのドキュメントとして公開することもできます。
技術選定
Storybookと組み合わせるVRTのツールとして
StorycapとStorycap + reg-suitの構成を選びました。
- Storybook：コンポーネントカタログ
- Storycap：Storybookのスクリーンショット撮影
- reg-suit：画像差分比較・レポート生成
ただStorycapとreg-suitの導入は別途進める予定なので
今回はStorybookの導入とデプロイまでを対応しました。
## 実装したこと
各コンポーネントのStoryを作成しました。
ディレクトリ構成はコンポーネントと同じ場所に配置する形にしました。
components/
├── ui/
│ ├── TelButton/
│ │ ├── index.tsx
│ │ └── TelButton.stories.tsx
│ └── ... └── sections/
├── KeyVisual/
│ ├── index.tsx
│ └── KeyVisual.stories.tsx
└── ...
またStoryを作成するタイミングで
各コンポーネントのデータを data/ ディレクトリに切り出しました。
型定義は defs/types/ に、定数は defs/constants/ にまとめています。
Storybookのビューポート設定も追加したので
PC・スマホそれぞれの表示を確認できるようになっています。
デプロイ
Cloudflare Pagesに同じリポジトリからデプロイしています。
ビルドコマンドを npm run build-storybook
出力ディレクトリを storybook-static に設定することで
HPとStorybookを別サイトとして管理できます。
mainブランチへのpushで自動デプロイされるので
コンポーネントを追加・更新するたびに自動で反映されます。
実際のStorybookはこちらから確認できます。
https://karaoke-compa-storybook.atsmile.dev
やってみて
コンポーネントを独立した環境で確認できるのは思っていた以上に便利でした。
Storyを作成するタイミングでデータや型の整理もできたので
コードの品質も上がったと思っています。
次は Storycapとreg-suitを導入して
差分を視覚的に確認できる仕組みを整えていく予定です。