Vue.js開発におけるStorybookの導入
2021.12.20
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のおすすめ本
書いた人はこんな人
- 「好きなことを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もりは大歓迎！
また、WEBエンジニアとモバイルエンジニアも積極採用中です！
ご応募をお待ちしております！
ITエンタメ2022.05.25COBOL開発者は「コンピューターおばあちゃん」で海軍准将!?グレース・ホッパー- ITエンタメ2022.05.23マイクロソフトの壁は穴だらけ!?デヴィッド・カトラー
- ITエンタメ2022.05.13ホーコン・ウィウム・リーが提唱したCSSの過去と未来
- ITエンタメ2022.04.28ラスムッセン兄弟が作ったグーグルマップの軌跡
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
