2019年のAtomicDesignコンポーネント設計/Atomic Design Component Design 2019

サービス共通コンポーネントについて
https://speakerdeck.com/haraguchi/component-design-to-operate-multiple-services

課題管理フローについて
https://blog.spacemarket.com/code/spm-component-management/

Transcript

1. 2019年の Atomic Design コンポーネント設計 2019/12/10 原口渉 SPACEMARKET Design & Frontend Meetup
2. 2 自己紹介 原口渉 マークアップとコンポーネントの設計・運用をメイン で行っています。
3. 3 はじめに
4. 4 どのようにマークアップをしているか • 開発環境 ◦ コンポーネント：React、styled-components、Atomic Design ◦ デザインツール：Figma ◦ 確認：Storybook
5. 5 どのようにマークアップをしているか • サービス共通コンポーネントリポジトリでマークアップ ◦ スペースマーケットで運営しているサービスで共通で使われているコン ポーネントのこと ▪ 前回の登壇で話しているのでよろしければご覧ください • 資料を見てくださっている方へ Speacker Deckだとリンクが無効になるので下にリンク貼っています
6. 6 コンポーネント推進PJ
7. 7 コンポーネント推進PJ • コンポーネント設計・運用を職域としているエンジニアとデザイナー • コンポーネントの設計・運用について ◦ 方針決め ◦ 課題の共有・相談 • 目標 ◦ スペースマーケットのコンポーネントのガイドラインを作る どんなことをしているか
8. 8 コンポーネント推進PJでやったことを紹介します
9. 9 コンポーネント推進PJ 1. 共通コンポーネントの反映 2. コンポーネントの粒度と命名規則の策定 3. 課題管理フローの策定 4. プロダクトとStorybookの状態が異なる問題の対応 やったこと
10. 10 やったこと1：共通コンポーネントの反映 • 共通コンポーネントが適用されていないページが存在している 課題
11. 11 やったこと1：共通コンポーネントの反映 SPACEMARKET SPACEMARKET DASHBOARD SPACEMARKET EVENT SPACEMARKET BUSINESS SPACEMARKET ACCOUNT フロントエンド共通リポジトリ サービス共通コンポーネントリポジトリ スペースマーケットのフロントエンドのリポジトリ構成
12. 12 やったこと1：共通コンポーネントの反映 共通コンポーネントが反映されていないと...
13. 13 やったこと1：共通コンポーネントの反映 共通コンポーネントが反映されていると...！
14. 14 やったこと1：共通コンポーネントの反映 • 一部のリポジトリの移行が完了し、更新の手間が減った ◦ 完了していないところもあるので引き続き 結果
15. 15 やったこと2：コンポーネントの粒度と命名規則の策定 • 明確なコンポーネントの粒度や命名規則が決まっていなかった ◦ 粒度・命名規則にばらつき 課題
16. 16 やったこと2：コンポーネントの粒度と命名規則の策定 • 適切な粒度に区切って運用管理しやすくするのが目的 • 似た見た目でもコンポーネントを分ける ◦ 再利用性は副次的なものという考え（優先度は高くない） コンポーネントの粒度について：方針
17. 17 やったこと2：コンポーネントの粒度と命名規則の策定 • 粒度に関しての悩みごとが減りそう...！ コンポーネントの粒度について：結果
18. 18 やったこと2：コンポーネントの粒度と命名規則の策定 • OrganismsかMoleculesか ◦ 難しい ◦ 判断基準の1つとして、見た目で役割がわかること コンポーネントの粒度について：OrganismsかMoleculesか
19. 19 やったこと2：コンポーネントの粒度と命名規則の策定 • スペースのリストという役割がわかる
20. 20 やったこと2：コンポーネントの粒度と命名規則の策定 • なんとなくスペースの情報を掲載しているコン ポーネントということはわかる • 単体ではページの構成要素にならないと判断
21. 21 やったこと2：コンポーネントの粒度と命名規則の策定 • どこのページのコンポーネントかを明確にする ◦ Page名を接頭につけて命名する コンポーネントの命名規則
22. 22 やったこと2：コンポーネントの粒度と命名規則の策定 • Pages：Pages名 = URLとなるもの ◦ /portal → PortalPage • Templates：Pages名 + template = ラップする要素に関連する ◦ PortalPageTemplate • Organisms：Page名 + コンポーネント名（単体で意味を成す） ◦ PortalCategoryList • Molecules：Page名 + コンポーネント名（単体では意味を成さない） ◦ PortalCategoryListItem • Atoms：このルールにはあてはまらない。汎用的な命名にする
23. 23 やったこと3：課題管理フローの策定 • 日々増えてくコンポーネントの課題 • ドキュメントで管理していた 課題
24. 24 やったこと3：課題管理フローの策定 • ボードで一覧化できるツールで管理することにした ◦ JIRA 解決策
25. 25 やったこと3：課題管理フローの策定
26. 26 やったこと3：課題管理フローの策定
27. 27 やったこと3：課題管理フローの策定
28. 28 やったこと3：課題管理フローの策定 結果 • 課題の管理が楽になった ◦ ブログに書いてます やったこと3：課題管理フローの策定
29. 29 やったこと4：プロダクトとStorybookの状態が異なる問題の対応 • storiesファイルの更新がされず、プロダクト側とStorybookのpropsに差が出 てしまう 課題
30. 30 やったこと4：プロダクトとStorybookの状態が異なる問題の対応 • マークアップに入る前にpropsをstoriesファイルに書いてもらう ◦ 記載してもらったpropsに沿ってマークアップをすることで、FE開発者の 修正が減る • 基本は見つけたら直す ◦ すぐに対応できない場合は課題管理票に残す ◦ 毎週チェックするので忘れない 解決策
31. 31 所感 • やることはたくさんある • 共通の認識を持つことができる • デザイナーとの連携がとりやすくなった
32. 32 最後に
33. 33 最後に • こんな感じでスペースマーケットのコンポーネントは、デザイナーとエンジニア で協力しながら作っています • 少しでも興味あったら是非一度遊びに来てください！ • うちはこんなことやってるよ、とかあったら是非教えてください！