Vue.js開発におけるStorybookの導入
2020.08.09
Storybookとは？
「Storybook」とは、UIコンポーネントの開発を手助けするオープンソースツールです。
Storybookを導入することで、下記のようなことが可能になります。
- アプリケーションから分離された環境で、コンポーネント単位の挙動を確認できる
- コンポーネントを一覧できるスタイルガイドとして利用し、チーム内で共有する
「Storybook」は、元々、Reactアプリケーション向けに開発されたツールでした。
現在では、「Vue」や「Angular」などのフレームワークや純粋な html など、様々なフロントエンドに対応しています。
今回は、シンプルなアプリケーションを例に、「Vue」アプリに「Storybook」を導入する流れを体験しましょう！
【 Storybook 公式ページ】
https://storybook.js.org/
こちらの記事もオススメ！
VueプロジェクトにStorybookを導入する
まずは、「Vue」プロジェクトに「Storybook」を導入してみましょう！
実行環境
執筆時に使用したパッケージのバージョンは、以下のとおりです。
1 2 3 4 5 6 7 8 | $ vue --version # Vue-Cli @vue/cli 4.3.1 $ npm --version # npm 6.4.1 $ yarn --version # Yarn 1.22.4 $ sb --version # Storybook 5.3.18 |
サンプルプロジェクトを作成する
まず最初に、「vue-cli」を使用して Vue プロジェクトを作成しましょう。
今回は、特に設定にこだわる必要はないので、デフォルトの設定で作成します。
（※ Storybook は、プロジェクト作成後にインストールします。）
1 2 3 4 5 6 | $ vue create storybook-sample Vue CLI v4.3.1 ? Please pick a preset: (Use arrow keys) > default (babel, eslint) Manually select features |
プロジェクト作成後、プロジェクトのルートディレクトリへ移動しておきます。
1 | $ cd storybook-sample/ |
Storybookをインストールする
作成したプロジェクトに Storybook をインストールします。
Storybook のインストールには、クライアントコマンド「sb」を使用します。
1 | $ npx -p @storybook/cli sb init |
「sb」を使用すると、煩わしい設定などが不要です。
簡単ですね！
追加されるファイル
実行後、プロジェクトに以下のファイルが追加されていることが確認できます。
| No | ファイル名 | 説明 |
| ① | .storybook/main.js | story 読み込み対象のディレクトリやアドオン設定などを記述 |
| ② | stories/Welcome.js | デモ用のサンプルコンポーネント |
| ③ | stories/MyButton.js | デモ用のサンプルコンポーネント |
| ④ | stories/0-Welcome.stories.js | ②のコンポーネントの story を記述 |
| ⑤ | stories/1-Button.stories.js | ③のコンポーネントの story を記述 |
※②～⑤は 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <template> <div class="original-button" @click="onClick"> <button :class="type"> {{emoji()}} <slot>Button</slot> </button> </div> </template> <script> export default { name: 'OriginalButton', props: { type: { type: String, default: 'info' } }, methods: { onClick() { this.$emit('click'); }, emoji() { switch (this.type){ case 'warn': return '⚠️'; case 'error': return '🔥'; default: return 'ℹ️'; } } } } </script> <style scoped> button { width: 100px; border: 3px solid; border-radius: 5px; padding: 5px 10px; background-color: whitesmoke; outline: none; } .info { color: blue; border-color: blue; } .warn { color: orange; border-color: orange } .error { color: red; border-color:red } </style> |
Storyの作成
続いて、作成したコンポーネントの story を作成します。
空ファイル作成
コンポーネントファイルと同様、下記コマンドで story 記述用の空ファイルを作成します。
1 | $ touch stories/2-OriginalButton.stories.js |
注意事項
story 記述用ファイルについては、以下の点に注意してください。
デフォルトでは「stories/**/*.stories.js」のパターンにマッチするファイルを認識します。
設定は「 .storybook/main.js」から変更可能です。
「.stories.js」より前のファイル名についての規則はありません。ただ、ナビゲーションパネルにはファイル名昇順で表示されるため、数字連番などを振って表示順を制御することを、おすすめします。
ファイルの中身
ファイルの中身には、以下のように1 ファイルに 1 コンポーネントの複数の story を定義していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import OriginalButton from '../src/components/OriginalButton'; /* コンポーネントの設定 */ export default { title: 'OriginalButton', // ナビゲーションパネルでの表示名となる component: OriginalButton, // 対象となるコンポーネントを定義する }; /* story記述 */ // default export const Default = () => ({ // 変数名がナビゲーションパネルでの表示名となる components: { OriginalButton }, // 対象となるコンポーネントを指定する template: '<original-button />' // レンダリングするhtmlを記述する }); // type: info export const Info = () => ({ components: { OriginalButton }, template: '<original-button type="info">Info</original-button>' }); // type: warn export const Warn = () => ({ components: { OriginalButton }, template: '<original-button type="warn"> Warn</original-button button > ' }); // type: error export const Error = () => ({ components: { OriginalButton }, template: '<original-button type="error">Error</original-button>' }); |
作成したコンポーネントを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が扱えるエンジニアを積極採用中です！詳しくはこちらをご覧ください。
こちらの記事もオススメ！
Vue.jsのおすすめ本
ライトコードよりお知らせ
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
IT技術2021.04.23【第2回】Djangoで日記アプリを作ろう～トップ画面編～- IT技術2021.04.16【第1回】Djangoで日記アプリを作ろう～環境構築編～
- IT技術2021.03.2910月20日メジャーアップデート！「Node.js v15」の新機能とは？
- IT技術2021.03.02TypeScriptの型を問題形式で学べる「type-challenges」とは？
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
