最近は一人で開発することが多く、チームで開発するためにツールにはあまり注力してなくStorybookは評価していませんでした。今回すこし触ってみたのですが良いツールだと思ったので書いておきます。
Storybookとは
Storybookは、React(Vue, Angular…)などのコンポーネントのカタログを作るツールです。
導入したさいのメリットは以下のようなものが上げられています。
- 大規模なプロジェクトで複数の開発者が分担して、コンポーネントを開発しやすい
- （Reactのコードを読めない）デザイナーとの共同作業がしやすい
- チーム（社内）でのコンポーネントの再利用が進む
Storybookの画面
上の画面は、ジャンケンゲームのReactアプリの中にある結果表示コンポーネントが表示されています
- 左側のバーは、Storybookに登録されているコンポーネントの一覧が表示されています
- コンポーネント名をクリックすると、そのコンポーネント名の下に使用例（ストーリー）のリストが表示されます
- 上の画像では勝敗により色が変わった、結果表示コンポーネント画面が表示されています
- 右側にはコンポーネントの画面が表示されます、またコンポーネントのProps（引数）も表示されています
- Propsの値を（Control）変更すると、コンポーネントの表示がリアルタイムで変化します
- コンポーネントのソースコードのProps定義にコメントが書かれていると、この画面に表示されます
Storybookの定義ファイル
src/stories/コンポーネント.stories.tsx ファイルに以下のような定義ファイルを書くとStorybookに表示されます。
export defaultでコンポーネントの名前等を指定- ストーリー毎にコンポーネントの呼び出しコードをexportします
- 下の
Winではジャンケンに勝ったときの引数を渡していいます。Loseは負け、Drwaは引き分けの場合です
- 下の
- コンポーネントのProps定義は
const Template: Story<>で指定しています。Propsのコメント等は自動的に抽出されて表示されます
import React from 'react'
import { Story, Meta } from '@storybook/react/types-6-0'
import { ScoreListItemProps, ScoreListItem } from '../ScoreListItem'
import { Te, Judgment} from '../Jyanken'
export default {
title: 'Jyanken/ScoreListItem',
component: ScoreListItem,
} as Meta
const Template: Story<ScoreListItemProps> = (args) => <ScoreListItem {...args} />
export const Win = Template.bind({})
Win.args = {
score: {human: Te.Guu, computer: Te.Choki, created_at: new Date(), judgment: Judgment.Win}
}
export const Lose = Template.bind({})
Lose.args = {
score: {human: Te.Paa, computer: Te.Choki, created_at: new Date(), judgment: Judgment.Lose}
}
export const Draw = Template.bind({})
Draw.args = {
score: {human: Te.Choki, computer: Te.Choki, created_at: new Date(), judgment: Judgment.Draw}
}良いと思った点
大規模開発で使ったわけではないのでデザイナーとの共同作業などは判りませんが、良いなと思った点は
コンポーネントの開発が楽になる
Storybookの画面表示は、コードを変更すると直ぐに反映されるのでコンポーネントの開発が楽になると思います。とくに見た目の変更等は手軽にできると思います。
アプリ全体の中でコンポーネントを開発するのは、そのコンポーネントを表示するまでの手順が必要だったり、親（他）コンポーネントの変更の影響を受けたりしますが、Storybookを使えば1つのコンポーネント開発に集中できるのは素晴らしいと思います。
定義ファイルは簡単
上で定義ファイルの説明をしましたが最初はかなり戸惑いました。しかし慣れれば簡単です。
ごくわずかの手間でStorybookに登録できるのは素晴らしい事だと思います。コンポーネントと同期してメンテし続ける事はたいへんですが、定義ファイルの記述量が少ないのはありがたいです。
まとめ
Storybookは、大規模、多人数で開発するプロジェクトでは導入するとかなり効率が上がると思われます。
またStorybookに登録されたコンポーネントをデザイナー等がチェックする事で、UIの統一性が高まると思います。かつ開発者もStorybookをチェックする事で、コンポーネントの再利用性も高まると思います。
普段は使わないツールでも触れてみると発見がありますね😀
