Nuxt(Vuex)でAtomic Designを採用するときのメモ

数ヶ月Atomic Designを採用したNuxt(Vuexパターン)アプリケーション開発を行ってみて、思ったことのメモ。

Atomic Designとは

bradfrost.com

概要だけ知りたい人に説明すると、基底となるコンポーネント(原子)を作り、その原子を組み合わせて分子コンポーネントを、さらに分子を組み合わせて有機体コンポーネント、そして最終的にそれらを組み合わせたページを組み上げる、というボトムアップ的アプローチのデザイン手法である。

f:id:tic40:20181007213756p:plain

Nuxt(Vuex)におけるコンポーネント分割方針

Atomic Design手法の肝は、 Atoms/Molecules/Organisms のコンポーネント設計にある。 この設計が抽象的なままだと、アトミックデザインの恩恵は十分に得られない。

コンポーネント設計で、まず最初に頭に入れておきたいのは、

  • Stateless or Stateful
  • 関心の分離

Stateless or Stateful

コンポーネントが状態(data)を持ち、それによって挙動を変える場合はStateful、逆に状態を持たないコンポーネントはStateless。 Statelessにすることで状態による副作用がなくなり、使いやすいコンポーネントになる。 Statelessなコンポーネントでは、watchやmountedといったトリガー、Vuexモジュールへの参照なども副作用を伴うので行わない。

関心の分離

上記を踏まえた上で、Atoms/Molecules/Organismsの設計方針を考える。

Atoms

  • 内部に他のコンポーネントを含まない。ネイティブのHTMLでのみ構成される。
  • 再利用されるコンポーネントである。
  • Statelessである。
  • 単一責任である。
  • Vuexモジュールへの参照は行わない。

Molecules

  • 内部にMolecules以上のコンポーネントを含まない。
  • 再利用されるコンポーネントである。
  • Statelessであることが望ましい。
  • 単一責任である。
  • Vuexモジュールへの参照は行わないのが望ましい。

Organisms

  • 内部にOrganisms以上のコンポーネントを含まない。
  • 再利用性は低くてよい。
  • Statefulである。
  • Vuexモジュールを参照する。

Atomic Design ~堅牢で使いやすいUIを効率良く設計する

Atomic Design ~堅牢で使いやすいUIを効率良く設計する