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/

Vue 入門の入門

Share

最近の投稿

概要はじめに2019年4月から新しいチームに配属されることになって、そこではScalaとPHPを使い分けて開発をおこなっていました4月5月では主に保守運用周り、並びにPHPでの開発を行いつつ、Scalaに慣れるために小さい修正を細々とおこなっていて、6月からついに本格的にScala開発に着手することになりました。レガシーな技術から新しい技術に乗り換えるということで、その中で開発言語はどうする......

概要https://storybook.js.org/StorybookとはUI開発環境を提供するツールReact、React Native、Angular、VueなどをサポートしているStorybookを使うとユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする公式のサンプル集h......

概要フロントエンド開発における状態管理、データフローがなんで重要なのか、Fluxとは何かなど主にVue.js目線ですが忘備録的にまとめますデータフローの設計・状態管理についてアプリケーションの規模が大きくなるに連れて状態管理が重要となってくる状態とはアプリケーションが保持するデータのことで例えばECサイトのカートなど、最初は空の状態から始まり商品をカートに入れることによってカートの中身が増え......

概要前にDoxygenの入門についてまとめたが実際にサンプルを見た方が理解が早いかと思うのでサンプルを作ってみる Doxygen入門の入門 ↑前に書いた記事、そっちでは Doxygenについての簡単な説明 導入方法 書き方などを書いた今回は、まずサンプルを見て理解をしたい人向けにサンプルのアプリケーションをGitHubに用意して、ドキュメントもGitHub Pagesで見ら......

概要1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.cssというのがあって気になったので使ってみるTrashy.cssを使うとHTMLの構造が可視化されるのでheader,nav,main,article,selction,footerなどの要素が正しく実装されているかを確認することができる使い方ブックマークレットが用意されてい......

カテゴリ一覧

データベース 運用 その他 開発 設計 テスト 言語 アルゴリズム 未分類 クラウドサービス AI イラスト デザイン SNS

タグ一覧

MySQL Oracle Linux 資格 テスト CI Jenkins 入門の入門 Perl API その他 Fabric PHP PHPUnit Ruby JavaScript YAML CircleCI C言語 Docker フレームワーク Selenium Fluentd ab Vim React Vagrant Cinnamon 監視ツール postfix HTML Google Cloud Platform Codeception Watson Node-RED LINE Vue.js 入門の次 PCF Vegeta Azure Firebase モジロイ Sass クリーンアーキテクチャ CSS twitter Flexbox 筋トレ ドキュメント Vue Scala