Kuma UIのこれまでとこれから

© 2023 THECOO inc.
Kuma UIのこれまでと
これから
The past and future of Kuma UI
poteboy
2023/11/19 @ JSConf Japan 2023

View Slide

© 2023 THECOO inc..
所属 Frontend Tech Lead @ THECOO株式会社
OSS - Creator of Kuma UI
- Core Contributor to Million.js
GitHub poteboy
Twitter @_poteboy_
2
poteboy
name
⾃⼰紹介

View Slide

Utility FirstなゼロランタイムCSS-in-JSライブラリ
開発を始めて4ヶ⽉でGitHubで1000スター獲得
グラフをみると7⽉にドカンと伸びている。何が起
こったのか
What is Kuma UI?
Kuma UI とは何か

View Slide

© 2023 THECOO inc.
1. SPAフレームワーク群の台と共に、Webアプリケーション
開発⼿法が所謂 Page Based から Component Based な開
発が主流になった
2. それに伴い、Webアプリケーションにおける「関⼼の分離
(Separation of Concern)」がHTML/CSS/JavaScriptなどの
技術単位から機能単位にシフトした
3. 関⼼の分離が機能単位にシフトしたことで、スタイリング
⼿法がクラス名⾃体が意味を持つSemantic CSSに対して単
⼀の機能を組み合わせるUtility Firstが⽣まれた
How Kuma UI was born
Webアプリケーションとスタイリングの歴史

View Slide

© 2023 THECOO inc.
TailwindのUtility Firstがユーティリティクラスを組み合わせる技
術とするならば、ユーティリティプロパティを組み合わせる
CSS-in-JS技術が⽣まれる。
代表どころは
- Chakra UI
- Styled System
- xstyled
ユーティリティクラスな⼿法と⽐較して型安全かつより表現⼒の
ある⼿法だった
しかし、この⼿法には重⼤な問題があった
Utility FirstなCSS-in-JS

View Slide

Chakra UIに代表される⾃分の好きだったUtility First CSS-in-JS技術はランタ
イムでCSSをDOMに突っ込む必要がありパフォーマンス問題を抱えていた。
また、React Server Componentsが台頭したことによりサーバーコンポーネ
ントで軒並みランタイムCSS-in-JSが機能せず、⼈気が下⽕になりはじめた
⾃分の好きだった技術が廃れるのは悲しい。。😥
それなら「RSC互換でパフォーマンスに優れたCSS-in-JSを⾃分で作れば
いいのでは？」
こうしてゼロランタイムかつUtility FirstなCSS-in-JS「Kuma UI」の開発に着
⼿する。
これが2023年3⽉終わりの出来事
Kuma UIの登場

View Slide

①技術的問題
- 技術的にそれまでなし得られていなかった事をする必要があり、開発それ⾃体が難しい。
- 開発者である私にはそれを達成するだけの技術⼒が無かった
②認知度の問題
- 好きな技術を使い続けるためにはその技術がシェアを獲得している必要がある
- つまり、メンテナだけが頑張るのではなくCommunity Drivenにする必要がある
- そのためにはまず認知される必要がある
- ⽇本国内にとどまらず世界をターゲットにしたいが、リーチ⽅法が分からない
The hard things
Kuma UIが直⾯した２つの困難

View Slide

© 2023 THECOO inc.
The hard things
①技術的な問題
開発を続けて⾏く中でTaishi NaritomiさんとKotaro
Sugawaraさんと⾔う超強⼒なお⼆⼈がKuma UIの思想
に共感してくださり、コアメンバーとしてJoinしてくれ
た。
Naritomiさんはご⾃⾝でもゼロランタイムCSS-in-JSラ
イブラリを作られていてドメイン知識が豊富だった。
KotaroさんはReact Hook Formのコアメンバーでもあ
り、経験に裏打ちされた推進⼒があった。

View Slide

①技術的問題
- 技術的にそれまでなし得られていなかった事をする必要があり、開発それ⾃体が難しい。
- 開発者である私にはそれを達成するだけの技術⼒が無かった
- 👉NaritomiさんとKotaroさんというスタープログラマの加⼊により⼀気に前進！
- 好きな技術を使い続けるためにはその技術がシェアを獲得している必要がある
- つまり、メンテナだけが頑張るのではなくCommunity Drivenにする必要がある
- そのためにはまず認知される必要がある
- ⽇本国内にとどまらず世界をターゲットにしたいが、リーチ⽅法が分からない
The hard things
Kuma UIが直⾯した２つの困難

View Slide

OSSが流⾏る順序は先に英語圏の海外で話題になってその後天下り的に⽇本でも話題になるケース
が⼤半。ボトムアップ的に国内ローカルで話題になって世界進出というのは基本的に無い（と思っ
ていた）。
👉よって、⽇本国内で伸ばすためにもまずは海外をターゲットに伸ばす必要がある
海外にリーチするためにMediumに英語で記事を書いてみたり、Redditに投稿したり、Hackernews
で投稿したり、他OSSのIssueにコメントしたり⾊々試してみたけど全然伸びない
The hard things

View Slide

そんな中、追い討ちをかけるようにKuma UIと似た
ようなコンセプトのUtility First Zero Runtime
CSS-in-JSであるPanda CSSというOSSが発表され
話題になる
名前も似ている(🐼󰴜)上に機能もほぼ同じ、これで
はKuma UIの差別化ポイントが無い...?
...⼤ピンチ！！
Panda CSS joins the race
Panda CSSの登場

View Slide

このまま細々アップデートを続けていっても伸び
ないのでは..?
しかし、多⼤な時間を割いて頂いたメンテナのお2
⼈のためにもKumaを必ず勝ち熊にしたい
予定していた機能のリリースを細切れにせず全て
同⼀⽇にメジャーバージョン(v1.0.0)としてリリー
スして、インパクトを残そう！
熊、冬眠へ！󰴜💤
Hibernation
作戦会議

View Slide

- 俺たちが本当に欲しかったかったのは、ランタ
イムCSS-in-JSの書き味でパフォーマンスや互換
性に優れたCSS-in-JSでは？
- ゼロランタイムかランタイムかの⼆項対⽴ではな
く、静的に抽出可能なスタイルはゼロランタイ
ムで、それ以外はランタイムで漸進的に切り替え
得よう。
- これをHybrid CSS-in-JSと名付け、メジャー
バージョンに向けて開発を進める...!
Hybrid CSS-in-JS
⽬⽟機能、Hybrid CSS-in-JS誕⽣

View Slide

技術的な部分は信頼できる最強メンテナのお2⼈に任せて、⾃分は技術以外の部分をやることにした
- 公式ドキュメントの作成
- プロモーション動画の作成
- 公式Twitter, Discordの整備
- 冒頭でお話しした⾃分がコアコントリビュータを務める他のOSS（Million.js）のメンテナであ
るAiden⽒へのRT依頼
- 以前KumaをRTしてくれた海外のインフルエンサーに連絡
- Kotaroさんにご依頼してReact Hook Form作者にも連絡
- Zennの記事を執筆
全ては来るべきリリース⽇に向けて....
End of Hibernation
リリースに向けて

View Slide

© 2023 THECOO inc.
⽇本に住む⽅がちょうどお昼休みかつ、北⽶では
夜皆がインターネットを触っているであろう12時
ちょうどにリリースツイートを投下
あとは祈るのみ！！
結果は如何に！？
Introducing Kuma UI
リリース⽇当⽇

View Slide

This Week In Reactで紹介していただけたり
Next.jsの公式ドキュメントに記載いただけたり
TLDRのメーリスで配信されたり
Inkdrop作者のTakuyaさんの動画で取り上げていただけたり
皆様のお陰で⽬標であった海外にリーチ完了！
その結果、無事1000スター達成🎊
Hit 1k stars on GitHub
1000スター達成

View Slide

先ほど述べた通り、当初はOSSはトップダウンでしか伸びないと思っていた
しかし、⽇本の開発者コミュニティの皆様がたくさんツイートやStarを押していただけたお陰で、
⽇本を発信地として海外からも注⽬を集める形となった
感謝してもしきれません、どうも有難う🫶
Thank you Japanese Web & JS Developers
嬉しい誤算

View Slide

© 2023 THECOO inc.
Looking back
振り返って思うこと
OSSの良いところは、普段出会うことのない⾊々なプログラマが気軽にコントリビュートしてくれるこ
と。
それがきっかけで⾊々な出会いがあったり、⾃分の学びにもなる。あとシンプルに楽しい。
だから、気軽にやってみて良いと思う。
敷居を必要以上に上げる必要はないし、殆どのOSSのメンテナはPRを投げてくれたら嬉しい。
それに、⽇本の開発者コミュニティは温かい。
もちろん批判する⼈もいるけど、多くの⼈は頑張っていれば応援してくれる。

View Slide

© 2023 THECOO inc.
The future of Kuma UI
Kuma UIのその後
新メンテナの加⼊
その後、Chakra UI⽤のESLintプラグインを作っていてChakraのコ
ントリビュータでもあるYuku Kotaniさんが新たにコアメンバー
に加⼊していただけて、デザインシステム構築ツールとしてより
盤⽯な体制になった
Pandaチームとの交流
Panda CSS作者のSage⽒からKumaチームと
Pandaチームのコラボレーション案も出た
今後協⼒する可能性があるかも

View Slide

© 2023 THECOO inc.
Kuma Team
チームKuma
Poteboy Taishi Naritomi Kotaro Sugawara Yuku Kotani
@_poteboy_ @taishinaritomi @kotarella1110 @yukukotani

View Slide

Kuma UIのこれまでとこれから

Kuma UIのこれまでとこれから

poteboy

More Decks by poteboy

Other Decks in Technology

Featured

Transcript