1. HOME
  2. ブログ
  3. IT技術
  4. Vue.js開発におけるStorybookの導入

Vue.js開発におけるStorybookの導入

Storybookとは?

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

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

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

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

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

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

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

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

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

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

実行環境

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

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

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

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

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

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

Storybookをインストールする

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

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

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

簡単ですね!

追加されるファイル

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

Noファイル名説明
.storybook/main.jsstory 読み込み対象のディレクトリやアドオン設定などを記述
stories/Welcome.jsデモ用のサンプルコンポーネント
stories/MyButton.jsデモ用のサンプルコンポーネント
stories/0-Welcome.stories.js②のコンポーネントの story を記述
stories/1-Button.stories.js③のコンポーネントの story を記述

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

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

実行!

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

ブラウザで表示

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

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

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

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

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

(上記画面では、Button コンポーネントの story “Emoji” を表示しています)

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

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

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

コンポーネントの作成

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

空ファイル作成

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

ファイルの中身

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

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

Storyの作成

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

空ファイル作成

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

注意事項

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

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

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

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

ファイルの中身

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

作成したコンポーネントを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のおすすめ本

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

 

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事