メインコンテンツへスキップ
Header
このガイドでは、プロジェクトディレクトリ構造の詳細と、Twentyの組織化および保守性への貢献について探ります。 このフォルダアーキテクチャの規約に従うことで、特定の機能に関連するファイルを見つけやすくし、アプリケーションがスケーラブルでメンテナブルであることを保証します。 
front
└───modules
│   └───module1
│   │   └───submodule1
│   └───module2
│   └───ui
│   │   └───display
│   │   └───inputs
│   │   │   └───buttons
│   │   └───...
└───pages
└───...

​
ページ

アプリケーションルートによって定義されたトップレベルのコンポーネントを含みます。 それらは、モジュールフォルダからより低レベルのコンポーネントをインポートします（詳細は下記を参照）。

​
モジュール

Each module represents a feature or a group of feature, comprising its specific components, states, and operational logic. 以下の構造に従う必要があります。 モジュール内にモジュール（サブモジュールとして参照）をネストし、同じルールが適用されます。 
module1
  └───components
  │   └───component1
  │   └───component2
  └───constants
  └───contexts
  └───graphql
  │   └───fragments
  │   └───queries
  │   └───mutations
  └───hooks
  │   └───internal
  └───states
  │   └───selectors
  └───types
  └───utils

​
コンテキスト

コンテキストは、各レベルでプロップスを手動で渡すことなく、コンポーネントツリーを通じてデータを渡す方法です。 詳細はReactコンテキストを参照してください。

​
GraphQL

フラグメント、クエリ、およびミューテーションを含む。 詳細はGraphQLを参照してください。
  • フラグメント
フラグメントはクエリの再利用可能な部分で、異なる場所で使用できます。 フラグメントを使用することで、コードを重複させることを避けやすくなります。 詳細はGraphQL フラグメントを参照してください。
  • クエリ
詳細はGraphQLクエリを参照してください。
  • ミューテーション
詳細はGraphQLミューテーションを参照してください。

​
フック

詳細はフックを参照してください。

​
ステート

ステート管理ロジックを含みます。 これを管理するのはRecoilJSです。 Reactの組み込みステート管理は依然としてコンポーネント内のステートを処理します。

​
ユーティル

再利用可能な純粋関数のみを含むべきです。 それ以外の場合は、hooksフォルダにカスタムフックを作成します。

​
UI

アプリケーションで使用される再利用可能なUIコンポーネントをすべて含みます。 このフォルダには、特定のタイプのコンポーネント用にdata、display、feedback、およびinputのようなサブフォルダが含まれることがあります。 各コンポーネントは自己完結型で再利用可能でなければならず、アプリケーションのさまざまな部分で使用できます。 UIコンポーネントをmodulesフォルダ内の他のコンポーネントから分離することで、一貫したデザインを維持し、UIの変更がコードベースの他の部分（ビジネスロジック）に影響を与えないようにするのが容易になります。

​
インターフェースと依存関係

uiフォルダを除く任意のモジュールから他のモジュールコードをインポートできます。 これにより、そのコードは簡単にテストできます。

​
内部

各部分（フック、ステート、…） モジュールの一部はinternalフォルダを持ち、モジュール内でのみ使用される部分を含みます。