Zenn
🐈

モジュールドコロケーション設計のアイデア（叩き）

2024/11/18に公開
Next.js
React
tech

コロケーション設計はフロントエンド開発において、関連するファイルを近くに配置し、構造を直感的かつ管理しやすくする手法です。私も日常的にコロケーション設計を活用していますが、設計を進める中で階層的な疎結合が徹底しきれなかったり、使い回す要素をどの階層に配置するべきか迷うことがあります。

そこで、「モジュールドコロケーション設計」というアイデアを試しています。これは、コンポーネント中心のディレクトリ構造を見直し、モジュール単位で整理するアプローチです。この記事では、モジュールドコロケーション設計の基本概念、具体例、そして導入することで得られるメリットについて解説します。

追記：

やっぱり通常の_componentsフォルダの設計にして、コンポーネントに依存するカスタムフックなどのファイルはコンポーネント用のフォルダを作って管理する形でこロケーション設計を維持するのが良いのかなと思いました。

理由：UI系のコンポーネントにカスタムフックなどの情報を含めたい場合はやっぱりあるので、_componentsフォルダ内で管理できるのがよさそう。

_components
|- xxx-form
|- |- xxx-form.tsx
|- |- _hooks
|- |- |- use-xxx-form.tsx
|- |- _utils
|- |- |- specified-function.ts

コロケーション設計とは？

コロケーション設計の基本は「関連するものを一箇所にまとめる」ことです。コンポーネント、ユーティリティ関数、カスタムフック、テストファイルなどを近くに配置することで、以下の利点があります。

  1. 可読性向上: 関連するコードが一箇所にまとまることで、他の開発者がコードを理解しやすくなります。
  2. メンテナンス性向上: 修正が必要な場合、どこを変更すればよいか直感的にわかるため、作業が効率化します。
  3. スコープの明確化: 各コンポーネントやファイルが特定の目的に集中するため、コードのスコープが明確になります。

コロケーション設計で直面する課題

コロケーション設計を採用していても、以下のような悩ましいケースに遭遇することがあります。

  1. 複雑なページのディレクトリ設計
    多数のコンポーネントや機能を持つページでは、どのようにディレクトリを分割するべきか迷います。

  2. カスタムフックやサーバーアクションの依存先
    特定のコンポーネントに依存したカスタムフックやサーバーアクションをどの階層に配置すべきかが不明確になる場合があります。

  3. 使い回すコンポーネントの配置場所
    使い回し可能なコンポーネントは上位階層に移動させるべきですが、移動が進むにつれ、コロケーション設計の初期意図が崩れてしまうことがあります。

モジュールドコロケーション設計とは？

こうした課題を解決するために、「モジュールドコロケーション設計」を提案します。この設計では、「モジュール」を単位として関連する要素をまとめることを目的としています。

基本原則

以下の基本原則に従います。

  1. コロケーション設計を踏襲する: コードの近接性を維持し、関連する要素をまとめる。
  2. _components フォルダを _modules に変更する: フォルダ構成をモジュール単位で整理する。
  3. モジュール内に依存関係を閉じ込める: カスタムフックやユーティリティ関数、サーバーアクションをモジュール内で管理する。
  4. モジュールの定義: モジュールを「複数のUIコンポーネントの組み合わせ」と定義し、UIとロジックを統合的に扱う。

ディレクトリ設計例

Before: 従来のコロケーション設計

以下は、従来のコロケーション設計の一例です。

src/
├── _components/
│   ├── Card/
│   │   ├── Card.tsx
│   │   └── Card.test.tsx
│   └── Form/
│       ├── Form.tsx
│       ├── Form.test.tsx
│       └── useForm.ts
├── _hooks/
│   └── useFetch.ts
├── _utils/
│   └── formatDate.ts

この構造では、以下の問題が発生しやすいです。

  • スコープの曖昧さ: useFetch や formatDate のような汎用的なユーティリティがコンポーネントにどの程度依存しているか不明確です。
  • 依存の分散: コンポーネントに関連するロジックが hooks や utils に分散し、管理が複雑になります。

After: モジュールドコロケーション設計

モジュールドコロケーション設計を適用した場合の例です。

src/
├── _components/
│   ├── ui/
│   │   ├── input
│   │       └── Input.ts
...
├── _modules/
│   ├── card/
│   │   ├── Card.tsx
│   │   ├── Card.test.tsx
│   │   └── _hooks/
│   │       └── useCardLogic.ts
│   └── form/
│       ├── Form.tsx
│       ├── Form.test.tsx
│       └── _hooks/
│           └── useForm.ts

※基本的なUIは_componentsフォルダに格納します。

この設計では、以下の利点が得られます。

  • スコープの明確化: 各モジュール内に依存関係を閉じ込めることで、どの要素がどのモジュールに関連しているか明確になります。
  • メンテナンス性向上: モジュール単位でコードを管理するため、変更や修正が容易になります。
  • コンポーザビリティの強化: モジュールごとに独立性が高まるため、再利用性が向上します。

モジュールドコロケーション設計を採用するメリット

1. コンポーネントの疎結合

モジュール単位で依存関係を管理することで、コンポーネント間の結合度が低下し、独立性が向上します。

2. 直感的なディレクトリ構造

「モジュール」という概念に基づく構造は、プロジェクトに初めて参加する開発者でも直感的に理解しやすいです。

3. スケーラビリティ

プロジェクトが成長しても、モジュール単位で追加や修正が可能なため、設計が破綻しにくくなります。

まとめ

モジュールドコロケーション設計は、従来のコロケーション設計の課題を克服し、コンポーネントの疎結合や再利用性を向上させる新しいアプローチです。以下のポイントを意識することで、より良い設計が可能になります。

  1. モジュール単位での整理: 複数の関連する要素を一つの単位にまとめる。
  2. スコープの明確化: 各モジュール内に依存関係を閉じ込める。
  3. コンポーザビリティの意識: モジュール単位で独立性を確保することで、再利用性を向上させる。

ぜひ、あなたのプロジェクトにもモジュールドコロケーション設計を取り入れてみてください。ご意見や改善案があればぜひお聞かせください！

Discussion