メインコンテンツにスキップ

代替案

WIP

この記事は執筆中です

その公開を早めるために、以下の方法があります。


🍰 Stay tuned!

ビッグボールオブマッド​

WIP

この記事は執筆中です

その公開を早めるために、以下の方法があります。


🍰 Stay tuned!

スマート＆ダムコンポーネント​

WIP

この記事は執筆中です

その公開を早めるために、以下の方法があります。


🍰 Stay tuned!

デザイン原則​

WIP

この記事は執筆中です

その公開を早めるために、以下の方法があります。


🍰 Stay tuned!

DDD​

WIP

この記事は執筆中です

その公開を早めるために、以下の方法があります。


🍰 Stay tuned!

参照​

クリーンアーキテクチャ​

WIP

この記事は執筆中です

その公開を早めるために、以下の方法があります。


🍰 Stay tuned!

フレームワーク​

WIP

この記事は執筆中です

その公開を早めるために、以下の方法があります。


🍰 Stay tuned!

Atomic Design​

これは何か？​

アトミックデザインでは、責任の範囲が標準化された層に分かれています。

アトミックデザインは5つの層に分かれます（上から下へ）。

  1. pages - FSDのpages層と同様の目的を持つ。
  2. templates - コンテンツに依存しないページの構造を定義するコンポーネント。
  3. organisms - ビジネスロジックを持つ分子から構成されるモジュール。
  4. molecules - 通常、ビジネスロジックを持たないより複雑なコンポーネント。
  5. atoms - ビジネスロジックを持たないUIコンポーネント。

同じ層のモジュールは、FSDのように下の層のモジュールとだけ相互作用しています。 つまり、分子（molecule）は原子（atom）から構築され、生命体（organism）は分子から、テンプレート（template）は生命体から、ページ（page）はテンプレートから構築されます。 また、アトミックデザインはモジュール内での公開APIの使用を前提としています。

フロントエンドでの適用性​

アトミックデザインはプロジェクトで比較的よく見られます。アトミックデザインは、開発者の間というより、ウェブデザイナーの間で人気です。ウェブデザイナーは、スケーラブルでメンテナンスしやすいデザインを作成するためにアトミックデザインをよく使用しています。 開発では、アトミックデザインは他のアーキテクチャ設計方法論と混合されることがよくあります。

しかし、アトミックデザインはUIコンポーネントとその構成に焦点を当てているため、 アーキテクチャ内でビジネスロジックを実装する問題が発生してしまいます。

問題は、アトミックデザインがビジネスロジックのための明確な責任レベルを提供していないため、 ビジネスロジックがさまざまなコンポーネントやレベルに分散され、メンテナンスやテストが複雑になることです。 ビジネスロジックは曖昧になり、責任の明確な分離が困難になり、コードがモジュール化されず再利用可能でなくなります。

FSDとの統合​

FSDの文脈では、アトミックデザインのいくつかの要素を使用して柔軟でスケーラブルなUIコンポーネントを作成することができます。 atomsとmoleculesの層は、FSDのshared/uiに実装でき、基本的なUI要素の再利用とメンテナンスを簡素化しています。

├── shared
│   ├── ui 
│   │   ├── atoms
│   │   ├── molecules
│   ...

FSDとアトミックデザインの比較は、両方の設計方法論がモジュール性と再利用性を目指していることを示していますが、 異なる側面に焦点を当てています。アトミックデザインは視覚的コンポーネントとその構成に焦点を当てています。 FSDはアプリケーションの機能を独立したモジュールに分割し、それらの相互関係に焦点を当てています。

Feature Driven​

WIP

この記事は執筆中です

その公開を早めるために、以下の方法があります。


🍰 Stay tuned!