代替案
ビッグボールオブマッド
Section titled “ビッグボールオブマッド”スマート＆ダムコンポーネント
Section titled “スマート＆ダムコンポーネント”デザイン原則
Section titled “デザイン原則”クリーンアーキテクチャ
Section titled “クリーンアーキテクチャ”フレームワーク
Section titled “フレームワーク”Atomic Design
Section titled “Atomic Design”これは何か？
Section titled “これは何か？”アトミックデザインでは、責任の範囲が標準化された層に分かれています。
アトミックデザインは5つの層に分かれます（上から下へ）。
pages- FSDのpages層と同様の目的を持つ。templates- コンテンツに依存しないページの構造を定義するコンポーネント。organisms- ビジネスロジックを持つ分子から構成されるモジュール。molecules- 通常、ビジネスロジックを持たないより複雑なコンポーネント。atoms- ビジネスロジックを持たないUIコンポーネント。
同じ層のモジュールは、FSDのように下の層のモジュールとだけ相互作用しています。 つまり、分子（molecule）は原子（atom）から構築され、生命体（organism）は分子から、テンプレート（template）は生命体から、ページ（page）はテンプレートから構築されます。 また、アトミックデザインはモジュール内での公開APIの使用を前提としています。
フロントエンドでの適用性
Section titled “フロントエンドでの適用性”アトミックデザインはプロジェクトで比較的よく見られます。アトミックデザインは、開発者の間というより、ウェブデザイナーの間で人気です。ウェブデザイナーは、スケーラブルでメンテナンスしやすいデザインを作成するためにアトミックデザインをよく使用しています。 開発では、アトミックデザインは他のアーキテクチャ設計方法論と混合されることがよくあります。
しかし、アトミックデザインはUIコンポーネントとその構成に焦点を当てているため、 アーキテクチャ内でビジネスロジックを実装する問題が発生してしまいます。
問題は、アトミックデザインがビジネスロジックのための明確な責任レベルを提供していないため、 ビジネスロジックがさまざまなコンポーネントやレベルに分散され、メンテナンスやテストが複雑になることです。 ビジネスロジックは曖昧になり、責任の明確な分離が困難になり、コードがモジュール化されず再利用可能でなくなります。
FSDとの統合
Section titled “FSDとの統合”FSDの文脈では、アトミックデザインのいくつかの要素を使用して柔軟でスケーラブルなUIコンポーネントを作成することができます。 atomsとmoleculesの層は、FSDのshared/uiに実装でき、基本的なUI要素の再利用とメンテナンスを簡素化しています。
ディレクトリshared/
ディレクトリui/
ディレクトリatoms/
- …
ディレクトリmolecules/
- …
FSDとアトミックデザインの比較は、両方の設計方法論がモジュール性と再利用性を目指していることを示していますが、 異なる側面に焦点を当てています。アトミックデザインは視覚的コンポーネントとその構成に焦点を当てています。 FSDはアプリケーションの機能を独立したモジュールに分割し、それらの相互関係に焦点を当てています。