Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Alternative to Storybook を探す旅
Search
grgr-dkrk
December 07, 2022
3
2.2k
Alternative to Storybook を探す旅
grgr-dkrk
December 07, 2022
Tweet
Share
More Decks by grgr-dkrk
See All by grgr-dkrk
VoiceOverの自動テスト
grgrdkrk
2
340
React Native のアプリでスクリーンリーダーを使ってみる
grgrdkrk
0
120
React Native と アクセシビリティ
grgrdkrk
2
740
DTx と アクセシビリティ
grgrdkrk
0
70
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
610
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgrdkrk
0
430
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
58
Featured
See All Featured
How to name files
jennybc
75
98k
What the flash - Photography Introduction
edds
67
11k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
The Mythical Team-Month
searls
218
43k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
5
480
A Philosophy of Restraint
colly
202
16k
Designing the Hi-DPI Web
ddemaree
278
34k
Transcript
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 まとめ
None