Charles BochetandGitHub
2674589b44
## Remove all Recoil references and replace with Jotai ### Summary - Removed every occurrence of Recoil from the entire codebase, replacing with Jotai equivalents where applicable - Updated `README.md` tech stack: `Recoil` → `Jotai` - Rewrote documentation code examples to use `createAtomState`/`useAtomState` instead of `atom`/`useRecoilState`, and removed `RecoilRoot` wrappers - Cleaned up source code comment and Cursor rules that referenced Recoil - Applied changes across all 13 locale translations (ar, cs, de, es, fr, it, ja, ko, pt, ro, ru, tr, zh)
110 lines
4.7 KiB
Plaintext
110 lines
4.7 KiB
Plaintext
---
|
|
title: フォルダ構成
|
|
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` フォルダを持つことができます。
|