Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
複数サービスを運用するコンポーネント設計/Component design to operate multiple services
Search
haraguchi
July 04, 2019
Technology
1
5.8k
複数サービスを運用するコンポーネント設計/Component design to operate multiple services
haraguchi
July 04, 2019
Tweet
Share
More Decks by haraguchi
See All by haraguchi
2019年のAtomicDesignコンポーネント設計/Atomic Design Component Design 2019
haraguchi
1
1.3k
Other Decks in Technology
See All in Technology
20240416_devopsdaystokyo
kzkmaeda
1
190
[2024年3月版] Databricksのシステムアーキテクチャ
databricksjapan
8
1.9k
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
100
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
61
18k
Databricks における 『MLOps』
databricksjapan
2
140
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
680
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
3
240
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
220
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
470
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Unsuck your backbone
ammeep
662
57k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
How to Ace a Technical Interview
jacobian
272
22k
Making Projects Easy
brettharned
108
5.5k
Producing Creativity
orderedlist
PRO
336
39k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Statistics for Hackers
jakevdp
789
220k
Designing with Data
zakiwarfel
95
4.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
Become a Pro
speakerdeck
PRO
10
4.5k
Into the Great Unknown - MozCon
thekraken
10
980
Transcript
複数サービスを運用するコンポーネント設計 2019年7月4日 原口渉 SPACEMARKET Tech Meetup #2
2 自己紹介 原口渉 フロントエンドエンジニア styled-componentsでReactコンポーネントの設計・運用担当
3 今日話すこと
4 今日話すこと 1. スペースマーケットのフロントエンドのリポジトリ構成 2. サービス共通コンポーネント ・ 課題 ・ どのように解決したか 3. コンポーネント管理・運用について
4. まとめ
5 スペースマーケットのフロントエンドのリポジトリ構成
6 スペースマーケットのフロントエンドのリポジトリ構成 SPACEMARKET SPACEMARKET DASHBOARD SPACEMARKET EVENT SPACEMARKET BUSINESS SPACEMARKET
ACCOUNT フロントエンド共通リポジトリ サービス共通コンポーネントリポジトリ 1サービス1リポジトリ、プラスしてサービス共通リポジトリ 2つという構成です
7 スペースマーケットのフロントエンドのリポジトリ構成 SPACEMARKET SPACEMARKET DASHBOARD SPACEMARKET EVENT SPACEMARKET BUSINESS SPACEMARKET
ACCOUNT フロントエンド共通リポジトリ サービス共通コンポーネントリポジトリ 1サービス1リポジトリ、プラスしてサービス共通リポジトリ 2つという構成です 今日はこのリポジトリについてお話します
8 サービス共通コンポーネント
9 サービス共通コンポーネント • スペースマーケットの各サービスで使われている共通コンポーネント • 元々サービス共通コンポーネントというものはなく、各リポジトリにそれぞれコンポーネントがあった • いくつかの課題があった サービス共通コンポーネントとは
10 課題
11 課題 • 例えばボタンコンポーネントに修正が発生した場合に、全てのリポジトリにあるボタンコンポーネン トを修正しないといけなかった • 取り残されるリポジトリが出てきてしまった • そのためサービスによって同じボタンでも見た目に差が出てしまっていた 1.
コンポーネントの更新が手間だった
12 課題 • コンポーネントの粒度に関しての指針が明文化されていなかった • 各リポジトリを担当するエンジニアのそれぞれの思想で決めていたため、コンポーネント粒度がば らつきがあった • また課題1,2であげている理由から、再利用性に欠けており、メンテナンスもしづらかった 2.
コンポーネント粒度にばらつきが出てしまった
13 どのように解決したか
14 どのように解決したか • 1つのリポジトリからコンポーネントを読み込む形にした • コンポーネントを修正する時は 1つのリポジトリで完結するように 1. コンポーネントの更新が手間だった
15 どのように解決したか • サービスごとにコンポーネントを作成する必要がなくなり、作業時間と手間が大幅に減った • リポジトリ間のデザインや機能の差がなくなり、統一性を持たせることができた 結果
16 どのように解決したか • 粒度の統一性と汎用性を持たせて、再利用しやすいコンポーネントを作りたかった • デザイナーの粒度を参考に設計することに • デザイナーの粒度の思想に一番適していたデザインシステムの Atomic Designを採用
2. コンポーネント粒度にばらつきが出てしまった
17 Atomic Design
18 Atomic Design • Atomic Design はデザインシステムを作るための手段 • UIコンポーネントの粒度を、パーツやコンポーネント単位で定義していくもの
Atomic Designとは
19 Atomic Design • 最小単位で単一のコンポーネント • 最小単位のコンポーネントなので、多くのページで使われることが多い。 ◦
Button ◦ Icon ◦ Checkboxなど Atoms
20 Atomic Design • Atomsの組み合わせで作られるコンポーネント • 使い回すことを考え、汎用的に作る Molecules
21 Atomic Design • Atoms,Moleculesの組み合わせで作られるコンポーネント • 汎用性は考えない。 •
単独で成り立つことのできるコンポーネント Organisms
22 Atomic Design • コンポーネントのテンプレートとなるコンポーネント • 中身は入れずレイアウトを構成する Templates
23 Atomic Design • その名の通りページ全体のコンポーネント Pages
24 Atomic Design • 粒度の統一性を持たせることができた • 再利用のしやすいコンポーネントができた • エンジニアとデザイナー間で共通言語で話せるようになり、 ◦
「ここはAtomsで定義しちゃっていいよね?」 ◦ 「これはMolecules?Organisms?」など といったように、コミュニケーションがスムーズになった 結果
25 コンポーネント管理・運用について
26 コンポーネント管理・運用について • サービス共通コンポーネントの見た目は、 Storybookで確認しています
27 Storybook
28 Storybook • コンポーネントのUIを一覧で確認することのできるツール • スペースマーケットでマークアップを行う人はこのツールで、コンポーネント確認しながら作業しま す Storybookとは
29 Storybook
30 Storybook コンポーネントリスト コンポーネントのデザイン
31 Storybook サイズの異なるコンポーネントを確認することができる
32 Storybook テーマごとに分けられたカラーが反映されたコンポーネントを見比べることも可能
33 Storybook Storybookについてはブログに詳しく載っています! Atomic Designを使ってReactコンポーネントを再設計した話 Storybookの便利なaddon機能のご紹介
34 コンポーネント管理・運用について • このようにサービス共通コンポーネントを作成したことで、先程お話ししたように更新の手間が省け たり、Atomic Designの導入により、コンポーネントに統一性を持たせることができるようになった • この運用方法でサービス共通コンポーネントリポジトリには、日々コンポーネントが追加されている
35 コンポーネント管理・運用について • 現在スペースマーケットの frontend_component(master)にあるコンポーネントの数 ◦ Atoms: 47 ◦ Molecules:
92 ◦ Organisms: 70 ◦ Templates: 8 ◦ Pages: 29 合計 246!!! • 全てを自力で把握するのは難しい • 新しいコンポーネントを把握しているのが、担当デザイナー、エンジニア、レビュワーだけ • 同じコンポーネントを作ってしまうという可能性もある 把握していないコンポーネントが増えた
36 コンポーネント管理・運用について • 今あるコンポーネントを全て洗い出して把握するのは手間も時間もかかるため、新規のコンポーネ ントから把握することに • それなら担当のデザイナーとエンジニアに共有してもらうことに 把握していないコンポーネントが増えた
37 コンポーネント運用について • 週に1度、エンジニアとデザイナーでミーティングを行っています • そこで自分の担当している新規・追加のコンポーネントについて共有を行う どのように行っているか
38 コンポーネント運用について
39 コンポーネント運用について デザインが確定した 新規コンポーネント
40 コンポーネント運用について デザインが確定した 新規コンポーネント → Atoms列(作業中)
41 コンポーネント運用について デザインが確定した 新規コンポーネント → Atoms列(作業中) コンポーネント化が完 了したら「完了」列に 移動 →
42 コンポーネント運用について • 1番の目的であった新規・追加コンポーネントの把握ができるようになった • 既存コンポーネントの中で自分が把握していなかったコンポーネントを把握できた ◦ 現在開発しているページのコンポーネントを共通化できることがわかった まだ始めたばかりですが、今のところいい感じに運用できていると感じています よかったこと
43 まとめ コンポーネントを共通化とAtomic Designの導入により • 全体的に統一性を持ったコンポーネント設計ができるようになった • サービス間をまたいでいても、同じデザインのコンポーネントを使えるようになった • コンポーネントの更新の手間が減った
• コンポーネントの数が増え、管理が大変になった ◦ スペースマーケットでは、関係者で集まり共有を行うことでこの課題を解決していま す
None