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

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

gree_tech
November 11, 2021

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

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

gree_tech

November 11, 2021
Tweet

More Decks by gree_tech

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 7
    なぜAtomic Designなのか?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 13
    そこで今回の本題

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide