はじめに
本記事は Storybookについて簡潔にまとめる(part1) の続きです。
前回はStoryBookとはどういうものか？また、Storybookのインストールや導入方法についてみていきました。今回の記事では実際にコンポーネントをStorybook上に定義して、Storybook上にそのコンポーネントを表示させていきます。
Storybookの画面構成
画面構成は以下の画像のようになります。
それぞれのパネルの説明です。
| パネル | 説明 |
|---|---|
| Storyパネル | Storybook上に載せるストーリー一覧を表示 |
| プレビューパネル | ストーリーパネルで選択したコンポーネントの実装内容が表示 |
| アドオン拡張パネル | Storybook上で使用されるアドオン拡張機能を表示 |
Storybookのストーリーを実装する
前回の記事でもありましたが、Storybookを導入するにあたって追加されるディレクトリはsrc/storiesと.storybookです。これらを編集することでStorybookは編集されます。今回はサンプルとして、exampleというコンポーネントを元にストーリーを実装していきます。src/stories/example.stories.jsを作成しましょう。
※ストーリーを実装するにあたって、ファイル名の末尾に.storiesをつけましょう（必須）。
src/stories/example.stories.js
//Storybookのapiを読み込む
import { storiesOf } from '@storybook/vue'
//対象のコンポーネントを読み込む
import Example from '../components/example.vue'
//storiesOfで登録
storiesOf('Example',module)
//addでコンポーネントオプションを追加してストーリーを登録
.add('基本操作',() => {
components: { Example }, //コンポーネントを定義
template: '', //テンプレートを定義
methods : { //コンポーネントで使用するメソッドを定義
alertSign: function(){
alert('Example!')
}
}
})
Storybookを公開する
公開方法はpackage.jsonで定義したコマンドを入力
$ npm run build-storybook
ビルド用のディレクトリがプロジェクトルートに作成されると思うのでそれをサーバにあげると完了です。
まとめ
Storybookを使うか使わないかで、エンジニアとデザイナーの協業によるコミュニケーションや作業の効率化で大きく変わってくると思います。ぜひ使ってみてください。