
2023/01/10 追記
Storybook 7 + Vue 3 版を別途公開しました。使用するバージョンにあわせてどちらかを参照してください。
<a href="https://zenn.dev/sa2knight/books/storybook-7-with-vue-3" target="_blank" rel="nofollow noopener noreferrer">https://zenn.dev/sa2knight/books/storybook-7-with-vue-3</a>

----------

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 アプリケーション開発の生産性向上の取り組みを本業で行っており、その事例などについて以下ブログで紹介しております。
<a href="https://medium.com/studist-dev/upgrade-to-storybook-6-42da05471e7d" target="_blank" rel="nofollow noopener noreferrer">https://medium.com/studist-dev/upgrade-to-storybook-6-42da05471e7d</a>


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

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

非推奨のお知らせ

[準備編] Vue プロジェクトのセットアップ

[準備編] Storybook 6 のセットアップ

[準備編] Vue コンポーネント の作成

[基本編] .storybook/main.js の作成

[基本編] .stories.js ファイル の作成

[アドオン編] Essential addons について

[アドオン編] Controls addon

[アドオン編] Actions addon

[アドオン編] Viewport addon

[アドオン編] Backgrounds addon

[アドオン編] Docs addon

[発展編] Decorators を定義する

[発展編] ツールバーとグローバルパラメータ

その他のTips

zenn

storybook

shingo.sasaki