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