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

suzuki

Storybook のロゴ

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

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

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

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

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

Knobs のタブに指定した props が表示されます。

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

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

細かいルールはないのですが、このような感じでやっています。

おわりに

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

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

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


suzuki

投稿者 suzuki

HTML/CSS のマークアップから始まり、現在は React や TypeScript を使ったコンポーネント実装をすることが多いです。

淡々と実装するだけではなくコミュニケーションを取りながら、チームとしてプロジェクトを前に進めることを意識しています。

最近は会社の成長へのコミットに関心があり、組織・チーム全体で強まるためにはどうするのだろう?ということを考えています。