Storybook入門の入門

Published: 2019年1月22日 by tomsato

概要

https://storybook.js.org/

StorybookとはUI開発環境を提供するツール
React、React Native、Angular、Vueなどをサポートしている

Storybookを使うとユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする

公式のサンプル集

https://storybook.js.org/examples/

ゼロからNuxtのアプリケーションを作成してStorybookを追加してみる

$ vue init nuxt-community/starter-template nuxt-storybook-sample
$ cd nuxt-storybook-sample
$ yarn install
$ yarn dev

http://localhost:3000
で見れるようになる

</figure>

この状態からStorybookを導入する

$ yarn add -D @storybook/vue
$ yarn add -D babel-loader vue-loader vue-template-compiler
$ yarn add -D @babel/core babel-preset-vue @babel/preset-env

Storybookのコマンドを準備する

$ vim package.json
"scripts": {
  ... 既に記載されているものは省略 ...
  "storybook": "start-storybook -p 9001 -c .storybook",
  "buid-storybook": "build-storybook -s public"
}
$ mkdir .storybook stories

設定ファイルを準備する

$ vim .storybook/config.js
import { configure } from '@storybook/vue'

// stories/*.stories.jsを読み込む
const req = require.context("../stories", true, /.stories\.js$/)
const loadStories = req.keys().forEach(req)

configure(loadStories, module)

Storyが無い状態だが一度動かしてみる

$ yarn storybook
yarn run v1.13.0
$ start-storybook -p 9001 -c .storybook
info @storybook/vue v4.1.7
info
info => Loading presets
info => Loading presets
info => Using default webpack setup.
webpack built 40ecc0a708f32f8ef6bd in 3698ms
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 4.1.7 started                          │
│   4.59 s for manager and 4.22 s for preview        │
│                                                    │
│   Local:            http://localhost:9001/         │
│   On your network:  http://xxx.xxx.xxx.xx:9001/    │
│                                                    │
╰────────────────────────────────────────────────────╯

http://localhost:9001/
が開かれてStorybookが見れるようになる

</figure>

Storyを追加してみる

Applogoコンポーネント(components/AppLogo.vue)があるはずなのでそのStoryを作成してみる

$ vim stories/AppLogo.stories.js
import { storiesOf } from '@storybook/vue'
import AppLogo from './../components/AppLogo.vue'

storiesOf('AppLogo', module)
  .add('story as a component', () => ({
    components: { AppLogo },
    template: `
      <div>
        <h2>AppLogoコンポーネント</h2>
        <app-logo/>
      </div>
    `
}))
$ yarn storybook

Storybookに表示されるようになった

</figure>

Storybookでできること

  • CSS、フォント、画像などの見た目の確認
  • input要素、button要素などのインタラクションの確認
  • コンポーネントのプロパティをStorybook上で動的に変更して挙動の確認

利用用途

  • コンポーネントのスタイルガイド
    • コンポーネントを一覧にしてカタログ化できるのでスタイルガイドとして見せることができる
  • コンポーネントのドキュメント
    • コンポーネントをどう利用するかなど補足説明を記述でき、動作の確認までできる
  • 開発時のコンポーネントUIテスト
    • Storybook上でコンポーネント単体でUIの確認ができる

アドオンの追加

アドオンを追加することでさらに使いやすくなる

試しにコンポーネントの情報を表示するアドオンを追加してみる

$ yarn add -D storybook-addon-vue-info
$ vim stories/AppLogo.stories.js
import { storiesOf } from '@storybook/vue'
import AppLogo from './../components/AppLogo.vue'
import VueInfoAddon from 'storybook-addon-vue-info'

storiesOf('AppLogo', module)
  .addDecorator(VueInfoAddon)
  .add('story as a component', () => ({
    components: { AppLogo },
    template: `
      <div>
        <h2>AppLogoコンポーネント</h2>
        <app-logo/>
      </div>
    `
}))
$ yarn storybook

自動でソースコードやPropsの情報が表示されるようになる

他にも多数のアドオンがあるので色々試してみると面白いかも

https://storybook.js.org/addons/addon-gallery/

コメントを書く

※ 個別に返信が必要な時のみご記入ください

※ Emailは公開されません

※ 承認されると名前・コメントが下記に表示されます

コメント一覧

最近の投稿

ビジュアルリグレッションテストについてまとめ、ネットで調べると数多くのライブラリがありどれがどんな立ち位置なのか全体像がわかりずらかったのでどんな種類があるのか入門の入門としてまとめます、またPlaywrightを使って実際に触ってみました

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

カテゴリ一覧

タグ一覧