clean architecture front end
1.0.0
こんにちは、これは、さまざまなバージョンで、クリーンアーキテクチャ（最初は正面、次に後ろにある間に）という私のビジョンを送信するためのリポジトリです。
このプロジェクトの例をサポートするための記事を書きました：https：//www.hexa-web.fr/blog/hexagonal-architecture-front-endedクリーンなアーキテクチャを理解するために、フロントエンドでの依存関係の反転に関する私の記事を読むことができます：https：//www.heb.fr/blog-dientency-in--front-front-front--front
これらの例では、Reactに基づいてNext.jsを使用することを選択しましたが、このアーキテクチャの全体的なポイントは、使用されるフレームワークとライブラリ（外部依存関係）とは独立して使用できることです。
簡単な例を得るために、私は単純な主題を選びました：TODOリスト！
プロジェクトでまだ実行する必要があるタスクを確認するには、/docs/todo.mdファイルにアクセスしてください
質問、提案などがある場合は、私に連絡することをheしないでください！そして、このリポジトリがあなたを助けたなら、あなたの知人とそれを共有することを検討してください。
まず、依存関係をインストールします。
npm install
# or
yarn install-
次に、開発サーバーを実行します。
npm run dev
# or
yarn devhttp：// localhost：3000を開き、ブラウザを使用して結果を確認します。
-
ユニットテストを開始するには：
jest-
オンラインでアプリをテストするには：https：//front-end-clean-architecture.netlify.app/
六角形のアーキテクチャ、またはポートとアダプターに基づくアーキテクチャは、ソフトウェア設計の分野で使用されるアーキテクチャパターンです。これは、ゆるく結合され、ポートやアダプターを使用してソフトウェア環境に簡単に接続できるアプリケーションコンポーネントに基づいてシステムを作成することを目的としています。これらのコンポーネントはモジュールで交換可能であり、処理の一貫性を強化し、テストの自動化を促進します。
クリーンアーキテクチャには、アプリケーションパーツ（プライマリポートとアダプター）、ドメイン（ユースケース、ドメインモデルなど）、およびインフラストラクチャパーツ（セカンダリポートとアダプター）の3つの部分があります。
このアーキテクチャは、ポート /アダプターパターンと依存関係の反転原理に基づいています。
クリーンアーキテクチャ（または六角形アーキテクチャ）にあなたを文書化することにより。これらの部品の異なる名前があります。ここで選ばれた名前は個人的なものであり、目標は理解できることです。
使用ケースは、ユーザーのアクションを定義します。目標は、これらの要素にフレームワークまたはライブラリを使用しないことです（これらのツールに関連付けられていないロジックを維持するため）。
正面では、JSまたはTSで書かれたクラスで、機能によって表現できます。 Reactを使用すると、この部分にReduxを使用することができます。
Reduxが使用される場合、アクションはユースケースであり、状態はモデルの1つであり、セレクターはマッピングに使用されます。
プライマリポートは、プライマリアダプターとユースケースの間の契約を確立するために使用されます。このために、インターフェイスを作成できます。実際には、ユースケースもプライマリポートと見なされます。
次に、これらのインターフェイスの実装を使用して、ドメインとの対話に使用されます。1つ目は、プライマリアダプターと呼ばれるものです。彼らの目標は、ユースケースの実行をトリガーすることです。たとえば、前面では、これらのアダプターは、実行を実行する反応コンポーネントにすることができます（reduxかどうか）。
セカンダリポートは、セカンダリアダプターとユースケースの間の契約を確立するために使用されます。このために、通常、インターフェイスを作成します。このインターフェイスは、ユースケースで直接使用されます。
ヒント：そのために依存関係の注入を使用できます。一部の州の管理ライブラリにより、それを行うことができます。たとえば、Redux-ThunkおよびRedux-observableでは、Reduxアクションで直接利用できる「Extraarguments」を渡すことができます。 「バニラ」には、inversifyjsもあります。
インターフェイス（ポート）の2番目の実装は、セカンダリアダプターと呼ばれます。それらはユースケースによって呼び出されます。たとえば、これらのアダプターは、HTTPリクエスト、ローカルストレージに存在するデータへのアクセスなどです。
英語で ：
フランス語：
