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

    View full-size slide

  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
    ⾃⼰紹介

    View full-size slide

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

    View full-size slide

  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アプリケーションとスタイリングの歴史

    View full-size slide

  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

    View full-size slide

  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の登場

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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の登場

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. © 2023 THECOO inc.
    BIG感謝
    結果、みんなありがとう🫶

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. © 2023 THECOO inc.
    “できっこない “に挑み続ける
    Keep Challenging The Impossible

    View full-size slide