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

スライスとセグメント

スライス​

スライスは、Feature-Sliced Designの組織階層における第2のレベルです。その主な目的は、プロダクト、ビジネス、または単にアプリケーションに対する意味に基づいてコードをグループ化することです。

スライスの名前は標準化されておらず、アプリケーションのビジネス領域によって直接決定されます。例えば、フォトギャラリーにはphoto、create-album、gallery-pageというスライスがあるかもしれません。SNSには、post、add-user-to-friends、news-feedのようなスライスが必要になるでしょう。

密接に関連するスライスは、同じフォルダーに構造的にグループ化できますが、他のスライスと同じ隔離ルールを遵守する必要があります。この場合、ディレクトリには、複数のスライスによって共有されるコードは存在してはなりません。

「compose」（作成）、「like」（いいね）、「delete」（削除）の機能が「post」（投稿）フォルダーにグループ化されています。このフォルダーには「some-shared-code.ts」というファイルもあり、その名前は取り消し線が引かれており、そこに存在してはいけないことを示しています。

Shared層とApp層にはスライスが含まれていません。それは、Shared層がビジネスロジックを含むべきではないため、プロダクトに対して意味を持っていないからです。また、App層はアプリケーション全体に関係するコードのみを含むべきであるため、分割の必要がないからです。

スライスの公開APIルール​

スライス内では、コードは自由に整理でき、スライスが質の高い公開APIを提供している限り、それに問題がありません。これがスライスの公開APIルールの本質です。

すべてのスライス（およびスライスを持たないレイヤーのセグメント）は、公開APIの定義を含む必要がある

スライス/セグメントの外部にあるモジュールは、スライス/セグメントの内部ファイル構造ではなく、公開APIのみを参照すべき

公開APIの要件とその作成に関するベストプラクティスについては、公開APIガイドを参照してください。

セグメント​

セグメントは、組織階層の第3レベルおよび最終レベルであり、その目的は技術的な性質に基づいてコードをグループ化することです。

いくつかの標準化されたセグメント名があります。

  • ui - UIコンポーネント、データフォーマット関数
  • model - ビジネスロジックとデータストレージ、これらのデータを操作するための関数
  • lib - 補助的なインフラストラクチャコード
  • api - 外部APIとの通信、バックエンドAPIメソッド

他のセグメントも許可されていますが、必要に応じてのみ作成されるべきです。カスタムセグメントの最も一般的な場所は、スライスが意味を持たないApp層とShared層です。

例​

レイヤーuimodellibapi
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（サーバーサイドレンダリング）指向のフレームワーク用のデータローダー