MUIをベースにしたデザインシステムの構築

Transcript

1. MUIをベースにした デザインシステムの構築 CTOA若手エンジニアコミュニティ 勉強会#1
2. 自己紹介 早瀬和輝 ◦ 2021年4月 BuySell Technologies入社 ◦ フロントエンドエンジニア ◦ React / TypeScript / Go / GraphQL / Hasura ◦ Zenn: kazu777 ◦ 趣味：マンガ、アニメ、開発、旅行 2
3. アジェンダ ◦ 背景 ◦ MUIとは ◦ デザインシステムを導入する目的 ◦ 具体的な取り組み ◦ おわりに 3
4. 背景 1 4
5. 背景 リユースプラットフォームを開発中 5
6. 背景 ◦ 各サービスごとに開発チームが存在 ◦ サービス間でUI・UXを統一する必要がある ◦ プラットフォーム全体のデザインシステムはない 作りたい気持ちはあるが開発コストが大きい 全体のデザインシステムの構築はもう少し未来の話 6
7. 背景 チーム間で共通のコンポーネントライブラリを 使用することで、UI・UXの統一を図る その他のルールや開発は基本的に各チームに委ねる 7 ※今回紹介するのは自分が所属するチーム内のデザインシステムについてであり、 プラットフォーム全体のデザインシステムについてではないです
8. MUIとは 2 8
9. MUIとは ◦ React用のコンポーネントライブラリ ◦ Github stars 84.1k（2023/01/21時点） ◦ かなり多い種類のコンポーネントを提供 9
10. MUIとは 10 https://mui.com
11. MUIを選択した理由 ◦ コンポーネントが豊富 ◦ デザインがカスタマイズしやすい ◦ Figmaが提供されている 11
12. デザインシステムを導入する目的 3 12
13. デザインと実装の同期 ◦ 変更の反映をしやすくする ◦ 運用コストは極力抑える 属人性の排除 ◦ 特定の実装者に依存しない ◦ 実装者による差異を減らす ◦ レビューコストの削減 デザインシステムを導入する目的 13
14. 具体的な取り組み 4 14
15. 具体的な取り組み ◦ カラーコードの集約 ◦ デフォルトスタイルのオーバーライド ◦ Typographyの定義 ◦ Atomic Designの不採用 15
16. 具体的な取り組み ◦ カラーコードの集約 ◦ デフォルトスタイルのオーバーライド ◦ Typographyの定義 ◦ Atomic Designの不採用 16
17. カラーコードの集約 カラーコードをピックアップして名前を付け、 定数として定義 17 Figma src/styles/theme.ts
18. カラーコードの集約 コンポーネント側で指定する際は定数を使用 カラーコードが氾濫せず、型安全に実装できる 18
19. 具体的な取り組み ◦ カラーコードの集約 ◦ デフォルトスタイルのオーバーライド ◦ Typographyの定義 ◦ Atomic Designの不採用 19
20. デフォルトスタイルのオーバーライド オーバーライドしたい場合はトップレベルで指定 20
21. 具体的な取り組み ◦ カラーコードの集約 ◦ デフォルトスタイルのオーバーライド ◦ Typographyの定義 ◦ Atomic Designの不採用 21
22. Typographyの定義 fontSizeやfontWeightは使用するものを厳選 22
23. Typographyの定義 sizeとweightをconst assertionで定義して、 それらをPropsで受け取るコンポーネントを作成 23
24. Typographyの定義 MUIのTypographyのimportをeslintで禁止して、 独自定義のTypographyのみ使用する 予期しないsize, weightが使用されることがなくなる 24
25. 具体的な取り組み ◦ カラーコードの集約 ◦ デフォルトスタイルのオーバーライド ◦ Typographyの定義 ◦ Atomic Designの不採用 25
26. Atomic Designに感じていた課題から不採用 ◦ Organismsの肥大化 ◦ コンポーネント設計の難しさ Atomic Designの不採用 26
27. ざっくりとしたディレクトリ構成 コンポーネントの分類はシンプルにする Atomic Designの不採用 27
28. コンポーネントの設計に悩む場面が少なくなる Atomic Designの不採用 28 アプリケーション共通で使用する src/components src/features/*/components Yes No
29. おわりに 5 29
30. おわりに ◦ MUIをベースにすることで、 低コストでデザインシステムを構築できた ◦ デザインシステムの導入目的も達成できている デザインとの同期には、ほぼコストがかかってない チーム全員でフロントエンドの開発に取り組めている 30