はじめに
2023年アドベントカレンダー11日目です。
前回から「ユーザーはトップページでブログの一覧を見ることができる」を進めています。
今回はその続きからです。
今回から「ユーザーはトップページでブログの一覧を見ることができる」を進めていきます。
引き続きWebの開発を進めます。
アーキテクチャ
アーキテクチャ図
今回のブログ記事を取得し、表示するアーキテクチャをクリーンアーキテクチャに則って考えてみます。
クリーンアーキテクチャとは
ロバート・Ｃ・マーティン（通称ボブおじさん）によって提唱されたソフトウェア設計の一つです。
システムのメンテナンス性、柔軟性が高く保たれるため、多くのシステムで採用されています。
まだまだ私自身理解不足な部分があると思いますが、ご容赦ください。
完成
青のDriverとWebに関しては単体テストは書かずに、E2Eテストで担保することにします。
前回E2Eテストは実装済みなので、WEBから作っていきます。
解説
Domain
From ChatGPT
これはシステムのビジネスルールを反映する層です。ドメインエンティティは、ビジネスオブジェクト（例：顧客、注文）とそのビジネスロジックを含みます。この層はシステムの他の部分から独立しており、アプリケーションのコア機能を表します。
-
Blogをドメインとしました。 - title, author, body, createdAtをそれぞれバリューオブジェクトとして定義します。
- バリューオブジェクトに関してはこちらの記事がわかりやすかったです
Web
From ChatGPT
クライアントとサーバー間のインタラクションを処理します。これには、HTTPリクエストの処理、セッション管理、クライアントへのレスポンスの生成などが含まれます。この層はシステムの最も外側に位置し、外部のユーザーとシステム間のインタフェースを提供します。
- Reactの関数コンポーネント・Stateをこれと定義しました
- Stateの管理には
Recoilを採用しました
Usecase
From ChatGPT
システムが提供する具体的なビジネスケースを表します。ここでは、アプリケーションがどのようにユーザーのリクエストを処理し、どのようにドメインエンティティと対話するかを定義します。ユースケース層は、ビジネスロジックとアプリケーションロジックの橋渡しを行います。
-
ビジネスロジックとアプリケーションロジックの橋渡しを行います。- これを満たすために、InputPortから受け取ったブログデータを、OutputPortに渡すという実装にします。
Gateway
From ChatGPT
データベースや外部APIなど、システムの外部とのインターフェースを提供します。これにより、ユースケース層は外部リソースへのアクセス方法を意識することなく、ビジネスロジックに集中できます。
- ドライバーから、ブログのデータを取得し、ドメインオブジェクトに変更してユースケースに渡すようにします
Presenter
From ChatGPT
ユースケースからのデータを受け取り、それをユーザーインターフェース層（UI）で使用できる形式に変換します。これにより、UI層はユースケース層の実装詳細から切り離され、より柔軟になります。
- ユースケースからドメインオブジェクトを受け取り、Stateに格納します
Driver
From ChatGPT
システムの入力を管理する層です。例えば、ウェブアプリケーションにおけるHTTPリクエストの処理がこれに該当します。ドライバーはユーザーからの入力を受け取り、それをシステム内の適切なユースケースに渡します。
- Bffへのリクエスト処理をここに設定します。
- BffはGraphQLサーバーなので、
Apollo Clientを使い、リクエストを送ります。
次回からは、この構成でテスト & 実装を進めていきます。