vue、react及びstorybookの概要、運用方法の説明

Vue,React、storybookについての概要を説明します。

前提情報 Vue,React コンポーネント志向の良い点

近頃のフロントエンドではwebページを部品(コンポーネント)単位で作成するのが通例となっています。

■良い点
・部品を組み合わせればページが出来上がるので、エンジニアの生産性が大幅に向上します。
・再利用性の高いソースを作成することが出来、プロジェクトの垣根を超えたソース共有を可能にします。
・見た目の仕様変更に強い。共通部品を使っていれば1か所を修正するだけでOKです。
・部品ごとに機能が独立していて案件特有の仕様と疎結合にしやすく、コンポーネントの仕様が決まれば仕様を知らない人でも実装が可能です。
・既存案件にもCDN,npmライブラリを用いれば部分的な導入が可能です。
・ページごとでなく、コンポーネントごとに進捗管理をすることで粒度の細かい進捗管理がしやすいです。
・FigmaやXDといったデザインツールとの連携が可能で、Webデザイナーとの連携が取りやすいです。

前提情報コンポーネント志向の悪い点

■悪い点
コンポーネントの設計が難しい。
再利用性の高いコンポーネントを作るのも簡単ではなく、誰も使わなければコストだけかかって無駄になる。
Vue, React の知識が無いと実装出来ない。勉強コストがかかる
vue-datepickerみたいな「どこでも単独で動く」ライブラリは、設計もしっかりしてるし、使い方やドキュメントがしっかりあるから誰でも利用しやすい。
再利用性の高いコンポーネントを作るというのは、究極を言えば誰でも使えるnpmライブラリを沢山作るといったような形になります。

Storybookとは

ザックリ表現すると、作成したコンポーネントを表示、また実際に操作することが出来るライブラリのことです。
対応言語 React, Vue, Angular, HTML など...

Storybookはこういう時に便利

部品ができているかの進捗確認を行う時
→ storybookにあれば出来ています。
Storybookが無い場合はスクショ送るかpullしてもらう、ソースを見て確認するなど、手間がかかります。
※ 最低限のソース確認・レビューは必要だが、逐一は実際難しいです。

挙動のテストを行う際
→ storybookで動けば動きます
Storybookが無い場合は開発環境を更新するか、ローカルに落として確認を行う。
※ レビュワー用に検証用の環境を用意してからじゃないと確認不能

部品がどう動くかの仕様確認を行う際
→ storybookに仕様が表示されます。コードはサンプルをコピーしてください。
Storybookが無い場合は仕様書を用意するか、実演するか、テキストで説明する必要があります。

先方に見せるためのちょっとした動く画面が欲しい場合はstorybookのURL共有すれば確認が可能です。
※ ページ単位の大きなストーリーの作成も可能です。
Storybookが無い場合は先方の要望に合わせて確認用の環境、若しくはXD等を用意する必要があります。

Storybookのサンプル(Gitlab)

gitlabのstorybook
https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-accordion--default
普段gitlabで触っているUI部品の仕様とバリエーション、一覧が見れます。
※ コンポーネントのprops等のインターフェースについては、react, vueの知識が無いと読めない箇所もありますが、オプションでON, OFF 可能です。

導入にあたって発生する作業

1コンポーネント辺り、1つのstory.jsファイルの作成
仕様書・成果物の確認・UI共有に使えるので、いろんな手間を考えたら結果的に効率良いと思います。


```
import Card from '@/components/atoms/Card';
import ExampleJson from '@/stories/public/example.json';

// コンポーネントを読み込み
export default {
  title: 'Index/Card',
  component: Card,
};

// storyのテンプレートを定義 (オキマリ文)
const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Card },
  template:
    '',
});

// StoryのDefaultパラメータを定義
// ※ここをコピペで増やせば、様々なバリエーションのストーリーの作成ができる。
export const Default = Template.bind({});
Default.args = {
  baseUri : '',
  cardData : ExampleJson[0]
};

Storybookの運用方法について

npm run storybook:build 若しくは npm run build-storybook
( vue, reactの環境によってコマンド多少変わるので、必ずプロジェクトのpackage.jsonをご参照下さい )

上記コマンド実行で、静的ウェブアプリとしてdistが吐き出されます。
そのdistをウェブサーバ上に置くだけで動くのですが、それ用に環境を作るのもな～ということで

Gitlab Pages (Github Pages)
→ gitリポジトリ内にindex.htmlを置くだけでウェブページが見れるようになります。(超簡単)
ディレクトリ構造を変える事無く、Gitlab Pagesの読み込み先のindex.htmlをstorybookのindex.htmlに変えてあげるだけで良いです。
是非ご検討ください。

難しければ、storybook用に別のgitリポジトリを作るか、Netlify等の静的ウェブページホスティングサービスを利用する形になるかと思います。