upstream-twenty/packages/twenty-docs/l/ja/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx

---
title: フォルダ構成
icon: folder-tree
info: 当社のフォルダ構造の詳細な解説
---

このガイドでは、プロジェクトのディレクトリ構成の詳細と、それが Twenty の整理と保守性にどのように寄与するかを解説します。

このフォルダ構成の規約に従うことで、特定の機能に関連するファイルを見つけやすくなり、アプリケーションのスケーラビリティと保守性を確保できます。

```
front
└───modules
│   └───module1
│   │   └───submodule1
│   └───module2
│   └───ui
│   │   └───display
│   │   └───inputs
│   │   │   └───buttons
│   │   └───...
└───pages
└───...
```

## ページ

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

## モジュール

各モジュールは、単一の機能または機能のグループを表し、それぞれ固有のコンポーネント、状態、動作ロジックで構成されています。
以下の構造に従う必要があります。 モジュール内にモジュール（サブモジュール）をネストでき、同じルールが適用されます。

```
module1
  └───components
  │   └───component1
  │   └───component2
  └───constants
  └───contexts
  └───graphql
  │   └───fragments
  │   └───queries
  │   └───mutations
  └───hooks
  │   └───internal
  └───states
  │   └───selectors
  └───types
  └───utils
```

### コンテキスト

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

詳細は[Reactコンテキスト](https://react.dev/reference/react#context-hooks)を参照してください。

### GraphQL

フラグメント、クエリ、ミューテーションを含みます。

詳細は[GraphQL](https://graphql.org/learn/)を参照してください。

* フラグメント

フラグメントはクエリの再利用可能な一部分で、さまざまな箇所で使用できます。 フラグメントを使用することで、コードを重複させることを避けやすくなります。

詳細は[GraphQLフラグメント](https://graphql.org/learn/queries/#fragments)を参照してください。

* クエリ

詳細は[GraphQLクエリ](https://graphql.org/learn/queries/)を参照してください。

* ミューテーション

詳細は[GraphQLミューテーション](https://graphql.org/learn/queries/#mutations)を参照してください。

### フック

詳細は[フック](https://react.dev/learn/reusing-logic-with-custom-hooks)を参照してください。

### ステート

ステート管理のロジックを含みます。 [Jotai](https://jotai.org) がこれを管理します。

* セレクター: 派生アトム（`createAtomSelector` を使用）は、他のアトムから値を計算し、自動的にメモ化されます。

Reactの組み込みステート管理は依然としてコンポーネント内のステートを処理します。

### ユーティリティ

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

## UI

アプリケーションで使用される再利用可能なUIコンポーネントをすべて含みます。

このフォルダには、特定の種類のコンポーネント用に `data`、`display`、`feedback`、`input` といったサブフォルダを含めることができます。 各コンポーネントは自己完結型で再利用可能でなければならず、アプリケーションのさまざまな部分で使用できます。

UIコンポーネントを`modules`フォルダ内の他のコンポーネントから分離することで、一貫したデザインを維持し、UIの変更がコードベースの他の部分（ビジネスロジック）に影響を与えないようにするのが容易になります。

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

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

### 内部

各部分（フック、ステート、...） は、モジュール内でのみ使用される部分を含む `internal` フォルダを持つことができます。