yr260625/vue-oreore-ca

vue-oreore-CA

clean architecture勉強用Todoアプリ

Setup

# install
npm install

# Compiles and hot-reloads for development
npm run dev

# Compiles and minifies for production
npm run build

Dependency Rules

• 下図に従う。
• 外側のモジュールから内側のモジュールに向かってのみ依存する。
• 内側のモジュールはインターフェースを介して外側のモジュールを使用する。

controllers

• 外界からの入力に応じた処理振り分けを行う。
• ControllerFactoryにより生成される。
• 生成するために必要なインスタンスは、各種ControllerFactoryを継承したクラスで定義する。

usecases

• アプリケーション固有の業務ロジックを担当する。
• controllerの処理振り分けにより実行される。
• gatewayによるデータ処理と、処理結果をpresenterに伝播させる。

entities

• 一般的な規則などを抽象化する。
• データの加工やバリデーションなどの業務ロジックを担当する。

gateways

• usecaseからインターフェースを介して実行される。
• DB保存やAPI実行などのデータ操作を抽象化する。
• infrastructureのインターフェースを介して、DBからの取得や保存、API実行などを行う。

infrastructure

• ストレージ操作、API実行の具体的な処理を行う。

presenters

• usecaseから伝えられた処理結果を画面表示用に整形する。
• 整形した処理結果はviewStateを介してviewで使用される。

view

• ユーザーが直接触れる画面と、そのコンポーネントを取りまとめる。
• 各画面は、必要なcontrollerを生成して、画面操作に応じたcontrollerメソッドを実行する。

Class Diagram

vue-oreore-ca's Issues

APIアクセスモック追加

change directory configuration

Vuex導入

update readme

ログインページ追加

controller factory追加

[Feature] 環境変数ファイルの追加

概要

目的

変更内容

タスク

• タスク1
• タスク2
• タスク3

アプリ構成変更

Vuetify導入

readme.mdの追加

[Feature] 単体で実行できるようにする

概要

外部APIを実行しないモードを作成する

目的

単体で実行できるようにする

変更内容

タスク

[Feature]アプリ構成変更

概要

• アプリの規模に対してファイル数が多すぎる。
• 似たようなコードがEntity、DTO、Presenterに散らばっている。
• Controllerは受けた値をDTO化してUsecaseに渡すだけで、役割がほぼない。てか無駄にDTO増やしている感ある。
• APIの返却値がほぼそのまま表示されるので、Presenterの役割がほぼない。

目的

• 余分なファイル数を減らす。
• 無意味なメソッドを減らす。

変更内容

• Controllerの役割をPresenterが引き継ぐ。
• PresenterはUsecaseを実行し、実行結果をViewに返却する。
• ViewはイベントをPresenterに通知する。またPresenterから受けた値によりViewの表示を切り替える。
• View、Presenter、Domain(Usecase、Entity)、Repository(driver)の構造にする。
• 外側のレイヤーから内側のレイヤーへ依存するルールは踏襲する。

タスク

• タスク1
• タスク2
• タスク3

add public image

modify TaskSessionStorage

テストモード用設定追加

テストファイル追加

メイン処理追加

add test script

構成変更(repository⇒gateway)

不要ファイル削除