StorybookをVueプロジェクトに入れたいので調べる
お窓やりたいこと
StorybookをVueプロジェクトに導入して使いたい
- Storybookはコンポーネントの辞書ツール的なもの、Pixivとかで使っていると聞いた。
- 今をときめくReact側勢力を対象とするツールであるがVueでも使える。
- フロントエンド開発をより快適にするため 活用していきたい
使いたい理由
- コンポーネントがいっぱいあるけど どれがどんな見た目かわからず 似たコンポーネントが増えている
- コードレビュー出すとき このコンポーネントをいじりました! って示しやすくしたい。
- ページ内で実際呼び出して表示していると 改修時に動作確認がしにくい (複合的要因で動かないこともある)
- テスト文化を作っていきたい ( 見た目でよしオーケー! は不安が...)
- 自動テストがしたい
前提条件
- Vue 2.7 (後にVue3に移行するものとする)
- Vuetify2
- Vite
- TypeScript
- Github Actions OK
参考
- https://storybook.js.org/docs/vue/get-started/introduction
- https://azukiazusa.dev/blog/storybook-testing
- https://zenn.dev/delta/articles/87ba80aacb1469
- https://zenn.dev/tyanmio/articles/6daf4108635217
- https://zenn.dev/azukiazusa/articles/df307292037265
- https://zenn.dev/azukiazusa/articles/vue-a11y-testing
- https://zenn.dev/azukiazusa/articles/storybook-interaction-testing
- https://zenn.dev/kamy112/articles/962a38d6294644
- https://zenn.dev/sum0/articles/9463d16d9d40e2
- https://kiyobl.com/hygen/
感謝
- 最近無限に azukiazusa氏の記事が参考になっている 感謝みが深い
お窓とりあえずまずは storybookが何ができるものなのか、公式サイトを見るのがスジだろうってことで 公式サイトを読む
お窓Storybook は、UI コンポーネントとページを別々に作るためのフロントエンドの工場です。何千ものチームが UI の開発、テスト、および文書化に使用しています。 らしい
お窓ページに密結合でなく、コンポーネントを独立させて単独で使う想定 / ロジックを含まない構築方法を推奨するらしい
お窓新しいコンポーネントを作るときの開発環境 / UIドキュメント / 動作のテスト環境 / として 使えるとのこと
お窓普通起こり得ない いろんなpropの場合の表示を簡単に試せるとか
お窓Storybookでできるテスト
- スポットテスト(手動テスト)
- ビジュアルリグレッションテスト(1pxでも差分があれば検出)
- ユーザーの動作のシミュレーションテスト
- アクセシビリティチェック
- おかしなタグがないかチェックするテスト
- Jestとか他ので再利用して ロジックのテスト
つまり UIのレビューやUIのCIテスト、バージョン管理がしやすくなる
お窓Storybookの用途まとめ
- UIの一部分/コンポーネントの開発やテスト支援
- 特定のコンポーネントだけを(任意のProp等を設定して)ブラウザ上で操作して試せる
- 開発者でなくてもすぐに動作テストができるようになる
- UIのドキュメント化ができる
- 任意のドキュメントを足して色々できる
- HTMLとして生成できるのでどこかでホストして簡単に試せる
- UIがテスト可能になる
- 差分テスト/タグ仕様テスト/アクセシビリティテスト/ Jest等と合わせた ロジックテスト が容易にできる
- CIでも利用できる
お窓Storybookの導入
基本的には 既存のプロジェクト上で npx storybook init をしたら 自動インストーラ的なのが起動して 自動判別して最適な環境を作ってくれるらしい。(自動で動く気がしないが、まぁ実際導入時に詰まったら調べ直せばいいかな)
お窓Storybookで使うファイル: Story (.stories.ts) とは
Storybookに表示したい関心事、を設定するファイル。
インポートするコンポーネント名を指定、コンポーネント表示の際のデフォルト引数を指定、などなどする。args とやらの引数をコンポーネントから取ってきて、自動で 色々操作してコンポーネントを操作可能にすることができる。
与える引数(prop)は controlタブ / 操作結果(emit)は actionタブ で 設定/確認できる
複数 Story.bind をしたら いくつかの表示パターンを 予め設定して表示したりできる。
お窓Storybook導入時の注意点
- 自動で 設定終わってないかも (バンドラ/ビルド構成による)
- スタイルが反映されてないかも (手動でHEADにCSS読み込ませるなど要るかも)
- 生成結果を特定のフォルダに保存しておくことができる
お窓とりあえず導入ガイドに書いてあるのはここまで。
(React版には日本語訳あったけど Vue版には 日本語訳無いの気づいたので PR作ろうかな...
お窓Githubでの Storybook導入事例が 紹介されてた(実際見れる)
お窓どうもGithubのを見るに、Actions(props)を設定せず 組み合わせたものをそのまま出すという
(propを直接弄って遊べる用途だけでなく) テストだけを想定した環境も割と有りなのかもしれない。
お窓GettingStartedは読んだので がっつりした入門チュートリアルも見てみる