HVSVHVSVEFLJSVLP!TBJUBNBKTAlternative to Storybook を探す旅
View Slide
【自己紹介】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まとめ
grgrdkrk
lara
wjessup
colly
shpigford
brad_frost
aki_iinuma
philhawksworth
bluesmoon
kneath
62gerente
bkeepers
dougneiner