Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

34dcc3f5c5e67a82183b8b87cf378a8d?s=47 haraguchi
December 10, 2019

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

34dcc3f5c5e67a82183b8b87cf378a8d?s=128

haraguchi

December 10, 2019
Tweet

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 最後に • こんな感じでスペースマーケットのコンポーネントは、デザイナーとエンジニア で協力しながら作っています • 少しでも興味あったら是非一度遊びに来てください! • うちはこんなことやってるよ、とかあったら是非教えてください!

  34. None