「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話

GREE Tech Conference 2021 で発表された資料です。
https://techcon.gree.jp/2021/session/ShortSession-1

Transcript

1. 「Atomic Design × Nuxt.js」
   コンポーネント毎に責務の範囲を
   明確にしたら幸せになった話
   アウモ株式会社 エンジニアマネージャー 村田 翔
   

   View Slide

2. • 名前
   • 村田 翔（むらた じょう）
   • GREE Tech Conference2020でも登壇してます
   • 担当
   • サーバーサイドエンジニア
   • フロントエンド、インフラも少し触ります
   • aumo歴
   • もうそろそろ丸4年
   • aumoエンジニアとしては2番目に古いメンバー
   自己紹介
   2
   アウモテックブログで取組発信中
   ↓
   

   View Slide

3. 3
   Atomic Design使っていますか？
   

   View Slide

4. 利用したことあるUIコンポーネント設計
   を教えてください
   ⓘ Start presenting to display the poll results on this slide.
   

   View Slide

5. 5
   Web施設サイト4ドメインにAtomic Design適用
   1つのNuxt.jsのレポジトリで4ドメイン出し分け
   → Atomic Designを採用することにより、効率的にUIのトンマナを統一しつつ開発進行
   

   View Slide

6. 6
   Brad Frost氏が発案。構成要素を「Atoms(原子)、Molecules(分子)、Organisms(有機
   体)、Template(テンプレート)、Page(ページ)」の階層に分けた設計手法。
   Atomic Designとは
   

   View Slide

7. 7
   なぜAtomic Designなのか？
   

   View Slide

8. 8
   Nuxt.jsのディレクトリ構成に合う
   (components / layouts / pages)
   

   View Slide

9. 9
   UIコンポーネントの共通化
   

   View Slide

10. 10
    UIコンポーネントの共通化により
    • 複数サイトでUIに一貫性を持たせる
    • デザイン及び開発の効率化を目指すため
    

    View Slide

11. 11
    だがしかしだな...
    

    View Slide

12. 12
    Atomic Designで遭遇しがちな問題
    • Moleculesなのか？Organismsなのか？
    どのレベルに当てはめるべきか迷う
    • 状態管理はどこでするべきか？
    • プロパティで値渡しのバケツリレーになりがち
    • marginはどのレベルで定義するべきか などなど...
    

    View Slide

13. 13
    そこで今回の本題
    

    View Slide

14. 14
    コンポーネント毎に責務の範囲を明確にする話
    

    View Slide

15. 15
    Web施設サイトで実際に適用している構成
    コンポーネントとディレクトリと責務の組み合わせ
    レベル Atomic Design ディレクトリ 責務
    1 Atoms(原子) ~components/atoms ・最小UIコンポーネント
    2 Molecules(分子) ~components/molecules ・Atomsを組合せたUIコンポーネント
    3 Organisms(有機体) ~components/organisms
    ・複数のAtoms、Moleculesを持つUIコンポーネント
    ・Storeとのやり取り(Dispatch/Render)
    ・ビジネスロジック
    4 Template(テンプレート) ~layouts ・下位レベルのコンポーネントを組み合わせたUIフレーム
    5 Page(ページ) ~pages
    ・アプリケーションのルート
    ・router関連の処理
    ・認証認可
    ・Storeとのやり取り(Dispatchのみ)
    

    View Slide

16. 16
    最小単位のUIコンポーネント
    1. Atoms(原子)
    ▼ポイント
    ・プロパティで上位レベルから値を埋め込むため、データは基本的に利用しない
    ・外枠にmarginを持たせない
    

    View Slide

17. 17
    Atomsを組み合わせたコンポーネント
    2. Molecules(分子)
    ▼ポイント
    ・プロパティでOrganismsから値を埋め込むため、データは基本的に利用しない
    ・外枠にmarginを持たせない
    

    View Slide

18. 18
    複数のAtomsとMoleculesを組み合わせたコンポーネント
    3. Organisms(有機体)
    ▼ポイント
    ・Storeからgetterでデータを取得し、下位レベルのコンポーネントに埋め込む値を渡す
    ・外枠にmarginを持たせない
    

    View Slide

19. 19
    下位レベルのコンポーネントを組み合わせたUIフレーム
    4. Template(テンプレート)
    ▼ポイント
    ・レイアウトを定義するのに特化、データの受け渡しは行わない
    

    View Slide

20. 20
    アプリケーションのルート
    5. Page(ページ)
    ▼ポイント
    ・APIから必要な情報を取得し、Storeにcommitする
    

    View Slide

21. 21
    Web施設サイトで実際に適用している構成
    [再掲]コンポーネントとディレクトリと責務の組み合わせ
    レベル Atomic Design ディレクトリ 責務
    1 Atoms(原子) ~components/atoms ・最小UIコンポーネント
    2 Molecules(分子) ~components/molecules ・Atomsを組合せたUIコンポーネント
    3 Organisms(有機体) ~components/organisms
    ・複数のAtoms、Moleculesを持つUIコンポーネント
    ・Storeとのやり取り(Dispatch/Render)
    ・ビジネスロジック
    4 Template(テンプレート) ~layouts ・下位レベルのコンポーネントを組み合わせたUIフレーム
    5 Page(ページ) ~pages
    ・アプリケーションのルート
    ・router関連の処理
    ・認証認可
    ・Storeとのやり取り(Dispatchのみ)
    

    View Slide

22. 22
    • コンポーネント再利用しやすい状態になる
    • 状態管理がカオス状態になることを避けること
    ができ、コードの見通しがよくなる
    • 誰がレビューしても指摘のブレがなくなる
    コンポーネント毎の責務範囲を明確にしておくことで
    おわりに
    

    View Slide

23. Atomic Designを活用してみようと思い
    ましたか？
    ⓘ Start presenting to display the poll results on this slide.
    

    View Slide

24. View Slide