Open15

StorybookをVueプロジェクトに入れたいので調べる

ドマオードマオー

やりたいこと

StorybookをVueプロジェクトに導入して使いたい

  • Storybookはコンポーネントの辞書ツール的なもの、Pixivとかで使っていると聞いた。
  • 今をときめくReact側勢力を対象とするツールであるがVueでも使える。
  • フロントエンド開発をより快適にするため 活用していきたい

使いたい理由

  • コンポーネントがいっぱいあるけど どれがどんな見た目かわからず 似たコンポーネントが増えている
  • コードレビュー出すとき このコンポーネントをいじりました! って示しやすくしたい。
  • ページ内で実際呼び出して表示していると 改修時に動作確認がしにくい (複合的要因で動かないこともある)
  • テスト文化を作っていきたい ( 見た目でよしオーケー! は不安が...)
  • 自動テストがしたい

前提条件

  • Vue 2.7 (後にVue3に移行するものとする)
  • Vuetify2
  • Vite
  • TypeScript
  • Github Actions OK

参考

感謝

  • 最近無限に azukiazusa氏の記事が参考になっている 感謝みが深い
ドマオードマオー

Storybook は、UI コンポーネントとページを別々に作るためのフロントエンドの工場です。何千ものチームが UI の開発、テスト、および文書化に使用しています。 らしい

ドマオードマオー

ページに密結合でなく、コンポーネントを独立させて単独で使う想定 / ロジックを含まない構築方法を推奨するらしい

ドマオードマオー

Storybookでできるテスト

  • スポットテスト(手動テスト)
  • ビジュアルリグレッションテスト(1pxでも差分があれば検出)
  • ユーザーの動作のシミュレーションテスト
  • アクセシビリティチェック
  • おかしなタグがないかチェックするテスト
  • Jestとか他ので再利用して ロジックのテスト

つまり UIのレビューやUIのCIテスト、バージョン管理がしやすくなる

ドマオードマオー

Storybookの用途まとめ

  • UIの一部分/コンポーネントの開発やテスト支援
    • 特定のコンポーネントだけを(任意のProp等を設定して)ブラウザ上で操作して試せる
    • 開発者でなくてもすぐに動作テストができるようになる
  • UIのドキュメント化ができる
    • 任意のドキュメントを足して色々できる
    • HTMLとして生成できるのでどこかでホストして簡単に試せる
  • UIがテスト可能になる
    • 差分テスト/タグ仕様テスト/アクセシビリティテスト/ Jest等と合わせた ロジックテスト が容易にできる
    • CIでも利用できる

https://storybook.js.org/docs/vue/get-started/introduction

ドマオードマオー

Storybookの導入

基本的には 既存のプロジェクト上で npx storybook init をしたら 自動インストーラ的なのが起動して 自動判別して最適な環境を作ってくれるらしい。(自動で動く気がしないが、まぁ実際導入時に詰まったら調べ直せばいいかな)

https://storybook.js.org/docs/vue/get-started/install

ドマオードマオー

Storybookで使うファイル: Story (.stories.ts) とは

Storybookに表示したい関心事、を設定するファイル。
インポートするコンポーネント名を指定、コンポーネント表示の際のデフォルト引数を指定、などなどする。args とやらの引数をコンポーネントから取ってきて、自動で 色々操作してコンポーネントを操作可能にすることができる。

与える引数(prop)は controlタブ / 操作結果(emit)は actionタブ で 設定/確認できる
複数 Story.bind をしたら いくつかの表示パターンを 予め設定して表示したりできる。

https://storybook.js.org/docs/vue/get-started/whats-a-story

ドマオードマオー

どうもGithubのを見るに、Actions(props)を設定せず 組み合わせたものをそのまま出すという
(propを直接弄って遊べる用途だけでなく) テストだけを想定した環境も割と有りなのかもしれない。