Chapter 02

[準備編] Storybook 6 のセットアップ

shingo.sasaki
shingo.sasaki
2020.11.03に更新

Storybook をインストールする

ここまでで作成した vue プロジェクトに、 Storybook を導入します。

パッケージを個別にインストールし、設定ファイルを作成することもできますが、 vue 同様に、 Storybook にも sb という CLI が用意されています。

npx を使って、 sb を実行してみましょう。

$ npx sb init

上記コマンドによって、対象プロジェクトの構成を検知し、 Storybook を始めるためのパッケージの追加から、初期設定まで自動で行ってくれます。

コマンド実行完了後に、 package.json のdiffを見てみると、必要なパッケージが追加されていることに加え、Storybookを立ち上げるための storybook コマンド及び、静的ビルドするための build-storybook まで定義されていることがわかります。

package.json
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@storybook/addon-actions": "^6.0.27",
+    "@storybook/addon-essentials": "^6.0.27",
+    "@storybook/addon-links": "^6.0.27",
+    "@storybook/vue": "^6.0.27",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "react-is": "^17.0.1",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

さらに、 Storybook の設定ファイルである、 .storybook/main.js .storybook/preview.js が作成されているのに加え、 src/stories にサンプルコンポーネント及びストーリーファイルまで作成されています。いたれりつくせりですね。

$ git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   .storybook/main.js
        new file:   .storybook/preview.js
        modified:   package.json
        new file:   src/stories/Button.stories.js
        new file:   src/stories/Button.vue
        new file:   src/stories/Header.stories.js
        new file:   src/stories/Header.vue
        new file:   src/stories/Introduction.stories.mdx
        new file:   src/stories/Page.stories.js
        new file:   src/stories/Page.vue
        new file:   src/stories/assets/code-brackets.svg
        new file:   src/stories/assets/colors.svg
        new file:   src/stories/assets/comments.svg
        new file:   src/stories/assets/direction.svg
        new file:   src/stories/assets/flow.svg
        new file:   src/stories/assets/plugin.svg
        new file:   src/stories/assets/repo.svg
        new file:   src/stories/assets/stackalt.svg
        new file:   src/stories/button.css
        new file:   src/stories/header.css
        new file:   src/stories/page.css
        modified:   yarn.lock

Storybook を起動する

さて、この状態で、 Storybook を立ち上げる以下のコマンドを実行してみましょう。

$ yarn storybook
# npm run storybook でも可

localhost:6006 で Storybook が立ち上がり、最初から用意されていたサンプルのストーリーが表示されていることが確認できます。

少し触ってみるとお気づきになると思いますが、既に以下のような Storybook のほぼ全ての機能を試せる状態になっています。

  • サンドボックス(iframe)上でのコンポーネントの描画(基本機能)
  • MDX(JSX in Markdown)によるページ作成
  • コンポーネントに関するドキュメントの自動生成
  • GUI上での props の動的な切り替え
  • コンポーネントが発火するイベント(this.$emit)のロギング
  • 背景色の変更
  • ViewPort の変更

以降、本書ではこれらについての使い方を紹介しますが、既に完成された状態があると、ステップアップでの理解の妨げになってしまうため、一度全て削除してしまいます。

$ rm -rf .storybook/
$ rm -rf src/stories/

必須のファイル(.storybook/main.js)も削除したため、 Storybook は起動しなくなります。

$ yarn storybook
yarn run v1.19.2
$ start-storybook -p 6006
info @storybook/vue v6.0.27
info 
WARN Unable to close preview build!
ERR! Error: No configuration files have been found in your configDir

安心してください、本書を終える頃には、(概ね)元の状態に戻るようにします。