Atomic Designの適用【Vue.js】
過去に紹介したAtomic Designを、Vue.jsコーディングに当てはめて考えてみます。
tech-up.hatenablog.com
Atoms
- ロジックを持たない
- Stateを持たない
- Storeを参照しない
Molecules
- Storeを参照しない
- Atomsのイベントをハンドリング
- Atomsのプロパティ変更や表示切り替え
- Molecules同士の依存関係を避ける
Organisms
- Storeの参照可
- 子要素のイベントをハンドリング、イベント発行
- 親要素からのデータ受取
- Atoms、Moleculesへの依存も可
- 複数Templateからの再利用を可能なように
Template
- Storeの参照可
- 画面内での共通処理を定義
- 画面全体で必要なModelやStateを管理
- ルーティング処理の定義
ただし、最上位階層でデータを定義して、
下位階層へバケツリレーすると、複雑になり管理できなくなる可能性もあります。
あくまで管理しやすくなるか、再利用性はどうか、
開発者同士やデザイナーとのコミュニケーションを阻害しないかを考慮して、
より良い設計を目指すことが大切です。
その上で、全体の設計に一貫性を持たせることが肝要なのではないかと思います。
※参考
