Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

poteboy
November 19, 2023

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.

poteboy

November 19, 2023
Tweet

More Decks by poteboy

Other Decks in Technology

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. 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アプリケーションとスタイリングの歴史
  4. © 2023 THECOO inc. TailwindのUtility Firstがユーティリティクラスを組み合わせる技 術とするならば、ユーティリティプロパティを組み合わせる CSS-in-JS技術が⽣まれる。 代表どころは -

    Chakra UI - Styled System - xstyled ユーティリティクラスな⼿法と⽐較して型安全かつより表現⼒の ある⼿法だった しかし、この⼿法には重⼤な問題があった How Kuma UI was born Utility FirstなCSS-in-JS
  5. © 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の登場
  6. © 2023 THECOO inc.. ①技術的問題 - 技術的にそれまでなし得られていなかった事をする必要があり、開発それ⾃体が難しい。 - 開発者である私にはそれを達成するだけの技術⼒が無かった ②認知度の問題

    - 好きな技術を使い続けるためにはその技術がシェアを獲得している必要がある - つまり、メンテナだけが頑張るのではなくCommunity Drivenにする必要がある - そのためにはまず認知される必要がある - ⽇本国内にとどまらず世界をターゲットにしたいが、リーチ⽅法が分からない The hard things Kuma UIが直⾯した2つの困難
  7. © 2023 THECOO inc. The hard things ①技術的な問題 開発を続けて⾏く中でTaishi NaritomiさんとKotaro

    Sugawaraさんと⾔う超強⼒なお⼆⼈がKuma UIの思想 に共感してくださり、コアメンバーとしてJoinしてくれ た。 Naritomiさんはご⾃⾝でもゼロランタイムCSS-in-JSラ イブラリを作られていてドメイン知識が豊富だった。 KotaroさんはReact Hook Formのコアメンバーでもあ り、経験に裏打ちされた推進⼒があった。
  8. © 2023 THECOO inc.. ①技術的問題 - 技術的にそれまでなし得られていなかった事をする必要があり、開発それ⾃体が難しい。 - 開発者である私にはそれを達成するだけの技術⼒が無かった -

    👉NaritomiさんとKotaroさんというスタープログラマの加⼊により⼀気に前進! ②認知度の問題 - 好きな技術を使い続けるためにはその技術がシェアを獲得している必要がある - つまり、メンテナだけが頑張るのではなくCommunity Drivenにする必要がある - そのためにはまず認知される必要がある - ⽇本国内にとどまらず世界をターゲットにしたいが、リーチ⽅法が分からない The hard things Kuma UIが直⾯した2つの困難
  9. © 2023 THECOO inc.. そんな中、追い討ちをかけるようにKuma UIと似た ようなコンセプトのUtility First Zero Runtime

    CSS-in-JSであるPanda CSSというOSSが発表され 話題になる 名前も似ている(🐼󰴜)上に機能もほぼ同じ、これで はKuma UIの差別化ポイントが無い...? ...⼤ピンチ!! Panda CSS joins the race Panda CSSの登場
  10. © 2023 THECOO inc.. - 俺たちが本当に欲しかったかったのは、ランタ イムCSS-in-JSの書き味でパフォーマンスや互換 性に優れたCSS-in-JSでは? - ゼロランタイムかランタイムかの⼆項対⽴ではな

    く、静的に抽出可能なスタイルはゼロランタイ ムで、それ以外はランタイムで漸進的に切り替え 得よう。 - これをHybrid CSS-in-JSと名付け、メジャー バージョンに向けて開発を進める...! Hybrid CSS-in-JS ⽬⽟機能、Hybrid CSS-in-JS誕⽣
  11. © 2023 THECOO inc.. 技術的な部分は信頼できる最強メンテナのお2⼈に任せて、⾃分は技術以外の部分をやることにした - 公式ドキュメントの作成 - プロモーション動画の作成 -

    公式Twitter, Discordの整備 - 冒頭でお話しした⾃分がコアコントリビュータを務める他のOSS(Million.js)のメンテナであ るAiden⽒へのRT依頼 - 以前KumaをRTしてくれた海外のインフルエンサーに連絡 - Kotaroさんにご依頼してReact Hook Form作者にも連絡 - Zennの記事を執筆 全ては来るべきリリース⽇に向けて.... End of Hibernation リリースに向けて
  12. © 2023 THECOO inc.. This Week In Reactで紹介していただけたり Next.jsの公式ドキュメントに記載いただけたり TLDRのメーリスで配信されたり

    Inkdrop作者のTakuyaさんの動画で取り上げていただけたり 皆様のお陰で⽬標であった海外にリーチ完了! その結果、無事1000スター達成🎊 Hit 1k stars on GitHub 1000スター達成
  13. © 2023 THECOO inc. Looking back 振り返って思うこと OSSの良いところは、普段出会うことのない⾊々なプログラマが気軽にコントリビュートしてくれるこ と。 それがきっかけで⾊々な出会いがあったり、⾃分の学びにもなる。あとシンプルに楽しい。

    だから、気軽にやってみて良いと思う。 敷居を必要以上に上げる必要はないし、殆どのOSSのメンテナはPRを投げてくれたら嬉しい。 それに、⽇本の開発者コミュニティは温かい。 もちろん批判する⼈もいるけど、多くの⼈は頑張っていれば応援してくれる。
  14. © 2023 THECOO inc. The future of Kuma UI Kuma

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

    Kotaro Sugawara Yuku Kotani @_poteboy_ @taishinaritomi @kotarella1110 @yukukotani