GREE Tech Conference 2021 で発表された資料です。 https://techcon.gree.jp/2021/session/ShortSession-1
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話アウモ株式会社 エンジニアマネージャー 村田 翔
View Slide
• 名前• 村田 翔(むらた じょう)• GREE Tech Conference2020でも登壇してます• 担当• サーバーサイドエンジニア• フロントエンド、インフラも少し触ります• aumo歴• もうそろそろ丸4年• aumoエンジニアとしては2番目に古いメンバー自己紹介2アウモテックブログで取組発信中↓
3Atomic Design使っていますか?
利用したことあるUIコンポーネント設計を教えてくださいⓘ Start presenting to display the poll results on this slide.
5Web施設サイト4ドメインにAtomic Design適用1つのNuxt.jsのレポジトリで4ドメイン出し分け→ Atomic Designを採用することにより、効率的にUIのトンマナを統一しつつ開発進行
6Brad Frost氏が発案。構成要素を「Atoms(原子)、Molecules(分子)、Organisms(有機体)、Template(テンプレート)、Page(ページ)」の階層に分けた設計手法。Atomic Designとは
7なぜAtomic Designなのか?
8Nuxt.jsのディレクトリ構成に合う(components / layouts / pages)
9UIコンポーネントの共通化
10UIコンポーネントの共通化により• 複数サイトでUIに一貫性を持たせる• デザイン及び開発の効率化を目指すため
11だがしかしだな...
12Atomic Designで遭遇しがちな問題• Moleculesなのか?Organismsなのか?どのレベルに当てはめるべきか迷う• 状態管理はどこでするべきか?• プロパティで値渡しのバケツリレーになりがち• marginはどのレベルで定義するべきか などなど...
13そこで今回の本題
14コンポーネント毎に責務の範囲を明確にする話
15Web施設サイトで実際に適用している構成コンポーネントとディレクトリと責務の組み合わせレベル 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を持たせない
17Atomsを組み合わせたコンポーネント2. Molecules(分子)▼ポイント・プロパティでOrganismsから値を埋め込むため、データは基本的に利用しない・外枠にmarginを持たせない
18複数のAtomsとMoleculesを組み合わせたコンポーネント3. Organisms(有機体)▼ポイント・Storeからgetterでデータを取得し、下位レベルのコンポーネントに埋め込む値を渡す・外枠にmarginを持たせない
19下位レベルのコンポーネントを組み合わせたUIフレーム4. Template(テンプレート)▼ポイント・レイアウトを定義するのに特化、データの受け渡しは行わない
20アプリケーションのルート5. Page(ページ)▼ポイント・APIから必要な情報を取得し、Storeにcommitする
21Web施設サイトで実際に適用している構成[再掲]コンポーネントとディレクトリと責務の組み合わせレベル 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.
24