開発者フレンドリーなデザインシステムを支える技術

by shinbey221

Slide 1

Slide 1 text

開発者フレンドリーなデザインシステムを支える技術株式会社カオナビプロダクト本部サービス開発部DataFrontierグループ別城慎治

Slide 2

Slide 2 text

自己紹介・フロントエンドエンジニア別城慎治(bekki shinji) @shinji_becky ページリニューアル案件やデザインシステム構築を経て現在は新規機能開発などに携わっています・趣味アニメ、サッカー(最近は見る専門)、旅行 2019年11月入社株式会社カオナビプロダクト本部サービス開発部 DataFrontierグループ神戸在住フルリモート・嫌いなもの、苦手なこと辛いもの、人の名前を覚えること

Slide 3

Slide 3 text

今日話すこと Kaonavi Tech Talk #2 ・カオナビデザインシステムの運用について

Slide 4

Slide 4 text

・カオナビデザインシステムの技術面について ※ 以降カオナビデザインシステムは KDSと省略します Kaonavi Tech Talk #7 ※ 少し前回と重複する部分もあります今日話すこと Kaonavi Tech Talk #2 ・カオナビデザインシステムの運用について

Slide 5

Slide 5 text

今日話すこと KDSの技術面について・技術スタック・ディレクトリ構成・Design Token ・Component ・その他

Slide 6

Slide 6 text

技術スタック

Slide 7

Slide 7 text

・React + TypeScript ・styled-components ・Storybook ・Jest + React Testing Library ・REG SUIT ・Webpack ・GitLab 技術スタック

Slide 8

Slide 8 text

ディレクトリ構成

Slide 9

Slide 9 text

ディレクトリ構成

Slide 10

Slide 10 text

ディレクトリ構成 Componentを格納

Slide 11

Slide 11 text

ディレクトリ構成・DesingToken系の定義・helper ・animation定義アイコンなどに利用するsvgファイル型定義共通関数コンポーネントなどをexport StorybookのIntroductionページ

Slide 12

Slide 12 text

DesingToken

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

KDS DesignTokenの利用 importして利用 ThemeProviderから利用・styled-componentsのThemeProviderを利用してimportせずに利用できる・TSの補完が効くので利用しやすい

Slide 16

Slide 16 text

ThemeProvider KDSのDesinTokenなどのスタイル定義系をまとめたオブジェクト ■ ThemeProviderに設定 FOUDATION_STYLEをstyled-componentで提供されているThemeProviderのthemeに設定するとpropsから利用することができる ■ FOUDATION_STYLE ・importしなくても利用できる・直感的に利用できる

Slide 17

Slide 17 text

Component

Slide 18

Slide 18 text

Component ・classNameの受け取り・HTMLElementの属性の受け取り　・buttonタグやaタグなどのattributes ・refのforward 　・forwardRef利用時のdisplayNameの指定汎用的なコンポーネントを実装する上で必要な考慮

Slide 19

Slide 19 text

Component KDSでのコンポーネントは実装用の関数を用意

Slide 20

Slide 20 text

Component KDSでのコンポーネントは実装用の関数を用意

Slide 21

Slide 21 text

Component ・refのforward ・classNameを受け取れるように実装・displayNameの設定これらを内部で行なっていますコンポーネント独自の型 HTMLタグの指定をしてそのタグの型を付与する

Slide 22

Slide 22 text

その他

Slide 23

Slide 23 text

Storybook MDX ・MDXはMarkdownとJSXを組み合わせた標準のファイル形式・StoryはCSF(Component Story Format) or MDXで記述可能・Markdownに慣れてる人が書きやすい

Slide 24

Slide 24 text

Manual Publish パイプラインの「publish-manual」ジョブを実行すると検証用バージョンとして利用できる

Slide 25

Slide 25 text

最後に

Slide 26

Slide 26 text

最後にコンポーネントの実装に関してはwithKDSComponentを用意することで最低限のルールを担保したコンポーネントの実装ができるようになった今後は現在取り組んでいるCHANGELOGの自動生成やリリース自動化などに取り組んでいきたい運用面・技術面含めて誰でも気軽に触れるデザインシステムを目指していきたい

Slide 27

Slide 27 text

ご静聴ありがとうございました！