新しいフロントエンドアーキテクチャを設計するためのリポジトリです。
src
|
+-- lib # ライブラリをアプリケーション用に設定して再度エクスポートしたもの
|
+-- api # 共有 API リクエスト関数の配置場所
|
+-- assets # 静的ファイル（画像、スタイルシート等）
|
+-- config # 環境変数をまとめる
|
+-- common # 共有コンポーネントやユーティリティ・フック
| |
| +-- components
| +-- hooks
| +-- utils
|
+-- features # 機能ごとのディレクトリ
| |
| +-- Feature1 # 'Feature1' という名前の機能
| |
| +-- __tests__ # テストファイル
| +-- api # Feature1 固有の API リクエスト関数
| +-- assets # Feature1 固有の静的ファイル
| +-- components # Feature1 固有のコンポーネント
| +-- hooks # Feature1 固有のフック
| +-- routes # Feature1 固有のルート
| +-- stores # Feature1 固有の状態ストア
| +-- types # Feature1 固有の TypeScript 型
| +-- utils # Feature1 固有のユーティリティ関数
| +-- index.ts # Feature1 のエントリーポイント（公開 API）
|
+-- providers # 全体プロバイダー
|
+-- routes # 全体ルート設定
|
+-- stores # 全体または複数機能間で共有される状態ストア
|
+-- test # テストユーティリティとモックサーバー
|
+-- types # 全体で使用される基本 Typescript 型
|
app.tsx # アプリケーションのエントリーポイントこのディレクトリは、アプリケーションに使用される外部ライブラリの設定と再エクスポートを行います。ここでライブラリのセットアップとカスタマイズを一元化します。
API リクエスト関数が配置されます。ここで定義された関数は、アプリケーション全体で利用できます。
静的ファイル（画像、スタイルシート、モックデータなど）が格納されています。
アプリケーションの設定（環境変数など）を管理します。個々の環境変数を直接扱うよりも安全な方法です。
共有コンポーネント、フック、ユーティリティ関数が格納されています。これによりコードの再利用が容易になります。
各機能ごとのディレクトリがあります。各機能は独自の API リクエスト関数、静的ファイル、コンポーネント、フック、ルート、ストア、TypeScript の型、ユーティリティ関数を含んでいます。この構成は、フィーチャーの可読性と保守性を向上させます。
アプリケーション全体のプロバイダーです。ここでは、アプリケーション全体で必要な状態やサービスを提供します。
アプリケーション全体のルーティング設定です。ここでは、アプリケーション全体のルートを一元管理し、ルーティングの複雑性を把握しやすくします。
全体または複数の機能間で共有される状態を管理します。これにより、大規模な状態変更や依存関係が明確になります。
テストユーティリティとモックサーバーが置かれています。このディレクトリを通じて、統一的なテスト環境を提供します。
プロジェクト全体で使用される基本 TypeScript 型が格納されています。これにより、型の一貫性と再利用性が保証されます。
アプリケーションのエントリーポイントです。すべてのレンダリングはここから始まります。
以上がこのフロントエンドアーキテクチャの重要な部分です。良い開発体験を提供するために精査され、最適化されています。
このアーキテクチャではフューチャー構造を参考にしており、以下の点に重点を置いています:
commonディレクトリ: 共有コンポーネント、フック、ユーティリティ関数が格納されています。- 特定のフィーチャーに対するディレクトリ: 各フィーチャーはそれぞれ専用のディレクトリを持ち、その中に固有の api, assets, components, hooks, routes, stores, types, utils を含んでいます。これにより各フィーチャーの可読性と保守性が向上しています。
この構成により、コードの再利用性と独立性が高く、新たなフィーチャーを追加する際もスムーズです。良い開発体験を提供するために精査され、最適化されています。