Vue と CSF によるモダンな Storybook 6 のはじめかた

shingo.sasaki

2023/01/10 追記 Storybook 7 + Vue 3 版を別途公開しました。使用するバージョンにあわせてどちらかを参照してください。 https://zenn.dev/sa2knight/books/storybook-7-with-vue-3 ---------- Storybook は、UIコンポーネントをサンドボックス上で動作させることで、デザインや振る舞いを開発環境を立ち上げずに確認できるUIカタログを作成するためのツールです。 本書では、現状(2020/10/26 時点) 最新版である Storybook 6.0.7 と、 Vue 2.6.11 を用いて、 CSF(Component Story Format) によるUIカタログの作成を行います。 内容のベースは公式ドキュメントのままですが、日本語で噛み砕きつつ、全体を俯瞰するよりも、ハンズオンでステップアップ学習できるような構成を心掛けています。 また、 CSF を使ったストーリーの定義や、 Storybook 6 特有の機能を用いるため、Storybook を初めて使う方に限らず、以前から使用しているが、最新の使い方をキャッチアップしたいという方にもオススメです。 なお、筆者は業務で Storybook 6.x を活用した Vue アプリケーション開発の生産性向上の取り組みを本業で行っており、その事例などについて以下ブログで紹介しております。 https://medium.com/studist-dev/upgrade-to-storybook-6-42da05471e7d