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

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

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

3 Atomic Design使っていますか？

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

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

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

7 なぜAtomic Designなのか？

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

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

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

11 だがしかしだな...

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

13 そこで今回の本題

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

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

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

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

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

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

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

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

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

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

gree_tech
PRO

More Decks by gree_tech

Other Decks in Technology

Featured

Transcript