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は公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

TypeScriptの入門の入門チートシート 型の種類や使い方についてまとめていくだけでなく、 TypeScriptについてや必要性などについてもまとめることでこのページでTypeScriptをざっくり理解できる程度の内容を目指す

NetlifyのFormsやSplit Testing、Functionsについて使い方をまとめる FormsはNetlifyに標準機能として用意されているフォーム機能でコメント保存用にサーバを用意する必要がない Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

NetlifyとはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる、無料枠が豊富で独自ドメインを設定可能

WordPressからJekyll(GitHub Pages)に移行した手順をまとめる。 お金的な事情や使いやすさなどの理由で無料のJekyll+GitHub Pagesに移行した。JekyllとはMarkdown等から静的ページを生成する静的サイトジェネレータ

カテゴリ一覧

タグ一覧