【デザイン】Atomic Designにおいての各コンポーネントの役割
Atoms
- アプリケーションの共通デザインを担当する。
- 抽象性が最も高い。
- 具体性が最も低い。
- ライブラリにすることが可能。
- ビジネスロジックを持たない。
- stateにアクセスすること不可能。
Molecules
- アプリケーションの共通機能を担当する。
- ライブラリにすることが可能。
- ビジネスロジックを持たない。
- stateにアクセスすること不可能。
Organisms
- 抽象性が最も低い。
- 具体性が最も高い。
- ライブラリにすることが不可能
- ビジネスロジックを持つ。
- stateにアクセスすることが可能。
Templates
- ページをレイアウトする。
Pages
- ページに必要なデータを取得する。
- Templatesを使用しない場合は、Templatesの役割も持つ。
備考
Templatesを省略しない場合のメリット
- Pagesをデータ取得のみに専念させることができる。
- Templatesでレイアウトするため、レイアウトもstorybookで確認することができる。 また、スナップショットテストもし易い。
