スライスとセグメント
スライス
スライスは、Feature-Sliced Designの組織階層における第2のレベルです。その主な目的は、プロダクト、ビジネス、または単にアプリケーションに対する意味に基づいてコードをグループ化することです。
スライスの名前は標準化されておらず、アプリケーションのビジネス領域によって直接決定されます。例えば、フォトギャラリーにはphoto
、create-album
、gallery-page
というスライスがあるかもしれません。SNSには、post
、add-user-to-friends
、news-feed
のようなスライスが必要になるでしょう。
密接に関連するスライスは、同じフォルダーに構造的にグループ化できますが、他のスライスと同じ隔離ルールを遵守する必要があります。この場合、ディレクトリには、複数のスライスによって共有されるコードは存在してはなりません。
Shared層とApp層にはスライスが含まれていません。それは、Shared層がビジネスロジックを含むべきではないため、プロダクトに対して意味を持っていないからです。また、App層はアプリケーション全体に関係するコードのみを含むべきであるため、分割の必要がないからです。
スライスの公開APIルール
スライス内では、コードは自由に整理でき、スライスが質の高い公開APIを提供している限り、それに問題がありません。これがスライスの公開APIルールの本質です。
すべてのスライス(およびスライスを持たないレイヤーのセグメント)は、公開APIの定義を含む必要がある
スライス/セグメントの外部にあるモジュールは、スライス/セグメントの内部ファイル構造ではなく、公開APIのみを参照すべき
公開APIの要件とその作成に関するベストプラクティスについては、公開APIガイドを参照してください。
セグメント
セグメントは、組織階層の第3レベルおよび最終レベルであり、その目的は技術的な性質に基づいてコードをグループ化することです。
いくつかの標準化されたセグメント名があります。
ui
- UIコンポーネント、データフォーマット関数model
- ビジネスロジックとデータストレージ、これらのデータを操作するための関数lib
- 補助的なインフラストラクチャコードapi
- 外部APIとの通信、バックエンドAPIメソッド
他のセグメントも許可されていますが、必要に応じてのみ作成されるべきです。カスタムセグメントの最も一般的な場所は、スライスが意味を持たないApp層とShared層です。
例
レイヤー | ui | model | lib | api |
---|---|---|---|---|
Shared層 | UIライブラリ | 通常は使用されない | 複数の関連ファイルからのユーティリティモジュール。 個別のヘルパー関数が必要な場合は、 lodash-es などのユーティリティライブラリを検討してください。 | 認証やキャッシュなどの追加機能を持つシンプルななAPIクライアント。 |
Entities層 | インタラクティブ要素のスロットを持つビジネスエンティティの骨組み | エンティティのインスタンスのデータストレージと、それらのデータを操作するための関数。 サーバーからのデータを保存するのに最適。TanStack Queryや他の暗黙的なストレージメソッドを使用する場合、省略できる。 | データストレージに関連しないエンティティのインスタンスを操作するための関数 | Shared層からのAPIクライアントを使用してバックエンドとの通信を簡素化するAPIメソッド |
Features層 | ユーザーが機能を使用できるためのインタラクティブ要素 | 必要に応じてビジネスロジックとインフラストラクチャデータストレージ(例:アプリケーションの現在のテーマ)。ユーザーに価値を提供するコードがここにある | model セグメントのビジネスロジックを簡潔に説明するためのインフラストラクチャコード | バックエンドで機能を表すAPIメソッド。 Entities層からのAPIメソッドを組み合わせることがある。 |
Widgets層 | Entities層とFeatures層を自己完結型のUIブロックに構成する。 エラーバウンダリやローディング状態を含むこともできる。 | 必要に応じてインフラストラクチャデータストレージを含むことができる | ページ上でウィジェットブロックが機能するために必要な非ビジネスインタラクション(例:ジェスチャー)やその他のコード | 通常は使用されないが、ネストされたルーティングの文脈でデータローダーを含むことがある(例: Remix) |
Pages層 | Entities層、Features層、Widgets層の構成。 エラーバウンダリやローディング状態を含むこともできる。 | 通常は使用されない | UXを提供するために必要な非ビジネスインタラクション(例:ジェスチャー)やその他のコード | SSR(サーバーサイドレンダリング)指向のフレームワーク用のデータローダー |