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

1. 複数サービスを運用するコンポーネント設計 2019年7月4日 原口渉 SPACEMARKET Tech Meetup #2
2. 2 自己紹介 原口渉 フロントエンドエンジニア styled-componentsでReactコンポーネントの設計・運用担当
3. 3 今日話すこと
4. 4 今日話すこと 1. スペースマーケットのフロントエンドのリポジトリ構成 2. サービス共通コンポーネント ・　課題 ・　どのように解決したか 3. コンポーネント管理・運用について 4. まとめ
5. 5 スペースマーケットのフロントエンドのリポジトリ構成
6. 6 スペースマーケットのフロントエンドのリポジトリ構成 SPACEMARKET SPACEMARKET DASHBOARD SPACEMARKET EVENT SPACEMARKET BUSINESS SPACEMARKET ACCOUNT フロントエンド共通リポジトリ サービス共通コンポーネントリポジトリ 1サービス1リポジトリ、プラスしてサービス共通リポジトリ 2つという構成です
7. 7 スペースマーケットのフロントエンドのリポジトリ構成 SPACEMARKET SPACEMARKET DASHBOARD SPACEMARKET EVENT SPACEMARKET BUSINESS SPACEMARKET ACCOUNT フロントエンド共通リポジトリ サービス共通コンポーネントリポジトリ 1サービス1リポジトリ、プラスしてサービス共通リポジトリ 2つという構成です 今日はこのリポジトリについてお話します
8. 8 サービス共通コンポーネント
9. 9 サービス共通コンポーネント • スペースマーケットの各サービスで使われている共通コンポーネント • 元々サービス共通コンポーネントというものはなく、各リポジトリにそれぞれコンポーネントがあった • いくつかの課題があった サービス共通コンポーネントとは
10. 10 課題
11. 11 課題 • 例えばボタンコンポーネントに修正が発生した場合に、全てのリポジトリにあるボタンコンポーネン トを修正しないといけなかった • 取り残されるリポジトリが出てきてしまった • そのためサービスによって同じボタンでも見た目に差が出てしまっていた 1. コンポーネントの更新が手間だった
12. 12 課題 • コンポーネントの粒度に関しての指針が明文化されていなかった • 各リポジトリを担当するエンジニアのそれぞれの思想で決めていたため、コンポーネント粒度がば らつきがあった • また課題1,2であげている理由から、再利用性に欠けており、メンテナンスもしづらかった 2. コンポーネント粒度にばらつきが出てしまった
13. 13 どのように解決したか
14. 14 どのように解決したか • 1つのリポジトリからコンポーネントを読み込む形にした • コンポーネントを修正する時は 1つのリポジトリで完結するように 1. コンポーネントの更新が手間だった
15. 15 どのように解決したか • サービスごとにコンポーネントを作成する必要がなくなり、作業時間と手間が大幅に減った • リポジトリ間のデザインや機能の差がなくなり、統一性を持たせることができた 結果
16. 16 どのように解決したか • 粒度の統一性と汎用性を持たせて、再利用しやすいコンポーネントを作りたかった • デザイナーの粒度を参考に設計することに • デザイナーの粒度の思想に一番適していたデザインシステムの Atomic Designを採用 2. コンポーネント粒度にばらつきが出てしまった
17. 17 Atomic Design
18. 18 Atomic Design • Atomic Design はデザインシステムを作るための手段 
 • UIコンポーネントの粒度を、パーツやコンポーネント単位で定義していくもの 
 Atomic Designとは
19. 19 Atomic Design • 最小単位で単一のコンポーネント 
 • 最小単位のコンポーネントなので、多くのページで使われることが多い。 
 ◦ Button
 ◦ Icon
 ◦ Checkboxなど
 Atoms
20. 20 Atomic Design • Atomsの組み合わせで作られるコンポーネント 
 • 使い回すことを考え、汎用的に作る 
 Molecules
21. 21 Atomic Design • Atoms,Moleculesの組み合わせで作られるコンポーネント 
 • 汎用性は考えない。 
 • 単独で成り立つことのできるコンポーネント 
 Organisms
22. 22 Atomic Design • コンポーネントのテンプレートとなるコンポーネント 
 • 中身は入れずレイアウトを構成する 
 Templates
23. 23 Atomic Design • その名の通りページ全体のコンポーネント 
 Pages
24. 24 Atomic Design • 粒度の統一性を持たせることができた • 再利用のしやすいコンポーネントができた • エンジニアとデザイナー間で共通言語で話せるようになり、 ◦ 「ここはAtomsで定義しちゃっていいよね？」 ◦ 「これはMolecules？Organisms？」など といったように、コミュニケーションがスムーズになった 結果
25. 25 コンポーネント管理・運用について
26. 26 コンポーネント管理・運用について • サービス共通コンポーネントの見た目は、 Storybookで確認しています
27. 27 Storybook
28. 28 Storybook • コンポーネントのUIを一覧で確認することのできるツール • スペースマーケットでマークアップを行う人はこのツールで、コンポーネント確認しながら作業しま す Storybookとは
29. 29 Storybook
30. 30 Storybook コンポーネントリスト コンポーネントのデザイン
31. 31 Storybook サイズの異なるコンポーネントを確認することができる
32. 32 Storybook テーマごとに分けられたカラーが反映されたコンポーネントを見比べることも可能
33. 33 Storybook Storybookについてはブログに詳しく載っています！ Atomic Designを使ってReactコンポーネントを再設計した話 Storybookの便利なaddon機能のご紹介
34. 34 コンポーネント管理・運用について • このようにサービス共通コンポーネントを作成したことで、先程お話ししたように更新の手間が省け たり、Atomic Designの導入により、コンポーネントに統一性を持たせることができるようになった • この運用方法でサービス共通コンポーネントリポジトリには、日々コンポーネントが追加されている
35. 35 コンポーネント管理・運用について • 現在スペースマーケットの frontend_component(master)にあるコンポーネントの数 ◦ Atoms: 47 ◦ Molecules: 92 ◦ Organisms: 70 ◦ Templates: 8 ◦ Pages: 29 合計 246！！！ • 全てを自力で把握するのは難しい • 新しいコンポーネントを把握しているのが、担当デザイナー、エンジニア、レビュワーだけ • 同じコンポーネントを作ってしまうという可能性もある 把握していないコンポーネントが増えた
36. 36 コンポーネント管理・運用について • 今あるコンポーネントを全て洗い出して把握するのは手間も時間もかかるため、新規のコンポーネ ントから把握することに • それなら担当のデザイナーとエンジニアに共有してもらうことに 把握していないコンポーネントが増えた
37. 37 コンポーネント運用について • 週に1度、エンジニアとデザイナーでミーティングを行っています • そこで自分の担当している新規・追加のコンポーネントについて共有を行う どのように行っているか
38. 38 コンポーネント運用について
39. 39 コンポーネント運用について デザインが確定した 新規コンポーネント
40. 40 コンポーネント運用について デザインが確定した 新規コンポーネント → Atoms列（作業中）
41. 41 コンポーネント運用について デザインが確定した 新規コンポーネント → Atoms列（作業中） コンポーネント化が完 了したら「完了」列に 移動 →
42. 42 コンポーネント運用について • １番の目的であった新規・追加コンポーネントの把握ができるようになった • 既存コンポーネントの中で自分が把握していなかったコンポーネントを把握できた ◦ 現在開発しているページのコンポーネントを共通化できることがわかった まだ始めたばかりですが、今のところいい感じに運用できていると感じています よかったこと
43. 43 まとめ コンポーネントを共通化とAtomic Designの導入により • 全体的に統一性を持ったコンポーネント設計ができるようになった • サービス間をまたいでいても、同じデザインのコンポーネントを使えるようになった • コンポーネントの更新の手間が減った • コンポーネントの数が増え、管理が大変になった ◦ スペースマーケットでは、関係者で集まり共有を行うことでこの課題を解決していま す