Storybookとは？

「Storybook」とは、UIコンポーネントの開発を手助けするオープンソースツールです。

Storybookを導入することで、下記のようなことが可能になります。

1. アプリケーションから分離された環境で、コンポーネント単位の挙動を確認できる
2. コンポーネントを一覧できるスタイルガイドとして利用し、チーム内で共有する

「Storybook」は、元々、Reactアプリケーション向けに開発されたツールでした。

現在では、「Vue」や「Angular」などのフレームワークや純粋な html など、様々なフロントエンドに対応しています。

今回は、シンプルなアプリケーションを例に、「Vue」アプリに「Storybook」を導入する流れを体験しましょう！

【 Storybook 公式ページ】
https://storybook.js.org/

VueプロジェクトにStorybookを導入する

まずは、「Vue」プロジェクトに「Storybook」を導入してみましょう！

実行環境

執筆時に使用したパッケージのバージョンは、以下のとおりです。

1$ vue --version  # Vue-Cli
2@vue/cli 4.3.1
3$ npm --version  # npm
46.4.1
5$ yarn --version # Yarn
61.22.4
7$ sb --version   # Storybook
85.3.18

サンプルプロジェクトを作成する

まず最初に、「vue-cli」を使用して Vue プロジェクトを作成しましょう。

今回は、特に設定にこだわる必要はないので、デフォルトの設定で作成します。

（※ Storybook は、プロジェクト作成後にインストールします。）

1$ vue create storybook-sample
2
3Vue CLI v4.3.1
4? Please pick a preset: (Use arrow keys)
5> default (babel, eslint)
6  Manually select features

プロジェクト作成後、プロジェクトのルートディレクトリへ移動しておきます。

1$ cd storybook-sample/

Storybookをインストールする

作成したプロジェクトに Storybook をインストールします。

Storybook のインストールには、クライアントコマンド「sb」を使用します。

1$ npx -p @storybook/cli sb init

「sb」を使用すると、煩わしい設定などが不要です。

簡単ですね！

追加されるファイル

実行後、プロジェクトに以下のファイルが追加されていることが確認できます。

※②～⑤は HelloWorld 的なサンプルファイルなので、実運用時は消して問題ありませんが、①を消してしまうと正常に動かなくなるので注意してください。

これで、Storybook を動かす準備ができました！

実行！

以下のコマンドを実行し、さっそく動かしてみましょう。

1$ yarn storybook

ブラウザで表示

コマンド実行後、ブラウザから http://localhost:6006 へアクセスすると、以下の画面が表示されます。

ナビゲーションパネルの表示

画面左のナビゲーションパネルを展開すると、下の画面のような表示になります。

第一階層が各コンポーネント、第二階層がコンポーネントの story （≒コンポーネントの1つの状態）を表しています。

ナビゲーションパネルで story を選択すると、右側にその story の内容が表示されます。

（上記画面では、Button コンポーネントの story "Emoji" を表示しています）

自作コンポーネントをStorybookに追加しよう

前章では、プロジェクトに Storybook を導入する流れまでを確認することができました。

次に、自作コンポーネントのスタイルガイドを作ってみましょう。

コンポーネントの作成

今回は例として、プロパティ「type」で渡された値に応じて表示が変化する「Buttonコンポーネント」を作成します。

空ファイル作成

まず下記コマンドで、空のコンポーネントファイルを作成します。

1$ touch src/components/OriginalButton.vue

ファイルの中身

作成したコンポーネントファイルの中身に、以下を記述します。

※今回は Storybook の記述がメインなので、コンポーネントの説明は割愛します。

1<template>
2  <div class="original-button" @click="onClick">
3    <button :class="type">
4      {{emoji()}} <slot>Button</slot>
5    </button>
6  </div>
7</template>
8
9<script>
10export default {
11  name: 'OriginalButton',
12  props: {
13    type: {
14      type: String,
15      default: 'info'
16    }
17  },
18  methods: {
19    onClick() {
20      this.$emit('click');
21    },
22    emoji() {
23      switch (this.type){
24        case 'warn':
25          return '⚠️';
26        case 'error':
27          return '🔥';
28        default:
29          return 'ℹ️';
30      }
31    }
32  }
33}
34</script>
35
36<style scoped>
37button {
38  width: 100px;
39  border: 3px solid;
40  border-radius: 5px;
41  padding: 5px 10px;
42  background-color: whitesmoke;
43  outline: none;
44}
45.info {
46  color: blue;
47  border-color: blue;
48}
49.warn {
50  color: orange;
51  border-color: orange
52}
53.error {
54  color: red;
55  border-color:red
56}
57</style>

Storyの作成

続いて、作成したコンポーネントの story を作成します。

空ファイル作成

コンポーネントファイルと同様、下記コマンドで story 記述用の空ファイルを作成します。

1$ touch stories/2-OriginalButton.stories.js

注意事項

story 記述用ファイルについては、以下の点に注意してください。

デフォルトでは「stories/**/*.stories.js」のパターンにマッチするファイルを認識します。

設定は「 .storybook/main.js」から変更可能です。

「.stories.js」より前のファイル名についての規則はありません。ただ、ナビゲーションパネルにはファイル名昇順で表示されるため、数字連番などを振って表示順を制御することを、おすすめします。

ファイルの中身

ファイルの中身には、以下のように1 ファイルに 1 コンポーネントの複数の story を定義していきます。

1import OriginalButton from '../src/components/OriginalButton';
2
3/* コンポーネントの設定 */
4export default {
5  title: 'OriginalButton',    // ナビゲーションパネルでの表示名となる
6  component: OriginalButton,  // 対象となるコンポーネントを定義する
7};
8
9/* story記述 */
10// default
11export const Default = () => ({    // 変数名がナビゲーションパネルでの表示名となる
12  components: { OriginalButton },  // 対象となるコンポーネントを指定する
13  template: '<original-button />'  // レンダリングするhtmlを記述する
14});
15
16// type: info 
17export const Info = () => ({
18  components: { OriginalButton },
19  template: '<original-button type="info">Info</original-button>'
20});
21
22// type: warn 
23export const Warn = () => ({
24  components: { OriginalButton },
25  template: '<original-button type="warn"> Warn</original-button button > '
26});
27
28// type: error 
29export const Error = () => ({
30  components: { OriginalButton },
31  template: '<original-button type="error">Error</original-button>'
32});

作成したコンポーネントをStorybookから確認する

それでは、作成したコンポーネントを Storybook で表示してみましょう！

yarn storybook コマンドで Storybook を起動します。

すると以下のように、自作したコンポーネントの story が、Storybook に追加されていることが確認できます。

Default

Info

Warn

Error

Storybookをビルドする

これまでの章では、yarn storybook コマンドを使ってローカルサーバを立ち上げて、Storybook を確認していました。

一方、yarn build-storybook コマンドを使用すると、プロジェクト内の「storybook-static」ディレクトリに静的 html として書き出されます。

開発環境を持たない人たち（デザインチームや顧客）とデザインの共有をする場合は、こちらの方法が役に立ちますね！

さいごに

シンプルな Button コンポーネントを例に、Storybook を用いてスタイルガイドを作成する流れを説明しました。

今回は基本的な機能の紹介まででしたが、Storybook が提供する強力なアドオンを活用すると、スタイルガイドとしての機能強化やテストでの活用などより多くのことができるようになります。

あなたのチームが抱える「フロントエンド開発の課題」を Storybook が解決してくれるかもしれません。

興味が沸いた方は、ぜひ Storybook の公式ページへアクセスし、より深く Storybook を学んでみてください！

こちらの記事もオススメ！

Vue.jsのおすすめ本

これからはじめるVue.js実践入門