Storybook を使うときに気をつけていること

Gaji-Labo では React コンポーネント開発時に Storybook を導入し Storybook 駆動開発をするケースが多いです。その際に気をつけていることをまとめました。

実際のコンポーネントのディレクトリ構造に合わせる

Storybook の階層も実際のディレクトリ構造に合わせて、無秩序に置かないようにしています。
メインで開発しているメンバーだけが見るものとは限らないので、途中参加の開発者やデザイナーなどにも分かりやすいように構築します。
また、Storybook を見て、コンポーネントの全体像がざっくり分かるようにする目的もあります。

Addon Knobs を使ってコンポーネントの持つ props を分かりやすくする

Addon Knobs を使用すると、Storybook UI を使ってコンポーネントの props を動的に編集できます。
直接実装を読みにいかなくともコンポーネントの機能や振る舞いがある程度分かるように Knobs を使用しています。

stories が何を表しているか明確にする

1つのコンポーネントに対して複数 stories を作る場合、stories が何を表しているのか分かるよう意識しています。
props による変化を Addon Knobs で確認することもできますが、使われ方としてこういうパターンがあります、というのを予め用意しておきたい場合は stories として追加したりします。

おわりに

Storybook はコンポーネント開発時に効果的ですが、最終的には使われ続けてメンテナンスされる事が大切です。（もちろんプロダクトの性質やフェーズにもよります）

我々は受託なので、各プロジェクトにずっと携われる訳ではないのですが、私たちが離れたあと少しでも活用してもらえるよう、これらのことに気を付けて Storybook を活用しています。