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