Maris OSS版のアプリケーションアーキテクチャCSR編（フロントエンドアーキテクチャ本編）を作成する

[tsuna-can-se]

目次案

Maris OSS版のアプリケーションアーキテクチャ クライアントサイドレンダリング編

• アプリケーションスタック

  - 概要編で挙げた図を詳細化して解説。
  - .NET系ライブラリ、Web系ライブラリ、という書き方ではなく、実際にサンプルAPに組み込むものを具体的に書く。
    - 設定だけでは使えない物は詳しく説明が欲しい。
  - Vue.js側も対象に含める。
  - この図が欲しい。 <https://terasolunaorg.github.io/guideline/5.7.0.RELEASE/ja/Overview/FrameworkStack.html#software-framework>
  

• アプリケーション論理構成

  • アプリケーションアーキテクチャ

    - クリーンアーキテクチャ、レイヤードアーキテクチャ、ＤＤＤの知識は前提にしてよい（リンク先だけ提示）
    

  • レイヤー構造
  • コンポーネント構造（このへんは前段の節でまとめてかけそうなら無理に分割しなくて良い）

• 推奨ディレクトリ/パッケージ構成

  - Maris OSS版の推奨構成（Mono-repo版）として、当部の研究結果をここに書き表す
  - Multi-repoとする場合はどこをどう分けると良いか示す。詳しい解説はしない。
  

• 機能詳細 サーバーサイド

  • 各層で実装する機能の詳細
    流れと該当クラス群をこんな感じに明示する
    http://terasolunaorg.github.io/guideline/current/ja/ArchitectureInDetail/WebServiceDetail/REST.html
    各層の定義に沿って実装寄りの決まり事を書く

    - ドメイン層（アプリケーションコア層）
      - DomainObject 
      - ApplicationServiceクラス
      - IRepositoryクラス
    - プレゼンテーション層
      - Dto (Requestクラス&Responceクラス)
      - Controllerクラス
      - Mapperクラス (DomainObject⇔Dtoを行う)
    - インフラストラクチャ層
      - O/R Mapper (Entity Framework)
      - Repositoryクラス
    

• 機能詳細 クライアントサイド

  • クライアントサイドの概要編があったほうがいいのではないか（Maiaと共通な部分として）MVVMアーキテクチャの説明はここ？

  • アプリケーション方式設計書を基に作成する。下のようなアーキテクチャ図とそれぞれに利用するライブラリ等の説明
    

    - View層 
      - ブラウザのレンダリング
      - イベントの待ち受け
    - ViewModel層
      - 入力チェックやデータ取得
      - モデルの呼び出し
    - Model層
    - router
    - 共通部品
    

• Web API設計

  • ボディはJSON形式にすること
  • RESTアーキテクチャスタイルにできる限り準拠する
  • レスポンス形式（正常、エラー）、HTTPステータスコードなどの最低限の標準化

• テスト方式

  • （自動化を前提として）何を使うか
  • どうやってテストするか
  • 具体的な技術の話に踏み込む
  • 「アプリケーションテスト」としてまとめるテストの全体像に関する部分や概念的な話はあまり踏み込まない
  • 初版は機能系のテストと、コード分析系の静的テストに関するところを重点的に書きたい

  以下議論中に出てきた内容。

  - APのどの部分を対象にどうやってテストするか
  - テストレベルをどう定義するか
  - ある程度一般的な内容で
  - 基本方針として、機能面のテストは可能な限りxUnitに寄せる。
  - Moqを活用してxUnit上でできる限りテストを行う。
  - Seleniumなどを使った打鍵テストは負荷テストなどの非機能要件に絞る。
  - 非機能テストのノウハウを可能な限り盛り込む。
  - Vue.js側のテストも盛り込む。ベストプラクティスがありそうだし。Jestとか使うのだろう。
  

[tsuna-can-se]

メモ：ライブラリ選定の根拠資料に使えるかもしれない
https://2021.stateofjs.com/ja-JP/

[tsuna-can-se]

以下のページ「アプリケーション構成」の目次のところでコメントアウトしてある部分があるので復活させる。
https://github.com/maia-maris/maris/blob/main/documents/contents/app-architecture/overview/index.md

[1nu1taichi]

目次

• 全体像

• フロントエンド

• 技術スタック
  ・OSSを含めた構造図
・OSS一覧（一行説明＋公式ドキュメントリンク）

• アーキテクチャ

  • MVVMパターン
    • ユースケースごとのフロー図 → アーキテクチャCSR編にユースケースごとのフロー図を追加する #180
    • ビュー（コンポーネント）＆ビューモデル（コンポーネント）
      ・ビューとビューモデルの説明
      • 画面コンポーネント
        ・Frame/Page/Section/UI Partsについての説明
・公式ドキュメントで紹介されているVueファイル構成紹介
      • モデル（コンポーネント）との連携
        ・ビューモデルからstoreのGetter＆Action呼び出し
      • 画面遷移　Vue Router
        ・Vue Routerの画面遷移イメージ
      • 入力チェック　VeeValidate & yup
        ・クライアントサイドの入力チェック
・VeeValidateとyupの役割を説明
    • モデル（コンポーネント）
      ・モデルの説明
      • Storeの構成 Pinia
        ・State/Getter/Actionについての説明
        storeの分割単位については開発ガイドあたり
      • API呼び出しについて Axios
        ・store Action→axios→API呼出のフロー図
・例外の受け取り　同期処理＆非同期処理 →　フロントエンドの例外ハンドリングについて整備する #181

• プロジェクト構成

• バックエンド → AlesInfiny MarisのアプリケーションアーキテクチャCSR編（バックエンド）を作成する #162

• テスト → アーキテクチャCSR編のフロントエンドテスト方針を作成・検証する #179

• サーバーサイド

  • 静的検証
  • 単体テスト

• クライアントサイド

  • 静的検証
    ・フロントエンドの静的検証のフロー（フォーマット→検証）
    • コードフォーマッター pretter
      ・Prettierを利用する目的
    • JavaScript ESlint
    • CSS Styllelint
  • 単体テスト Vitest

• E2Eテスト Cypress