開発者フレンドリーなデザインシステムを支える技術

Transcript

1. 開発者フレンドリーな デザインシステムを支える技術 株式会社カオナビ プロダクト本部 サービス開発部DataFrontierグループ 別城慎治
2. 自己紹介 ・フロントエンドエンジニア 別城 慎治(bekki shinji) @shinji_becky ページリニューアル案件やデザインシステム構築を経て現在は新 規機能開発などに携わっています ・趣味 アニメ、サッカー(最近は見る専門)、旅行 2019年11月入社 株式会社カオナビ プロダクト本部 サービス開発部 DataFrontierグループ 神戸在住 フルリモート ・嫌いなもの、苦手なこと 辛いもの、人の名前を覚えること
3. 今日話すこと Kaonavi Tech Talk #2 ・カオナビデザインシステムの運用について
4. ・カオナビデザインシステムの技術面について ※ 以降カオナビデザインシステムは KDSと省略します Kaonavi Tech Talk #7 ※ 少し前回と重複する部分もあります 今日話すこと Kaonavi Tech Talk #2 ・カオナビデザインシステムの運用について
5. 今日話すこと KDSの技術面について ・技術スタック ・ディレクトリ構成 ・Design Token ・Component ・その他
6. 技術スタック
7. ・React + TypeScript ・styled-components ・Storybook ・Jest + React Testing Library ・REG SUIT ・Webpack ・GitLab 技術スタック
8. ディレクトリ構成
9. ディレクトリ構成
10. ディレクトリ構成 Componentを格納
11. ディレクトリ構成 ・DesingToken系の定義 ・helper ・animation定義 アイコンなどに利用するsvgファイル 型定義 共通関数 コンポーネントなどをexport StorybookのIntroductionページ
12. DesingToken
13. DesignTokenとは？ Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. デザイントークンとは、色、スペーシング、タイポグラフィの スケールなど、デザインシステムを構成する不可分なピースのことです。 W3C Community Group https://github.com/design-tokens/community-group#design-tokens
15. KDS DesignTokenの利用 importして利用 ThemeProviderから利用 ・styled-componentsのThemeProviderを利用してimportせずに利用できる ・TSの補完が効くので利用しやすい
16. ThemeProvider KDSのDesinTokenなどのスタイル定義系をまとめた オブジェクト ▪ ThemeProviderに設定 FOUDATION_STYLEをstyled-componentで提 供されているThemeProviderのthemeに設定す るとpropsから利用することができる ▪ FOUDATION_STYLE ・importしなくても利用できる ・直感的に利用できる
17. Component
18. Component ・classNameの受け取り ・HTMLElementの属性の受け取り 　・buttonタグやaタグなどのattributes ・refのforward 　・forwardRef利用時のdisplayNameの指定 汎用的なコンポーネントを実装する上で必要な考慮
19. Component KDSでのコンポーネントは実装用の関数を用意
20. Component KDSでのコンポーネントは実装用の関数を用意
21. Component ・refのforward ・classNameを受け取れるように実装 ・displayNameの設定 これらを内部で行なっています コンポーネント独自の型 HTMLタグの指定をしてそ のタグの型を付与する
22. その他
23. Storybook MDX ・MDXはMarkdownとJSXを組み合わせた標準のファイル形式 ・StoryはCSF(Component Story Format) or MDXで記述可能 ・Markdownに慣れてる人が書きやすい
24. Manual Publish パイプラインの「publish-manual」ジョブを実行すると検証用 バージョンとして利用できる
25. 最後に
26. 最後に コンポーネントの実装に関してはwithKDSComponentを用意することで最 低限のルールを担保したコンポーネントの実装ができるようになった 今後は現在取り組んでいるCHANGELOGの自動生成やリリース自動化な どに取り組んでいきたい 運用面・技術面含めて誰でも気軽に触れるデザインシステムを目指していき たい
27. ご静聴ありがとうございました！