タグ

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

  • Do you like Storybook?

    Terraform v1.7のTest mocking機能の紹介 / Introducing the Test mocking feature of Terraform v1.7

    Do you like Storybook?
    d4-1977
    d4-1977 2023/07/02
    StoryBookの中身の話
  • 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使っていないので、今後使っていこうと思います(色々、見るところが増えたため…)
  • 静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って

    ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発(Component Driven Development)と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactVueAngularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう? 例えば私たちスタンダードデザインユニットでは、静的なHTMLCSSのアセ

    静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
    d4-1977
    d4-1977 2020/02/11
    StimulusとStylebookって組み合わせ可能なのか。Stimulus良いこともありつつ、どこまで任すか?は悩み。できなくはないけれど…という時がある。
  • 1