はじめに
Vue.js(Nuxt.js)でプロジェクトを遂行していくと、たくさんのコンポーネントが作られていくと思います。そのコンポーネントを整理するうえで欠かせないのが、Storybookです。本記事と次回の記事で、Storybookの概要(本記事)と使い方(次回)について簡潔にまとめていきます。
※僕はよくVue.jsに使用しているので、「Vue.js(Nuxt.js)でプロジェクトを遂行していくと」と記載しましたが、コンポーネントを扱うReact等でもStorybookは使用できます。
Storybookとは
Storybookは、UI開発環境を提供するツールのことです。アプリの操作ができて、開発面やテスト面を助けてくれます。コンポーネントのふるまいをテストしたり、コンポーネントを一覧にしてカタログ化できるようにします（以下、Storybookの画面）。
Storybookを使うとなにがいいか、以下を抑えておいてください。
- StorybookでUIコンポーネントのカタログを作ることができる
- コンポーネントのCSS、フォント、画像などのUIの見た目の確認
- コンポーネントに公開しているプロパティを動的に変更して確認
- APIの仕様やスタイルの仕様の確認
- エンジニアとデザイナーの協業によるコミュニケーションの活性化
最後の「エンジニアとデザイナーの協業」っていうのはぶっちゃけいうと認識合わせみたいなところですかね。メールやSlackでやり取りするよりもわかりやすいかなと。
使い方
インストール
最初はインストールから始めましょう。
$ npm install -g @storybook/cli
$ getstorybook -V #確認
導入
Vue.jsプロジェクトにStorybookを追加しましょう。
$ cd プロジェクトのルート
$ getstorybook # プロジェクトルートでコマンド実行
正常に完了すると、.storybookディレクトリとsrc/storiesディレクトリがプロジェクトに追加されます。
また、package.jsonにStorybookタスクを追記しておきましょう。
"scripts": {
"storybook" : "start-storybook -p 6006",
"build-storybook" : "build-storybook"
},
..
"devDependencies" : {
#Vue.js向けのStorybookモジュールを追記
}
動作
$ npm run storybook
http:localhost:6006でStorybookにアクセスできます。
※src/storiesに定義したファイルが追加されていきます。
一度、サーバを立ち上げておけばコンポーネントに変更がかかると、それを検知してStorybookのリロードが入ります。毎回コマンドから立ち上げなくてもいいので、効率的ですね。
まとめ
part2(ストーリー実装編)で書いていきます。