Slide 1

Slide 1 text

Kuma UIの設計思想と 頑張らないゼロランタイムCSS-in-JS フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~ @ Findy presented by poteboy

Slide 2

Slide 2 text

poteboy 自己紹介 ˜ 個人開発ƒ ˜ 合同会社ぽてぽてランド(登記中)の1人代表(予定S ˜ 要するに今は無職g ˜ Kuma UI というOSSの作ƒ ˜ ゼロランタイムCSS-in-J4 ˜ 詳しくは以下のリンクまで ˜ ˜ SN4 ˜ GitHub: potebo ˜ X (Twitter): @_poteboy_ https://www.kuma-ui.cog

Slide 3

Slide 3 text

w ユーティリティファースj w Chakraやxstyled、Native Baseに近É w ゼロランタイムCSS-in-Jd w 最適化はベストエフォーj w 動的な値はランタイムで挿入すE w ヘッドレスなコンポーネント群のみ用7 w デザインシステム前提のため、デフォルト
 で色付けはしていない w コンポーネントというより、HTMLタグの
 ラッパーに近É w Theme Configからデザイントークンを設定 Kuma UI とは

Slide 4

Slide 4 text

Kuma UI の設計思想とは?

Slide 5

Slide 5 text

Kuma UI は、パフォーマンスに特化している →わけではない よくある誤解: もちろんパフォーマンスも優れているが、それが至上命題ではない

Slide 6

Slide 6 text

Kuma UIの目的はDX維持&エコシステムへの追従 Kuma UIチームとPanda CSSチームの見解としては、Utility First & CSS-in-JSが最も
 Maintainabilityの高いスタイリング手法だと考えている。
 Tailwind CSSの作者であるAdam氏も、 「(インラインスタイルでCSSの全てを表現 する)ことをブラウザが対応していない事実こそが
 CSSフレームワークが存在する唯一の理由だ」
 と言っている。 個人的にも、この意見に完全に同意。

Slide 7

Slide 7 text

Kuma UIの目的はDX維持&エコシステムへの追従 Utility First & CSS-in-JS は個人的には最高のスタイリング技術だった。 しかし、React Server Componentsの影響で、サーバーでのみ動作する(Web APIを使わずに
 済む)スタイリング技術し生き残れなくなりつつあった RSCのせいで自分の好きな技術であるCSS-in-JSが技術選定の選択肢から外れるのは嫌だった そうならないようにするために、RSCで動くUtility FirstなCSS-in-JSという選択肢を コミュニティに残そう→Kuma UIの出発点 つまり、Kumaの目標はPerf以上に、従来の書き心地(DX)とエコシステムへの互換性を重視

Slide 8

Slide 8 text

Kuma UIの最適化はベストエフォート DXと互換性を実現するための手法が「Hybrid Approachg † 静的解析可能なスタイルはゼロランタイムで8 † 静的解析不可能な箇所はランタイム(+SSR)で。 Hybrid法を使うとKumaの実装がツリーシェイクされずにバンドルに残るという欠点はあるが、
 従来の書き方で実行時パフォーマンスが改善されているかつRSCで対応できる。 
 Hybrid法に関する詳しい解説はKumaのメンバー
 のYuku Kotani氏の記事を参考に

Slide 9

Slide 9 text

そもそも、ランタイムCSS-in-JSは
 本当にパフォーマンスが悪いのか?

Slide 10

Slide 10 text

CSS-in-JSのパフォーマンスの比較 以下の条件で比較すC 4 ゼロランタイムCSS-in-JS +RSP 4 ランタイムCSS-in-JS (SSR) + Client Componen 4 ランタイムCSS-in-JS + Client Component (Lazy Load) 同一スタイルを当てたボタン1000個をレンダリングしてみる

Slide 11

Slide 11 text

ゼロランタイムCSS-in-JS +RSC LCP1.25s page.css事前生成され、page.jsはブラウザ実行されない (layout.jsはプロバイダーコンポーネント分の実行)

Slide 12

Slide 12 text

ランタイムCSS-in-JS (SSR) +Client Component LCP1.20s Kuma UIのNextプラグインを外した→コンパイラに介入しないので全てSSRになる。
 SSR環境では、useServerInsertedHTMLを使用しサーバでHTMLを出力時にスタイルを挿入する) page.jsでHydrationが実行され、cssファイルを読み込まずDOMに突っ込む

Slide 13

Slide 13 text

ランタイムCSS-in-JS (Dynamic Import) +Client Component LCPはめっちゃ早い、 でもスタイルが当たるまでかなり時間を要してFOUCが起こる

Slide 14

Slide 14 text

計測結果から分かる通り、SSRしてればランタイムCSS-in-JSでもすごく速い! なので、(少なくともKumaにおける)ゼロランタイムCSS-in-JSの意義は、パフォーマンスより
 エコシステム互換性。 React Compilerと同じで、Kumaのコンパイラはあくまで最適化の手段。 一部機能を除いて、コンパイラがなくても動く。 2026年には3G回線も廃止され、実行時Perf向上の旨みはそこまでない 現実的なユースケースとして、 Cloudflare Pagesなどサイズにシビアな環境にデプロイする場合は、Kumaのコンパイラを使って
 ツリーシェイクした方が良い。

Slide 15

Slide 15 text

まとめ:頑張らないゼロランタイムCSS-in-JS選定基準 š 社内向けシステムやtoB向け管理画面など、パフォーマンス要件が比較的緩い       ランタイムCSS-in-JS + 必要に応じてSSRで良さそ€ š toC向けのサービス等、ややパフォーマンス要件がありそう       基本ランタイムCSS-in-JS + SSR(useServerInsertedHTML*)で良さそう、
       ボトルネックに応じてゼロランタイム + RSCをオプトイ~ š Edge環境などにデプロイしたいからバンドルサイズを抑えたい       基本ゼロラン+RSCで、一部Lazy Loadで良さそう。あとはPreact使うとか


 *useServerInsertedHTMLはシングルレンダーでストリーミングSSRに対応している