タグ

storybookとReactに関するd4-1977のブックマーク (2)

  • Storybook First な開発のススメ

    Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ

    Storybook First な開発のススメ
  • Storybook を使うときに気をつけていること

    Gaji-Labo では React コンポーネント開発時に Storybook を導入し Storybook 駆動開発をするケースが多いです。その際に気をつけていることをまとめました。 実際のコンポーネントのディレクトリ構造に合わせるStorybook の階層も実際のディレクトリ構造に合わせて、無秩序に置かないようにしています。 メインで開発しているメンバーだけが見るものとは限らないので、途中参加の開発者やデザイナーなどにも分かりやすいように構築します。 また、Storybook を見て、コンポーネントの全体像がざっくり分かるようにする目的もあります。 Addon Knobs を使ってコンポーネントの持つ props を分かりやすくするAddon Knobs を使用すると、Storybook UI を使ってコンポーネントの props を動的に編集できます。 直接実装を読みにいかなくとも

    Storybook を使うときに気をつけていること
    d4-1977
    d4-1977 2020/04/26
    Storybook使っていないので、今後使っていこうと思います(色々、見るところが増えたため…)
  • 1