HVSVHVSVEFLJSVLP!TBJUBNBKT Alternative to Storybook を探す旅

【自己紹介】 guruguru-dekiruko ‣ 株式会社さかなファーム リードエンジニア ‣ 現状はフルサイクルエンジニアというやつ ‣ 東上線沿いに引っ越した ‣ 大宮駅より池袋駅の方が近くなってしまった😢

アドベントカレンダー被りました アクセシビリティ アドベントカレンダー 2022 の 7 日目を担当しました。 axe-core の Rules がテストされるまでをざっくり書く - きるこの日記帳 https://www.dkrk-blog.net/a11y/axe-rules

‣ Storybook の成熟したコミュニティとエコシステムは強い ‣ でも Storybook の運用はつらい ‣ v7 でどれだけ改善されるかにもよるが ‣ 代替手段を探すのは、「今のままで本当にいいのか」を問うきっかけとして悪くなかった tl；dr ※ 当 LT の内容は Storybook を否定するものではありません

Frontend workshop environment※ を構築する。 React 用だったが、現在では様々なライブラリ、フレームワークに対応。 ホスティング/テスティングの SaaS として Chromatic もある Storybook について ※ アプリケーションから独立したフロントエンドの環境、いわゆるデザインカタログ

旅のきっかけ プロジェクトの環境構築をしていて 「また Storybook を入れて本当にいいのか？」 とふと思った

Storybook でいつも思ってしまうこと① ‣ 肥大化 ‣ メンテナンスがつらい ‣ 主に依存関係のトラブル、Diamond Dependency Problem ‣ アップグレードもつらい ‣ メンテナー側も大変そう、日々対応に追われている感じがある ‣ "次のアップデートで直ります"

Storybook でいつも思ってしまうこと② ‣ Storybook, Chromatic にロックインされ続けるのでは ‣ Storybook が入っていて、テストまで回ってないと石を投げられる ‣ 「Chromatic を使ってテスト回してます」言うだけで採用戦略になり得る ‣ 6.5.0 から Telemetry がオプトインされて巨大な何かになってきた

Storybook やりたかったこと ‣ 唯一無二の UI カタログ ‣ Single Source of Truth の生成機構が壊れやすいのはつらい ‣ Figma とのコラボレーション ‣ Gist いじれば何でもいい（Storybook Connect プラグインが微妙） ‣ Play function とか Chromatic とか ‣ ヒソカ もう十分だ

「複雑さとトレードオフおじさんになりたくない」 「シンプルにカタログがあればいい。ただそれだけ」

Alternative to Storybook を探す旅へ ※ 表現は誇張しています。自宅から離れて滞在していた事実はありません

その前に Storybook v7 ‣Vite（esbuild） first でビルドの高速化 ‣ 全然関係ないが計測してコールドスタートとかの問題にも言及している良記事まである ‣ https://storybook.js.org/blog/storybook-performance-from-webpack-to-vite/ ‣余分な dependencies とファイルサイズの削減 ‣ 組み込み UI の事前 Bundle これに勝てないといけないのか

求めてみること ‣リッチすぎなくていい ‣ 機能も controles, a11y, docs があればいい ‣複雑さはない方がいい ‣ UI で React と Vue.js が一緒に動いてなくて emotion とか使ってなければいい ‣サイズでかい、ビルド遅い問題へのソリューションは重視しない ‣ Storybook も徐々にサポートしつつあるから

@ladle/react ‣ Vite （現状は cjs 版もある） ‣ CSF と互換性がある ‣ Control, a11y, Decorator などのアドオン ‣ ビルド時に各 Story の meta を生成してくれる ‣ テスト時にも使える ‣ core と renderer を分離し、React 以外もサポート予定 LTUBSSFE

Pitsby ‣ Storybook がつらくて開発された ‣ Webpack5 でビルドされる ‣ Playground がある ‣ React18 未サポート TUBSSFE

React Cosmos ‣ 使う側の Webpack を使う ‣ foo.fixture.js にコンポーネントを入れる ‣ fixture をメタデータとして出力する API がある ‣ docs や testing としてのライブラリでない ‣ port:5000 を使う。注意 ‣ React18 未サポート（v6 でサポート予定） LTUBSSFE

Histoire ‣ Vite & esbuild ‣ リッチな UI で多機能、アドオンもある ‣ ただし Plugin API の制約が多く拡張性はまだ ‣ Tailwind を検出してデザインガイドを生成 ‣ Tailwind ありきなのはちょっと気になる ‣ 解決に起因するトラブルが起きた… LTUBSSFE

感想 ‣ パラダイムシフトから作られているものは多め。IE 廃止と ESM と Vite ‣ Ladle と Histoire が良かった ‣ この 2 つは Contribute してみたいなと思った ‣ Ladle は v7 までの様子見で使ってみても良さそう ‣ 現状は Storybook が成熟していて強い、と思った ‣ ただ「Storybook で本当にいいのか？」を問ういい機会になった

旅は終わり、Storybook の代わりを見つけることができた。 それは、旅をすることで見つけることができる、新しい物語たちであった。 - ChatGPT まとめ

No content