複数サービスを運用するコンポーネント設計/Component design to operate multiple services

by haraguchi

Slide 1

Slide 1 text

複数サービスを運用するコンポーネント設計 2019年7月4日原口渉 SPACEMARKET Tech Meetup #2

Slide 2

Slide 2 text

2 自己紹介原口渉フロントエンドエンジニア styled-componentsでReactコンポーネントの設計・運用担当

Slide 3

Slide 3 text

3 今日話すこと

Slide 4

Slide 4 text

4 今日話すこと 1. スペースマーケットのフロントエンドのリポジトリ構成 2. サービス共通コンポーネント・　課題・　どのように解決したか 3. コンポーネント管理・運用について 4. まとめ

Slide 5

Slide 5 text

5 スペースマーケットのフロントエンドのリポジトリ構成

Slide 6

Slide 6 text

6 スペースマーケットのフロントエンドのリポジトリ構成 SPACEMARKET SPACEMARKET DASHBOARD SPACEMARKET EVENT SPACEMARKET BUSINESS SPACEMARKET ACCOUNT フロントエンド共通リポジトリサービス共通コンポーネントリポジトリ 1サービス1リポジトリ、プラスしてサービス共通リポジトリ 2つという構成です

Slide 7

Slide 7 text

7 スペースマーケットのフロントエンドのリポジトリ構成 SPACEMARKET SPACEMARKET DASHBOARD SPACEMARKET EVENT SPACEMARKET BUSINESS SPACEMARKET ACCOUNT フロントエンド共通リポジトリサービス共通コンポーネントリポジトリ 1サービス1リポジトリ、プラスしてサービス共通リポジトリ 2つという構成です今日はこのリポジトリについてお話します

Slide 8

Slide 8 text

8 サービス共通コンポーネント

Slide 9

Slide 9 text

9 サービス共通コンポーネント ● スペースマーケットの各サービスで使われている共通コンポーネント ● 元々サービス共通コンポーネントというものはなく、各リポジトリにそれぞれコンポーネントがあった ● いくつかの課題があったサービス共通コンポーネントとは

Slide 10

Slide 10 text

10 課題

Slide 11

Slide 11 text

11 課題 ● 例えばボタンコンポーネントに修正が発生した場合に、全てのリポジトリにあるボタンコンポーネントを修正しないといけなかった ● 取り残されるリポジトリが出てきてしまった ● そのためサービスによって同じボタンでも見た目に差が出てしまっていた 1. コンポーネントの更新が手間だった

Slide 12

Slide 12 text

12 課題 ● コンポーネントの粒度に関しての指針が明文化されていなかった ● 各リポジトリを担当するエンジニアのそれぞれの思想で決めていたため、コンポーネント粒度がばらつきがあった ● また課題1,2であげている理由から、再利用性に欠けており、メンテナンスもしづらかった 2. コンポーネント粒度にばらつきが出てしまった

Slide 13

Slide 13 text

13 どのように解決したか

Slide 14

Slide 14 text

14 どのように解決したか ● 1つのリポジトリからコンポーネントを読み込む形にした ● コンポーネントを修正する時は 1つのリポジトリで完結するように 1. コンポーネントの更新が手間だった

Slide 15

Slide 15 text

15 どのように解決したか ● サービスごとにコンポーネントを作成する必要がなくなり、作業時間と手間が大幅に減った ● リポジトリ間のデザインや機能の差がなくなり、統一性を持たせることができた結果

Slide 16

Slide 16 text

16 どのように解決したか ● 粒度の統一性と汎用性を持たせて、再利用しやすいコンポーネントを作りたかった ● デザイナーの粒度を参考に設計することに ● デザイナーの粒度の思想に一番適していたデザインシステムの Atomic Designを採用 2. コンポーネント粒度にばらつきが出てしまった

Slide 17

Slide 17 text

17 Atomic Design

Slide 18

Slide 18 text

18 Atomic Design ● Atomic Design はデザインシステムを作るための手段   ● UIコンポーネントの粒度を、パーツやコンポーネント単位で定義していくもの   Atomic Designとは

Slide 19

Slide 19 text

19 Atomic Design ● 最小単位で単一のコンポーネント   ● 最小単位のコンポーネントなので、多くのページで使われることが多い。   ○ Button  ○ Icon  ○ Checkboxなど  Atoms

Slide 20

Slide 20 text

20 Atomic Design ● Atomsの組み合わせで作られるコンポーネント   ● 使い回すことを考え、汎用的に作る   Molecules

Slide 21

Slide 21 text

21 Atomic Design ● Atoms,Moleculesの組み合わせで作られるコンポーネント   ● 汎用性は考えない。   ● 単独で成り立つことのできるコンポーネント   Organisms

Slide 22

Slide 22 text

22 Atomic Design ● コンポーネントのテンプレートとなるコンポーネント   ● 中身は入れずレイアウトを構成する   Templates

Slide 23

Slide 23 text

23 Atomic Design ● その名の通りページ全体のコンポーネント   Pages

Slide 24

Slide 24 text

24 Atomic Design ● 粒度の統一性を持たせることができた ● 再利用のしやすいコンポーネントができた ● エンジニアとデザイナー間で共通言語で話せるようになり、 ○ 「ここはAtomsで定義しちゃっていいよね？」 ○ 「これはMolecules？Organisms？」などといったように、コミュニケーションがスムーズになった結果

Slide 25

Slide 25 text

25 コンポーネント管理・運用について

Slide 26

Slide 26 text

26 コンポーネント管理・運用について ● サービス共通コンポーネントの見た目は、 Storybookで確認しています

Slide 27

Slide 27 text

27 Storybook

Slide 28

Slide 28 text

28 Storybook ● コンポーネントのUIを一覧で確認することのできるツール ● スペースマーケットでマークアップを行う人はこのツールで、コンポーネント確認しながら作業します Storybookとは

Slide 29

Slide 29 text

29 Storybook

Slide 30

Slide 30 text

30 Storybook コンポーネントリストコンポーネントのデザイン

Slide 31

Slide 31 text

31 Storybook サイズの異なるコンポーネントを確認することができる

Slide 32

Slide 32 text

32 Storybook テーマごとに分けられたカラーが反映されたコンポーネントを見比べることも可能

Slide 33

Slide 33 text

33 Storybook Storybookについてはブログに詳しく載っています！ Atomic Designを使ってReactコンポーネントを再設計した話 Storybookの便利なaddon機能のご紹介

Slide 34

Slide 34 text

34 コンポーネント管理・運用について ● このようにサービス共通コンポーネントを作成したことで、先程お話ししたように更新の手間が省けたり、Atomic Designの導入により、コンポーネントに統一性を持たせることができるようになった ● この運用方法でサービス共通コンポーネントリポジトリには、日々コンポーネントが追加されている

Slide 35

Slide 35 text

35 コンポーネント管理・運用について ● 現在スペースマーケットの frontend_component(master)にあるコンポーネントの数 ○ Atoms: 47 ○ Molecules: 92 ○ Organisms: 70 ○ Templates: 8 ○ Pages: 29 合計 246！！！ ● 全てを自力で把握するのは難しい ● 新しいコンポーネントを把握しているのが、担当デザイナー、エンジニア、レビュワーだけ ● 同じコンポーネントを作ってしまうという可能性もある把握していないコンポーネントが増えた

Slide 36

Slide 36 text

36 コンポーネント管理・運用について ● 今あるコンポーネントを全て洗い出して把握するのは手間も時間もかかるため、新規のコンポーネントから把握することに ● それなら担当のデザイナーとエンジニアに共有してもらうことに把握していないコンポーネントが増えた

Slide 37

Slide 37 text

37 コンポーネント運用について ● 週に1度、エンジニアとデザイナーでミーティングを行っています ● そこで自分の担当している新規・追加のコンポーネントについて共有を行うどのように行っているか

Slide 38

Slide 38 text

38 コンポーネント運用について

Slide 39

Slide 39 text

39 コンポーネント運用についてデザインが確定した新規コンポーネント

Slide 40

Slide 40 text

40 コンポーネント運用についてデザインが確定した新規コンポーネント → Atoms列（作業中）

Slide 41

Slide 41 text

41 コンポーネント運用についてデザインが確定した新規コンポーネント → Atoms列（作業中）コンポーネント化が完了したら「完了」列に移動 →

Slide 42

Slide 42 text

42 コンポーネント運用について ● １番の目的であった新規・追加コンポーネントの把握ができるようになった ● 既存コンポーネントの中で自分が把握していなかったコンポーネントを把握できた ○ 現在開発しているページのコンポーネントを共通化できることがわかったまだ始めたばかりですが、今のところいい感じに運用できていると感じていますよかったこと

Slide 43

Slide 43 text

43 まとめコンポーネントを共通化とAtomic Designの導入により ● 全体的に統一性を持ったコンポーネント設計ができるようになった ● サービス間をまたいでいても、同じデザインのコンポーネントを使えるようになった ● コンポーネントの更新の手間が減った ● コンポーネントの数が増え、管理が大変になった ○ スペースマーケットでは、関係者で集まり共有を行うことでこの課題を解決しています

Slide 44

Slide 44 text

No content