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

Discover the journey of how someone with no prior OSS experience built this zero-runtime UI component library, the story behind its creation, its evolution, and the future vision for Kuma UI.

Transcript

1. © 2023 THECOO inc. Kuma UIのこれまでと これから The past and future of Kuma UI poteboy 2023/11/19 @ JSConf Japan 2023
2. © 2023 THECOO inc.. 所属 Frontend Tech Lead @ THECOO株式会社 OSS - Creator of Kuma UI - Core Contributor to Million.js GitHub poteboy Twitter @_poteboy_ 2 poteboy name ⾃⼰紹介
3. © 2023 THECOO inc.. Utility FirstなゼロランタイムCSS-in-JSライブラリ 開発を始めて4ヶ⽉でGitHubで1000スター獲得 グラフをみると7⽉にドカンと伸びている。何が起 こったのか What is Kuma UI? Kuma UI とは何か
4. © 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アプリケーションとスタイリングの歴史
5. © 2023 THECOO inc. TailwindのUtility Firstがユーティリティクラスを組み合わせる技 術とするならば、ユーティリティプロパティを組み合わせる CSS-in-JS技術が⽣まれる。 代表どころは - Chakra UI - Styled System - xstyled ユーティリティクラスな⼿法と⽐較して型安全かつより表現⼒の ある⼿法だった しかし、この⼿法には重⼤な問題があった How Kuma UI was born Utility FirstなCSS-in-JS
6. © 2023 THECOO inc.. 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⽉終わりの出来事 How Kuma UI was born Kuma UIの登場
7. © 2023 THECOO inc.. ①技術的問題 - 技術的にそれまでなし得られていなかった事をする必要があり、開発それ⾃体が難しい。 - 開発者である私にはそれを達成するだけの技術⼒が無かった ②認知度の問題 - 好きな技術を使い続けるためにはその技術がシェアを獲得している必要がある - つまり、メンテナだけが頑張るのではなくCommunity Drivenにする必要がある - そのためにはまず認知される必要がある - ⽇本国内にとどまらず世界をターゲットにしたいが、リーチ⽅法が分からない The hard things Kuma UIが直⾯した２つの困難
8. © 2023 THECOO inc. The hard things ①技術的な問題 開発を続けて⾏く中でTaishi NaritomiさんとKotaro Sugawaraさんと⾔う超強⼒なお⼆⼈がKuma UIの思想 に共感してくださり、コアメンバーとしてJoinしてくれ た。 Naritomiさんはご⾃⾝でもゼロランタイムCSS-in-JSラ イブラリを作られていてドメイン知識が豊富だった。 KotaroさんはReact Hook Formのコアメンバーでもあ り、経験に裏打ちされた推進⼒があった。
9. © 2023 THECOO inc.. ①技術的問題 - 技術的にそれまでなし得られていなかった事をする必要があり、開発それ⾃体が難しい。 - 開発者である私にはそれを達成するだけの技術⼒が無かった - 👉NaritomiさんとKotaroさんというスタープログラマの加⼊により⼀気に前進！ ②認知度の問題 - 好きな技術を使い続けるためにはその技術がシェアを獲得している必要がある - つまり、メンテナだけが頑張るのではなくCommunity Drivenにする必要がある - そのためにはまず認知される必要がある - ⽇本国内にとどまらず世界をターゲットにしたいが、リーチ⽅法が分からない The hard things Kuma UIが直⾯した２つの困難
10. © 2023 THECOO inc.. OSSが流⾏る順序は先に英語圏の海外で話題になってその後天下り的に⽇本でも話題になるケース が⼤半。ボトムアップ的に国内ローカルで話題になって世界進出というのは基本的に無い（と思っ ていた）。 👉よって、⽇本国内で伸ばすためにもまずは海外をターゲットに伸ばす必要がある 海外にリーチするためにMediumに英語で記事を書いてみたり、Redditに投稿したり、Hackernews で投稿したり、他OSSのIssueにコメントしたり⾊々試してみたけど全然伸びない The hard things ②認知度の問題
11. © 2023 THECOO inc.. そんな中、追い討ちをかけるようにKuma UIと似た ようなコンセプトのUtility First Zero Runtime CSS-in-JSであるPanda CSSというOSSが発表され 話題になる 名前も似ている(🐼󰴜)上に機能もほぼ同じ、これで はKuma UIの差別化ポイントが無い...? ...⼤ピンチ！！ Panda CSS joins the race Panda CSSの登場
12. © 2023 THECOO inc.. このまま細々アップデートを続けていっても伸び ないのでは..? しかし、多⼤な時間を割いて頂いたメンテナのお2 ⼈のためにもKumaを必ず勝ち熊にしたい 予定していた機能のリリースを細切れにせず全て 同⼀⽇にメジャーバージョン(v1.0.0)としてリリー スして、インパクトを残そう！ 熊、冬眠へ！󰴜💤 Hibernation 作戦会議
13. © 2023 THECOO inc.. - 俺たちが本当に欲しかったかったのは、ランタ イムCSS-in-JSの書き味でパフォーマンスや互換 性に優れたCSS-in-JSでは？ - ゼロランタイムかランタイムかの⼆項対⽴ではな く、静的に抽出可能なスタイルはゼロランタイ ムで、それ以外はランタイムで漸進的に切り替え 得よう。 - これをHybrid CSS-in-JSと名付け、メジャー バージョンに向けて開発を進める...! Hybrid CSS-in-JS ⽬⽟機能、Hybrid CSS-in-JS誕⽣
14. © 2023 THECOO inc.. 技術的な部分は信頼できる最強メンテナのお2⼈に任せて、⾃分は技術以外の部分をやることにした - 公式ドキュメントの作成 - プロモーション動画の作成 - 公式Twitter, Discordの整備 - 冒頭でお話しした⾃分がコアコントリビュータを務める他のOSS（Million.js）のメンテナであ るAiden⽒へのRT依頼 - 以前KumaをRTしてくれた海外のインフルエンサーに連絡 - Kotaroさんにご依頼してReact Hook Form作者にも連絡 - Zennの記事を執筆 全ては来るべきリリース⽇に向けて.... End of Hibernation リリースに向けて
15. © 2023 THECOO inc. ⽇本に住む⽅がちょうどお昼休みかつ、北⽶では 夜皆がインターネットを触っているであろう12時 ちょうどにリリースツイートを投下 あとは祈るのみ！！ 結果は如何に！？ Introducing Kuma UI リリース⽇当⽇
16. © 2023 THECOO inc. BIG感謝 結果、みんなありがとう🫶
17. © 2023 THECOO inc.. This Week In Reactで紹介していただけたり Next.jsの公式ドキュメントに記載いただけたり TLDRのメーリスで配信されたり Inkdrop作者のTakuyaさんの動画で取り上げていただけたり 皆様のお陰で⽬標であった海外にリーチ完了！ その結果、無事1000スター達成🎊 Hit 1k stars on GitHub 1000スター達成
18. © 2023 THECOO inc.. 先ほど述べた通り、当初はOSSはトップダウンでしか伸びないと思っていた しかし、⽇本の開発者コミュニティの皆様がたくさんツイートやStarを押していただけたお陰で、 ⽇本を発信地として海外からも注⽬を集める形となった 感謝してもしきれません、どうも有難う🫶 Thank you Japanese Web & JS Developers 嬉しい誤算
19. © 2023 THECOO inc. Looking back 振り返って思うこと OSSの良いところは、普段出会うことのない⾊々なプログラマが気軽にコントリビュートしてくれるこ と。 それがきっかけで⾊々な出会いがあったり、⾃分の学びにもなる。あとシンプルに楽しい。 だから、気軽にやってみて良いと思う。 敷居を必要以上に上げる必要はないし、殆どのOSSのメンテナはPRを投げてくれたら嬉しい。 それに、⽇本の開発者コミュニティは温かい。 もちろん批判する⼈もいるけど、多くの⼈は頑張っていれば応援してくれる。
20. © 2023 THECOO inc. The future of Kuma UI Kuma UIのその後 新メンテナの加⼊ その後、Chakra UI⽤のESLintプラグインを作っていてChakraのコ ントリビュータでもあるYuku Kotaniさんが新たにコアメンバー に加⼊していただけて、デザインシステム構築ツールとしてより 盤⽯な体制になった Pandaチームとの交流 Panda CSS作者のSage⽒からKumaチームと Pandaチームのコラボレーション案も出た 今後協⼒する可能性があるかも
21. © 2023 THECOO inc. Kuma Team チームKuma Poteboy Taishi Naritomi Kotaro Sugawara Yuku Kotani @_poteboy_ @taishinaritomi @kotarella1110 @yukukotani
22. © 2023 THECOO inc. “できっこない “に挑み続ける Keep Challenging The Impossible