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

登壇者：村田翔さん

Atomic Design

Atomic Designのレベル分け：

1. Atoms
2. Molecules
3. Organisms
4. Template
5. Page

利点

• Next.jsやNuxt.jsのディレクトリ構成に合っている
• UIコンポーネントの共通化
• 複数サイトに一貫性を持たせる
• デザイン及び開発の効率化を目指す

遭遇しがちな問題

• どのレベルに置けばいい？Molecules？Organisms？
• 状態管理はどこでする？
• プロパティで値のバケツリレーになる
• marginはどのレベルで定義するべきか

コンポーネントごとに責務の範囲を明確にすると幸せになる

コンポーネントの詳細

1. Atoms

• 最小のUIコンポーネント
• ポイント：プロパティで上位レベルから値を埋め込むため、データは基本利用しない
• 外枠にmarginを持たない

1. Molecules

• Atomsを組み合わせたコンポーネント
• ポイント：プロパティでorganismsから値を埋め込むため、データは基本利用しない
• 外枠にmarginをもたない

1. Organisms

• 複数のAtom、Moleculesを組み合わせたコンポーネント
• ポイント：StoreからGetterでデータを取得し、下位レベルのコンポーネントに値を渡す
• 外枠にmarginを持たない

1. Template

• 下位レベルのコンポーネントを組み合わせたUIフレーム
• ポイント：レイアウトを定義するのに特化、データの受け渡しは行わない

1. Page

• アプリケーションのルート
• ポイント：APIからの必要な情報の受け渡し

何故、こうするのか

• コンポーネントが再利用しやすい
• 状態管理がカオスになることを避けることが出来、コードの見通しがよくなる
• 誰がレビューしても指摘のブレがなくなる

Back to list