我々のデザインシステムは Chakra v3 にアップデートします

JSConf 2024: 2024/11/23 (Sat.)

Transcript

1. 我々のデザインシステムは Chakra v3 にアップデートします 2024/11/23
 株式会社enechain @Shunya078
2. 1 Shunya078 & ただの お酒のんでる エンジニア やってま & https://x.com/_Shunya078 普段やってること & enechain という会社で toB向けの
 プラットフォームを作っていま & 事業チームにいる傍ら、
 デザインシステムのプロダクトオーナーを務めてます 自己紹介
3. Agenda 1. 技術スタックとアーキテクチャ構成 2. Chakra v3 概要 3. Pros/Cons & Why?
4. Agenda 1. 技術スタックとアーキテクチャ構成 2. Chakra v3 概要 3. Pros/Cons & Why?
5. 5 技術スタック 1. 技術スタックとアーキテクチャ構成
6. 6 技術スタック 1. 技術スタックとアーキテクチャ構成 背景 ‡ toB 向けの プロダクトで、SPA を採用していƒ ‡ スタートアップで社内向けプロダクトも合わせて、常に立ち上げが発生すƒ ‡ 規模によっては 2ヶ月でリリースを迎えるプロダクトもあƒ ‡ ことを考える必要があƒ ‡ プロダクトを横断したプラットフォームとしての展開を考えるため 一貫した UI の提供と、開発効率を向上させる
7. 7 アーキテクチャ構成 1. 技術スタックとアーキテクチャ構成 各プロダクト デザインシステム monorepo apps/style_guide packages/components packages/icons publish install install
8. 8 アーキテクチャ構成 1. 技術スタックとアーキテクチャ構成 各プロダクト デザインシステム monorepo apps/style_guide packages/components packages/icons publish install install シンプル
9. Agenda 1. 技術スタックとアーキテクチャ構成 2. Chakra v3 概要 3. Pros/Cons & Why?
10. 9 Chakra v3 2. Chakra v3 概要 時間がないので概要まで リリースアナウンスはこちら https://www.chakra-ui.com/blog/00-announcing-v3
11. 10 Chakra v3 2. Chakra v3 概要 Chakra, Panda and Ark - What's the plan? y Chakra v3 について、Segun Adebayo 氏からアナウンスがあったもの
 y y https://www.adebayosegun.com/blog/chakra-panda-ark-whats-the-plan (at: 2023/08/26¨ Chakra ecosystem 的には プロダクトごとに選択可能なオプションを
 提示するようになるだろう、という旨の内容が記載 (構想は 2023/03/27 の記事にあり¨ Chakra UI v3 は1年ほど経ったが、無事リリース (at: 2024/10/22) ref: https://www.adebayosegun.com/blog/chakra-panda-ark-whats-the-plan
12. 11 Chakra v3 2. Chakra v3 概要 RSC ‡ 対応は未だ入ってない、クライアントサイド コンポーネントの提R ‡ 内部は emotion のまま (将来的に段階移行していく意向)
 図解には Pandas があるが、react/src(コンポーネント) 側には変化なし ref:
 https://www.chakra-ui.com/blog/00-announcing-v3#design-architecture ref:
 https://www.chakra-ui.com/blog/00-announcing-v3#does-chakra-v3-use-panda-internally FAQs にもコメントあり
13. 12 Chakra v3 2. Chakra v3 概要 状態管理と書き味 y 内部の状態管理が ArkUI(zag.js) に移B y これも受けて、namespace で区切られた export がされるように
14. 13 Chakra v3 2. Chakra v3 概要 状態管理と書き味 w snippet が提供されるので、デザイントークンを入れるような形になりそう → migration 的には snippet から import するようにすれば 動く ある程度 ./src/components/ui/checkbox.tsx
15. Agenda 1. 技術スタックとアーキテクチャ構成 2. Chakra v3 概要 3. Pros/Cons & Why?
16. 14 3. Pros/Cons & Why? そもそもデザインシステムが
 UI コンポーネントライブラリに
 依存してるのは？
17. 15 Pros/Cons 3. Pros/Cons & Why? Chakra UI 自体からの依存を無くす ‚ ここについては議論上がらq ‚ 最小単位を Chakra UI で代替することで、
 ‚ 社内の全プロダクトが Chakra UI にも依存していz ‚ Design System 単体から剥がしたとしても、
 デザイナーとの合意を取る手段として実際のドキュメントを
 使用したりしていることを考えるとフェーズとして難しい デザイントークンを注入する形により、より早く価値提供Ž
18. 16 3. Pros/Cons & Why? 運用上
 辛いポイントは
 ないのか？
19. 17 3. Pros/Cons & Why? 運用上
 辛いポイントは
 ないのか？ もちろんある
20. 18 3. Pros/Cons & Why? (例) デザイントークンを持っているので、意図せぬ上書き ” Switch のような v2 で anatomy 管理されていた場合、
 親要素のみの指定だと CSS が上書きされてしまう (今回の場合は # ) 343af5
21. 19 Pros/Cons 3. Pros/Cons & Why? Chakra UI は剥がして ArkUI に移行する Pros q Chakra UI 自身が持つデザイントークンによる意図せぬ上書きを防f q 今後 Chakra UI 移行を検討している場合に、軽量にしておきたい意€ q ロードマップ上は現在検討していないので Pros とならない Cons q 全社採用されているので、Design System の I/F 変更への追従へのコストw q emotion 含めた スタイル(theme) の機構を自前で用意するコスト高
22. 20 Pros/Cons 3. Pros/Cons & Why? Chakra UI は剥がして ArkUI に移行する Pros p Chakra UI 自身が持つデザイントークンによる意図せぬ上書きを防e p 今後 Chakra UI 移行を検討している場合に、軽量にしておきたい意y p ロードマップ上は現在検討していないので Pros とならない Cons p 全社採用されているので、Design System の I/F 変更への追従へのコストv p emotion 含めた スタイル(theme) の機構を自前で用意するコスト高 Chakra v3 へ アップデートすることに
23. 21 Chakra v3 へのアップデートを行うこととした Why? 3. Pros/Cons & Why? 兼任メンバーのみのエンジニアチームで開発/運用してい— – 社内には 10 以上のプロダクトを抱え、その全てが利用しているので、
 Chakra UI を辞めて内製化という選択肢は難しい
 v3 移行によって、snippets で提供されている単位で書き換えられるので、 v2 anatomy 時よりも実装に近い箇所で style の注入ができることを期T – UI コンポーネントライブラリの恩恵は受けたまま、v2 のペイン解消へ
24. Agenda 1. 技術スタックとアーキテクチャ構成 2. Chakra v3 概要 3. Pros/Cons & Why? 4. 最後に
25. 20 まとめ Chakra v3 のアナウンスから Chakra ecosystem の今後を紐解い0 † 開発者側に Chakra ecosystem の ライブラリから
 何を選択してプロダクトを作り上げるのかの選択肢を提供していく Chakra UI v3 ではより ヘッドレスUI っぽい書き味に変わo † Ark UI への状態管理周りの移行が影 † スタイルの実装が閉じていたコンポーネントもよりカスタマイズしやすくなる