storybook 入門

storybookの理解から逃げない...!!!!

Storybookを使う目的

以下5つ当たりか

1. UIコンポーネントの開発効率を上げる

アプリから独立して開発できるので、いちいちアプリを立ち上げずにコンポーネント開発ができる。

2. UIコンポーネントのカタログ化して、ドキュメントとして保持できる。

対象コンポーネントには、どういう見た目があり得るのかをカタログ化して記録しておける。

3. デザイナーとの連携を強化しながらコンポーネント開発ができる

デザイナーの協力を容易に得ながら、一緒にUIコンポーネントを実装できる。

デザイナーの意図通りのデザインにできてるかとか、すぐ調整できる。

4. 回帰テストを作って、UIの型崩れや振る舞いの誤作動を検知する

変更に敏感になりすぎて、警告やエラーが発生しまくるとか想像できる。

だから、全てのコンポーネントに対してこれをやると、Storybook テスト疲れが起こる。

ポイント

1. ビジュアルテスト、スナップショットテストは影響が大きい箇所だけに限定する

2. 振る舞いのテストは「1.」よりは良いかも。壊れにくいと思う。

5. ブラウザ間の違いもコンポーネント単位で見れるのは便利かもな

この5番目は後で思った。

ブラウザは1つだけじゃない。その違いをアプリ立ち上げて確認するのは面倒くさすぎる。

だから、Storybookなどのツールでコンポーネント単位で確認できるのは大きいかも。

レスポンシブの動作とかも。

公式に書いてある

やっぱり「1.」に始まる感じ感じだな

コンポーネント単体で動作確認することができる。それが開発効率を上げる。まずはこれが基本である。

それ以外のは派生って覚えておこう、。

Storybookでテストはしない方がいい説

「開発効率が上がる」のは確かにそうだなって思う。アプリ起動せずとも調整しやすいのでGood。

ていうか多分、デザイナー用の目的が強いと思う。

デザインを変更改善する際とかは、Storybookをチェックするのかも？

でも、figmaとかあるんじゃないの？あれ？

挙動とか振る舞いも含まれてるから、その分良かったりするのか？

あとは、figmaと比べて、本物の実装ってのも大きいかもな

Storybook は、React と並んで UI コンポーネントやデザイン システムを文書化するための魅力的で視覚的な方法です。

さらに、技術文書の提示や実装の詳細のデモを行うのに最適なツールです。また、ユーザーが実際に操作する前に新しい構成をテストするのにも役立ちます。

上記2つに比べて、テストはしたくない

ただただ、だるそう....

疲弊しそう。

テストをするなら、storybookではない、他のツールに合わせて任せた方がいいんじゃないか？

Storybookには上記2つの役割だけで我慢してもらおう

と今は思いますが、まだ切り捨てません。

まだ何も知らないので...適当言ってる。

今はそう思ってるだけ。

ストーリー

基本中の基本。対象コンポーネントがあって欲しい見た目の1つを担当する。

対象コンポーネントは1以上の状態を持っていると思う。

その中の1つの状態を表すUIを表示させ、それをカタログの写真にするってイメージ。

そのコンポーネントの状態カタログ的な。

なお、あり得る状態は大量の時もある。その時は全てをストーリーにせず、重要なものを選ぶ必要あり。

コンポーネント駆動開発を推してるらしい

小さいコンポーネントから開発を始め、それを組み合わせたコンポーネントも徐々に開発していく。

徐々に開発するコンポーネントを大きくしていく。繋ぎ合わせていくことで。

そんなイメージっぽい。

参考

.storybookってなんですか

主にstorybookの設定が入ってるdirectory

また、storybook用のaddonのスクリプトとかも入れてたりする。

動かしたい期待のために必要なものも入ってるって感じ。

main.ts

preview.ts

ストーリーの見せ方を設定する

ex）

全ストーリーに共通で適用する設定

グローバルなデコレーター（ラッパー）

テーマ、背景色、ビューポート

アクションやコントロールの設定

全ストーリーの表示や動作に影響する設定になりそう。

共通設定的な。

table: 使い分けイメージ

やりたいこと どこに書く？

ストーリーファイルの場所 main.ts

アドオンの追加 main.ts

Vite/Webpackの設定 main.ts

グローバルCSS読み込み preview.ts

全ストーリーをProviderで囲む preview.ts

デフォルトの背景色設定 preview.ts

ビューポートサイズの設定 preview.ts

あとは自作addonとかも入れたりするらしい。