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

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

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

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

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

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

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

7. 7
なぜAtomic Designなのか？

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

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

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

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

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

13. 13
そこで今回の本題

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

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のみ)

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

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

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

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

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

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のみ)

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

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

24. 24