JavaScriptでクリーンアーキテクチャはどうすればいいのか(Usecase編)

Usecaseもパイプの、とある実装(フィルタ)

• 以下のコードではrepositoryから得られたデータを直接Presenterに渡している

class FilterUsecase {
  changeDepartment(i, department){//まずは部門で絞込
    this.cond = {department : (i < 1) ? null : department };
    const 勤務実績表 = this.repository.q("勤務実績", this.cond);
    this.oport["memberfilter"].update(勤務実績表, this)
  }
// this.oport["memberfilter"]の実態は、Presenter
}

---

従って、Usecaseもとあるデータ形式の変換処理をする

• Repositoryから得られたDomainModel(の一つ)を変換
• DomainModel->(変換)->Presenter#update(list)
  • ここでのDomainModelはTable; RDBにおけるテーブルそのもの
• Usecaseでの処理はPresenterに渡すデータ型への変換処理と考える

class FilterUsecase {
  changeDepartment(i, dept){
    this.cond = {department: (i < 1) ? null : dept}
    const 勤務実績表 = this.repository.q("勤務実績", this.cond)
    const members  = this.filterMember(勤務実績表)
    this.oport["memberfilter"].update(members, this)
  }
  filterMember(table){
    return table.select("氏名").uniq().left_join(this.repository.from("従業員").sortby("表示順").toArray()
  }
// this.oport["memberfilter"]の実態は、Presenter
}

• this.repositoryにどこまで任せればいいのか
• this.repository.q()の実装をどうすればいいのだろう...

---

その時Presenterは?

• Usecase->Presenter->View
• DOM操作を行うのが役割?
  • HTMLの静的な部分がView と考える
    • Presenterから見るとViewとはidが指し示す画面上の領域のことである(はず)
  • 以下、いったんto_vdomを挟んでいるのは処理イメージ

class SelectPresenter
  constructor(id){
    this.node = document.getElementById(id)
  }
  to_vdom(array){
    return {select: array.map((v, i)=>{return {option: v, value: i} })}
  }
  update(departments, usecase){
    //勤務実績repositotyから得られたtableを変換してUIに反映する
    //1. departments(Array)-> 中間表現vdomに変換
    const vdom = this.to_vdom(departments)
    //2. vdomの内容を、DOMに反映
    this.node.appendChild(toDom(vdom).addEventLister("change", function(evt){
     const i = this.selectedIndex;
     const department = this.options[i].text
     usecase.changeDepartment(i, department)
    }))
  }

Presenterの問題

• このSelectPresenterは、usecase.changeDepartment()のせいで密結合すぎる
  • 引数で渡されるdepartments部分と同様に、イベントハンドラも引数で渡せないものか?
• 所属フィルタと勤務形態フィルタは同じセレクトボックスであるが、 勤務形態フィルタは選択肢が少ないからラジオボックスで明示的に表現したいと言われるかもしれない
• (前編からの続き)vdom->DOMへの反映時に
  • 部門を毎回選択する度に、appendChildするNodeListを消して付け加えるのは冗長では?
  • optionタグ分を入れ替えれば良いはず
  • =>セレクトボックスを作るメソッドと、セレクトボックスの項目を入れ替えるメソッドを分けた方が良い
    • セレクトボックスを作るメソッドではイベントハンドラを引数で渡す
    • 項目を入れ替えるメソッドでは、このように配列を引数で渡せばよさそうだ

---

Presenter編に続く

• JavaScriptでクリーンアーキテクチャはどうすればいいのか(前編)
• JavaScriptでクリーンアーキテクチャはどうすればいいのか(Usecase編)
• JavaScriptでクリーンアーキテクチャはどうすればいいのか(Presenter編)
• JavaScriptでクリーンアーキテクチャはどうすればいいのか(initializer編)
• JavaScriptでクリーンアーキテクチャはどうすればいいのか(Repository編)
• JavaScriptでクリーンアーキテクチャはどうすればいいのか(DataStore編)
• JavaScriptでクリーンアーキテクチャはどうすればいいのか(DomainModel編)