代替案
この記事は執筆中です
その公開を早めるために、以下の方法があります。
- 📢 フィードバックを共有する (チケットでのコメント/絵文字リアクション)
- 💬 チャットでの議論結果をチケットにまとめる (チャットURL)
- ⚒️ 他の方法で貢献する
🍰 Stay tuned!
ビッグボールオブマッド
この記事は執筆中です
その公開を早めるために、以下の方法があります。
- 📢 フィードバックを共有する (チケットでのコメント/絵文字リアクション)
- 💬 チャットでの議論結果をチケットにまとめる (チャットURL)
- ⚒️ 他の方法で貢献する
🍰 Stay tuned!
スマート&ダムコンポーネント
この記事は執筆中です
その公開を早めるために、以下の方法があります。
- 📢 フィードバックを共有する (チケットでのコメント/絵文字リアクション)
- 💬 チャットでの議論結果をチケットにまとめる (チャットURL)
- ⚒️ 他の方法で貢献する
🍰 Stay tuned!
デザイン原則
この記事は執筆中です
その公開を早めるために、以下の方法があります。
- 📢 フィードバックを共有する (チケットでのコメント/絵文字リアクション)
- 💬 チャットでの議論結果をチケットにまとめる (チャットURL)
- ⚒️ 他の方法で貢献する
🍰 Stay tuned!
DDD
この記事は執筆中です
その公開を早めるために、以下の方法があります。
- 📢 フィードバックを共有する (チケットでのコメント/絵文字リアクション)
- 💬 チャットでの議論結果をチケットにまとめる (チャットURL)
- ⚒️ 他の方法で貢献する
🍰 Stay tuned!
参照
クリーンアーキテクチャ
この記事は執筆中です
その公開を早めるために、以下の方法があります。
- 📢 フィードバックを共有する (チケットでのコメント/絵文字リアクション)
- 💬 チャットでの議論結果をチケットにまとめる (チャットURL)
- ⚒️ 他の方法で貢献する
🍰 Stay tuned!
フレームワーク
この記事は執筆中です
その公開を早めるために、以下の方法があります。
- 📢 フィードバックを共有する (チケットでのコメント/絵文字リアクション)
- 💬 チャットでの議論結果をチケットにまとめる (チャットURL)
- ⚒️ 他の方法で貢献する
🍰 Stay tuned!
Atomic Design
これは何か?
アトミックデザインでは、責任の範囲が標準化された層に分かれています。
アトミックデザインは5つの層に分かれます(上から下へ)。
pages
- FSDのpages
層と同様の目的を持つ。templates
- コンテンツに依存しないページの構造を定義するコンポーネント。organisms
- ビジネスロジックを持つ分子から構成されるモジュール。molecules
- 通常、ビジネスロジックを持たないより複雑なコンポーネント。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
この記事は執筆中です
その公開を早めるために、以下の方法があります。
- 📢 フィードバックを共有する (チケットでのコメント/絵文字リアクション)
- 💬 チャットでの議論結果をチケットにまとめる (チャットURL)
- ⚒️ 他の方法で貢献する
🍰 Stay tuned!