数ヶ月Atomic Designを採用したNuxt(Vuexパターン)アプリケーション開発を行ってみて、思ったことのメモ。
Atomic Designとは
概要だけ知りたい人に説明すると、基底となるコンポーネント(原子)を作り、その原子を組み合わせて分子コンポーネントを、さらに分子を組み合わせて有機体コンポーネント、そして最終的にそれらを組み合わせたページを組み上げる、というボトムアップ的アプローチのデザイン手法である。
Nuxt(Vuex)におけるコンポーネント分割方針
Atomic Design手法の肝は、 Atoms/Molecules/Organisms のコンポーネント設計にある。 この設計が抽象的なままだと、アトミックデザインの恩恵は十分に得られない。
コンポーネント設計で、まず最初に頭に入れておきたいのは、
- Stateless or Stateful
- 関心の分離
Stateless or Stateful
コンポーネントが状態(data)を持ち、それによって挙動を変える場合はStateful、逆に状態を持たないコンポーネントはStateless。 Statelessにすることで状態による副作用がなくなり、使いやすいコンポーネントになる。 Statelessなコンポーネントでは、watchやmountedといったトリガー、Vuexモジュールへの参照なども副作用を伴うので行わない。
関心の分離
- 抽象度の高いコンポーネントには複数の責務を負わせない。
- コンポーネント同士は疎結合にして、それらを組み合わせることで最終的なPageを作り上げていくようにする。結合が強いと、保守/再利用性の低いコンポーネントとなり負債化する。
上記を踏まえた上で、Atoms/Molecules/Organismsの設計方針を考える。
Atoms
Molecules
- 内部にMolecules以上のコンポーネントを含まない。
- 再利用されるコンポーネントである。
- Statelessであることが望ましい。
- 単一責任である。
- Vuexモジュールへの参照は行わないのが望ましい。
Organisms
- 内部にOrganisms以上のコンポーネントを含まない。
- 再利用性は低くてよい。
- Statefulである。
- Vuexモジュールを参照する。
Atomic Design ~堅牢で使いやすいUIを効率良く設計する
- 作者: 五藤佑典
- 出版社/メーカー: 技術評論社
- 発売日: 2018/04/25
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る