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 operat...
Search
haraguchi
July 04, 2019
Technology
1
6.5k
複数サービスを運用するコンポーネント設計/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.6k
Other Decks in Technology
See All in Technology
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
160
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
220
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
2k
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
240
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
280
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Wasmのエコシステムを使った ツール作成方法
askua
0
220
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
510
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
1k
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
670
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Facilitating Awesome Meetings
lara
56
6.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Fireside Chat
paigeccino
40
3.7k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Agile that works and the tools we love
rasmusluckow
331
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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